/* ============================================================
   ROBAS LAW — design system
   Palette sampled from the office itself: ink black (desk,
   door frames, signage), warm oak (floor), ochre (the two
   chairs), slate (the sea triptych), paper (the walls).
   ============================================================ */

:root {
    --ink:        #161719;
    --ink-2:      #26282B;
    --ink-soft:   #3E4044;
    --ink-mute:   #6B6D72;
    --paper:      #F4F2EE;
    --paper-2:    #EAE6DF;
    --white:      #FFFFFF;
    --oak:        #C69A5F;
    --oak-deep:   #806036;   /* was #A97F47 (2.9:1 on --paper-2). Now ≥4.6:1 on white, paper and paper-2: it is used as small text */
    --ochre:      #D3B14E;
    --slate:      #6E8B92;

    --line:       rgba(22, 23, 25, 0.13);
    --line-soft:  rgba(22, 23, 25, 0.07);
    --line-dark:  rgba(255, 255, 255, 0.14);

    --font:       'Assistant', 'Helvetica Neue', Arial, sans-serif;
    --font-latin: 'Jost', 'Assistant', sans-serif;

    --nav-h:      76px;
    --wrap:       1180px;
    --wrap-text:  720px;
    --pad:        clamp(20px, 5vw, 48px);
    --gap-section: clamp(72px, 10vw, 140px);

    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --t:          .45s var(--ease);
}

/* --- reset --- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    font-size: 100%;   /* not 16px: a px value silently overrides the visitor's browser font-size setting */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--ink-soft);
    background: var(--paper);
    direction: rtl;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

/* Focus ring must reach 3:1 against what surrounds it (WCAG 1.4.11). --oak-deep does that
   on every light surface (≥4.6:1) and even on ink (3.1:1); on the dark sections the
   lighter --oak reads better (~7:1), so they switch. */
:root { --focus: var(--oak-deep); }
:where(.nav, .m-nav, .hero, .page-header, .section--ink, .section--navy, .cta-banner, .band, .footer) { --focus: var(--oak); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--white);
}
.skip-link:focus { inset-inline-start: 0; }

/* --- typography --- */

h1, h2, h3, h4 {
    font-weight: 300;
    line-height: 1.22;
    color: var(--ink);
    letter-spacing: -0.005em;
}

.t-display {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 200;
    line-height: 1.08;
}

.t-h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.t-h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
.t-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 400; }

.eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--oak-deep);
    margin-bottom: 20px;
}

.lede {
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    font-weight: 300;
    line-height: 1.68;
    color: var(--ink-soft);
}

.rule {
    width: 54px;
    height: 1px;
    background: var(--oak);
    border: 0;
    margin: 28px 0;
}

.latin { font-family: var(--font-latin); }

/* --- layout --- */

.container {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: var(--pad);
}
.container--narrow { max-width: 820px; margin-inline: auto; }

.section { padding-block: var(--gap-section); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, 0.78); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

/* aliases kept so page bodies written before the redesign still style correctly */
.section--cream { background: var(--white); }
.section--navy { background: var(--ink); color: rgba(255, 255, 255, 0.78); }
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy .section-title { color: var(--white); }
.section--navy .section-subtitle { color: rgba(255, 255, 255, 0.6); }
.section--navy .section-tag { color: var(--oak); }

.section-header { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-header--center { margin-inline: auto; text-align: center; }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
}
.split--text-first { grid-template-columns: 1.05fr .95fr; }
.split--top { align-items: start; }

/* --- buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.btn--solid { background: var(--ink); color: var(--white); }
.btn--solid:hover { background: var(--oak-deep); }
.btn--line { border-color: var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.btn--onink { border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.btn--onink:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--quiet {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--oak);
    padding-bottom: 4px;
    color: var(--ink);
}
.btn--quiet:hover { color: var(--oak-deep); }
.btn--lg { padding: 17px 38px; }
.btn--sm { padding: 10px 22px; font-size: .88rem; }

/* Legacy aliases kept so page bodies written before the redesign still style correctly. */
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--oak-deep); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--ink); }
.btn--outline { border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }

/* ============================================================
   NAV
   ============================================================ */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--nav-h);
    background: var(--ink);
    transition: background var(--t), box-shadow var(--t);
}
.nav--over-hero { background: transparent; }
.nav--over-hero.is-scrolled { background: var(--ink); box-shadow: 0 1px 0 var(--line-dark); }

.nav__inner {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding-inline: var(--pad);
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
}

.nav__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__mark { width: 36px; height: auto; }   /* height auto: forcing both squashed it */
.nav__wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.nav__wordmark-name {
    font-family: var(--font-latin);
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .2em;
    color: var(--white);
}
.nav__wordmark-sub {
    font-family: var(--font-latin);
    font-size: .52rem;
    font-weight: 300;
    letter-spacing: .26em;
    color: rgba(255, 255, 255, 0.52);
    margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 18px); margin-inline-start: auto; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 2px;
    font-size: .88rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.74);
    white-space: nowrap;
    transition: color var(--t);
}
.nav__link:hover, .nav__link.is-active { color: var(--white); }
.nav__link::after {
    content: '';
    position: absolute;
    inset-inline: 2px;
    bottom: 0;
    height: 1px;
    background: var(--oak);
    transform: scaleX(0);
    transition: transform .35s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.nav__item { position: relative; }
.nav__item.is-active > .nav__link { color: var(--white); }
.nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.nav__chev { transition: transform var(--t); opacity: .7; }

.nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    transform: translateX(50%);
    min-width: 210px;
    padding: 10px 0;
    background: var(--ink-2);
    border: 1px solid var(--line-dark);
    /* The visual gap below the nav is a TRANSPARENT TOP BORDER, not empty space.
       It still belongs to the element, so the pointer stays inside :hover while
       travelling from the trigger down to the first item. background-clip keeps
       the panel from painting up into it. A plain `top: calc(100% + 10px)` offset
       creates a dead zone and the menu snaps shut halfway. */
    border-top: 14px solid transparent;
    background-clip: padding-box;
}

/* Widen the hover target sideways as well, so a diagonal move to a long
   item like "טפסים והגשה" doesn't drop out of the trigger's column. */
.nav__item--has-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    inset-inline: -20px;
    height: 16px;
    pointer-events: none;
}
.nav__item--has-menu:hover::after { pointer-events: auto; }
.nav__item:hover .nav__menu,
.nav__item.is-open .nav__menu { display: block; }
.nav__item:hover .nav__chev { transform: rotate(180deg); }

.nav__menu a {
    display: block;
    padding: 10px 22px;
    font-size: .86rem;
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--t), background var(--t);
}
.nav__menu a:hover { color: var(--white); background: rgba(255, 255, 255, 0.05); }

.nav__end { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

.nav__phone {
    font-size: .88rem;
    color: rgba(255, 255, 255, 0.74);
    letter-spacing: .03em;
    transition: color var(--t);
}
.nav__phone:hover { color: var(--white); }

.nav__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: background var(--t), border-color var(--t), color var(--t);
}
.nav__wa:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.nav__burger { display: none; flex-direction: column; gap: 6px; padding: 10px 4px; }
.nav__burger span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--white);
    transition: transform .35s var(--ease), opacity .2s;
}
.nav__burger.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --- mobile menu --- */

.m-nav {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--ink);
    padding-top: var(--nav-h);
    overflow-y: auto;
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.m-nav.is-open { opacity: 1; }
.m-nav__inner { padding: 32px var(--pad) 60px; }
.m-nav__links { display: flex; flex-direction: column; }

.m-nav__link {
    padding: 14px 0;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--white);
    border-bottom: 1px solid var(--line-dark);
}
.m-nav__sub {
    padding: 10px 0 10px 0;
    padding-inline-start: 18px;
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.m-nav__link.is-active, .m-nav__sub.is-active { color: var(--oak); }
.m-nav__foot { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.m-nav__foot .btn { justify-content: center; }
.m-nav__foot .btn--line { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.m-nav__foot .btn--solid { background: var(--white); color: var(--ink); }

/* ============================================================
   HERO — crossfading office photography
   ============================================================ */

.hero {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    display: flex;
    align-items: flex-end;
    background: var(--ink);
    overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s linear;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The firm's photographs are PORTRAIT (1200x1600) in a landscape hero, so `cover`
       crops hard. Left centred, a wide screen shows only the middle third, which on the
       reception shot is the dark front panel of the desk and reads as a black box.
       Each slide therefore aims the crop at the part of its own frame worth showing. */
    object-position: center var(--hero-focus, 50%);
    transform: scale(1.06);
}
.hero__slide--reception { --hero-focus: 30%; }   /* triptych, shelf, desk and chairs */
.hero__slide--entrance  { --hero-focus: 45%; }   /* the LR monogram wall */
.hero__slide.is-active img { animation: heroDrift 9s linear forwards; }

@keyframes heroDrift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.09); }
}

.hero__scrim {
    position: absolute;
    inset: 0;
    /* Two layers: a soft vertical wash for overall legibility, plus a horizontal one
       that is heaviest on the reading side (right, in RTL) where the text actually
       sits. The previous single 92% vertical wash blacked out the photograph exactly
       where the content is. */
    background:
        linear-gradient(to left, rgba(22, 23, 25, 0.82) 0%, rgba(22, 23, 25, 0.45) 55%, rgba(22, 23, 25, 0.22) 100%),
        linear-gradient(to top, rgba(22, 23, 25, 0.55) 0%, rgba(22, 23, 25, 0.18) 55%, rgba(22, 23, 25, 0.30) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad) clamp(56px, 8vw, 104px);
}

.hero__title {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 200;
    line-height: 1.04;
    color: var(--white);
}
.hero__title-sub {
    display: block;
    margin-top: 14px;
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
    font-weight: 300;
    letter-spacing: .2em;
    color: var(--oak);
}

.hero__text {
    max-width: 540px;
    margin-top: 26px;
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.76);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 4vw, 48px);
    margin-top: clamp(40px, 6vw, 64px);
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__meta-item { display: flex; flex-direction: column; gap: 4px; }
.hero__meta-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, 0.55);
}
.hero__meta-value { font-size: .95rem; color: var(--white); }

.hero__dots {
    position: absolute;
    z-index: 3;
    bottom: clamp(20px, 3vw, 34px);
    inset-inline-start: var(--pad);
    display: flex;
    gap: 8px;
}
.hero__dot {
    width: 26px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    transition: background var(--t);
}
.hero__dot.is-active { background: var(--oak); }

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */

.page-header {
    background: var(--ink);
    padding-top: calc(var(--nav-h) + clamp(52px, 8vw, 92px));
    padding-bottom: clamp(52px, 8vw, 92px);
    color: rgba(255, 255, 255, 0.72);
}
.page-header .container { max-width: var(--wrap); }

.page-header__breadcrumb {
    font-size: .78rem;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 22px;
}
.page-header__breadcrumb a { transition: color var(--t); }
.page-header__breadcrumb a:hover { color: var(--oak); }

.page-header__title {
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 200;
    color: var(--white);
    line-height: 1.1;
}
.page-header__subtitle {
    max-width: 620px;
    margin-top: 16px;
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.66);
}
.page-header__gold-line { width: 54px; height: 1px; background: var(--oak); margin-top: 28px; }

/* ============================================================
   SERVICE INDEX — numbered editorial rows, no icons
   ============================================================ */

.index-list { border-top: 1px solid var(--line); }

.index-row {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: baseline;
    gap: clamp(14px, 3vw, 36px);
    padding: clamp(24px, 3vw, 34px) 0;
    border-bottom: 1px solid var(--line);
    transition: background var(--t), padding-inline var(--t);
}
a.index-row:hover { background: rgba(198, 154, 95, 0.06); }

.index-row__num {
    font-family: var(--font-latin);
    font-size: .95rem;
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--ink-mute);
    transition: color var(--t);
}
a.index-row:hover .index-row__num { color: var(--oak-deep); }

.index-row__title {
    display: block;
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 8px;
}
.index-row__text { display: block; font-size: .98rem; color: var(--ink-mute); max-width: 62ch; }

.index-row__go {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--oak-deep);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--t), transform var(--t);
}
a.index-row:hover .index-row__go { opacity: 1; transform: translateX(0); }

/* ============================================================
   SERVICE CARDS (inner pages) — flat, hairline, icon-free
   ============================================================ */

/* Hairlines per cell, for the same reason as .clients__grid: the practice-area list
   is edited often and 13 cards in 3 columns leaves two slots in the last row. With a
   --line background showing through the gaps those slots rendered as grey blocks. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--white);
    border: 1px solid var(--line);
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px);
    background: var(--white);
    box-shadow: 0 0 0 1px var(--line);
    transition: background var(--t);
}
a.service-card:hover { background: var(--paper); }

.service-card__icon { display: none; }

.service-card__title {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 12px;
}
.service-card__text { font-size: .96rem; color: var(--ink-mute); flex: 1; }
.service-card__link {
    display: inline-block;
    margin-top: 20px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--oak-deep);
}

/* ============================================================
   DOWNLOADS
   ============================================================ */

.dl-groups { display: grid; gap: clamp(36px, 5vw, 56px); }
.dl-group__title { font-size: 1.15rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.dl-group__note { font-size: .95rem; color: var(--ink-mute); margin-bottom: 18px; max-width: 62ch; }

.dl-list { border-top: 1px solid var(--line); }

.dl {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    transition: background var(--t), padding-inline var(--t);
}
.dl:hover { background: rgba(198, 154, 95, 0.06); }

.dl__name { color: var(--ink); font-size: 1rem; }
.dl__meta { display: flex; align-items: center; gap: 10px; }
.dl__ext {
    font-family: var(--font-latin);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .12em;
    color: var(--ink-mute);
    padding: 3px 8px;
    border: 1px solid var(--line);
}
/* "284 KB" is a left-to-right run; without isolation RTL flips it to "KB 284" */
.dl__size {
    font-size: .8rem;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}
.dl__icon { color: var(--oak-deep); flex-shrink: 0; }

/* ============================================================
   NOTABLE CASES
   ============================================================ */

.case-list { border-top: 1px solid var(--line); }

.case {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(20px, 4vw, 56px);
    padding: clamp(32px, 4.5vw, 56px) 0;
    border-bottom: 1px solid var(--line);
}

.case__aside { display: flex; flex-direction: column; gap: 7px; }
.case__year {
    font-family: var(--font-latin);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 200;
    line-height: 1;
    color: var(--ink);
}
.case__court { font-size: .95rem; color: var(--ink); }
.case__no {
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--ink-mute);
    direction: ltr;
    text-align: start;
    unicode-bidi: plaintext;
}

.case__area {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--oak-deep);
    margin-bottom: 12px;
}
.case__title {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 14px;
}
.case__summary { max-width: 68ch; }

.case__holdings { margin: 22px 0 0; }
.case__holdings li {
    position: relative;
    padding-inline-start: 24px;
    margin-bottom: 12px;
    max-width: 68ch;
    color: var(--ink);
}
.case__holdings li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .8em;
    width: 12px;
    height: 1px;
    background: var(--oak);
}

.case__why {
    margin-top: 20px;
    padding: 18px 22px;
    background: var(--white);
    border-inline-start: 2px solid var(--oak);
    font-size: .97rem;
    max-width: 68ch;
}

.case__meta { margin-top: 26px; border-top: 1px solid var(--line); }
.case__meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 11px 0;
    font-size: .92rem;
    border-bottom: 1px solid var(--line-soft);
}
.case__meta-row:last-child { border-bottom: 0; }
.case__meta-label { font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-mute); padding-top: 3px; }

.case-disclaimer {
    margin-top: 36px;
    max-width: 78ch;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--ink-mute);
}

/* compact variant used for the homepage preview */
.section--white .case__why { background: var(--paper); }

/* ============================================================
   ROSTER — the team, deliberately photo-free
   ============================================================ */

.roster { border-top: 1px solid var(--line); }

.roster__row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 1.6fr;
    gap: clamp(16px, 4vw, 56px);
    padding: clamp(28px, 4vw, 42px) 0;
    border-bottom: 1px solid var(--line);
}

.roster__name { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 300; color: var(--ink); }
.roster__role {
    display: block;
    margin-top: 8px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--oak-deep);
}
.roster__bio { font-size: 1rem; color: var(--ink-soft); }

/* legacy team markup */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.team-card { padding: clamp(26px, 3vw, 38px); background: var(--paper); }
.team-card__photo { display: none; }
.team-card__name { font-size: 1.3rem; font-weight: 300; color: var(--ink); }
.team-card__role {
    display: block;
    margin-top: 6px;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--oak-deep);
}
.team-card__bio { font-size: .97rem; color: var(--ink-mute); }

/* ============================================================
   PHOTO BAND — full bleed, parallax
   ============================================================ */

.band-photo {
    position: relative;
    height: clamp(280px, 46vw, 520px);
    overflow: hidden;
    background: var(--ink);
}
.band-photo__img {
    position: absolute;
    inset: -12% 0;
    width: 100%;
    height: 124%;
    object-fit: cover;
    object-position: center var(--band-focus, 50%);
    will-change: transform;
}
.band-photo__img--reception { --band-focus: 24%; }
.band-photo__scrim { position: absolute; inset: 0; background: rgba(22, 23, 25, 0.34); }
.band-photo__quote {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}
.band-photo__text {
    max-width: 620px;
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--white);
}

/* White text straight on a photograph measured 2.2-2.9:1 on eight of the nine bands. Rather
   than darken every photo to 60% to fix that, the words sit on their own ink plate: the
   photograph stays bright, the caption reads at 9:1 or better whatever is behind it. */
.band-photo__text {
    width: fit-content;          /* stays a block, so max-width and the reveal transform still apply */
    padding: .45em .8em;
    background: rgba(22, 23, 25, 0.8);
}

/* ============================================================
   CLIENTS
   ============================================================ */

/* The hairlines are drawn per cell rather than by letting a --line background show
   through 1px gaps. Same result when the rows are full, but the client list changes
   often and rarely divides evenly: with the old approach the leftover area of the
   last row rendered as a solid grey block. Now it is simply white. */
.clients__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--white);
    border: 1px solid var(--line);
}

.clients__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    padding: 26px;
    background: var(--white);
    box-shadow: 0 0 0 1px var(--line);
}

.clients__logo {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    /* monochrome at rest, but with enough contrast that pale marks still read */
    filter: grayscale(1) contrast(1.25);
    opacity: .9;
    transition: filter var(--t), opacity var(--t);
}
.clients__cell:hover .clients__logo { filter: none; opacity: 1; }

.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--white);
    border: 1px solid var(--line);
}
.client-logo {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: var(--white);
    box-shadow: 0 0 0 1px var(--line);
    font-size: .93rem;
    color: var(--ink-soft);
}

/* ============================================================
   TESTIMONIALS — quotes, no cards, no avatars
   ============================================================ */

.quotes { border-top: 1px solid var(--line); }

.quote-item { padding: clamp(30px, 4vw, 46px) 0; border-bottom: 1px solid var(--line); }
.quote-item__text {
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 300;
    line-height: 1.68;
    color: var(--ink);
    max-width: 78ch;
}
.quote-item__by {
    display: block;
    margin-top: 18px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--oak-deep);
}

/* legacy testimonial markup */
.testimonials-grid { border-top: 1px solid var(--line); }
.testimonial-card { padding: clamp(30px, 4vw, 46px) 0; border-bottom: 1px solid var(--line); }
.testimonial-card__quote-mark, .testimonial-card__avatar { display: none; }
.testimonial-card__text {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 300;
    line-height: 1.68;
    color: var(--ink);
    max-width: 78ch;
}
.testimonial-card__author { margin-top: 18px; }
.testimonial-card__name {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--oak-deep);
}

/* ============================================================
   STATEMENT (pull quote on ink)
   ============================================================ */

/* Default is ink on a light section. White is applied only where the
   background is actually dark — the reverse used to be true, which left
   these quotes invisible on every light page that used them. */
.quote-block {
    max-width: 900px;
    padding-inline-start: 24px;
    border-inline-start: 2px solid var(--oak);
}
.quote-block__text {
    font-size: clamp(1.2rem, 2.4vw, 1.85rem);
    font-weight: 200;
    line-height: 1.5;
    color: var(--ink);
}
.quote-block__author {
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--oak-deep);
}

.section--ink .quote-block,
.section--navy .quote-block,
.cta-banner .quote-block { border-inline-start-color: var(--oak); }

.section--ink .quote-block__text,
.section--navy .quote-block__text,
.cta-banner .quote-block__text { color: var(--white); }

.section--ink .quote-block__author,
.section--navy .quote-block__author,
.cta-banner .quote-block__author { color: var(--oak); border-top-color: var(--line-dark); }

/* ============================================================
   VALUES / STEPS / STATS
   ============================================================ */

/* House rules: rows, not a grid — five items can't leave a sixth cell empty. */
.houserules { border-top: 1px solid var(--line); }

.houserule {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(14px, 4vw, 56px);
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--line);
}

.houserule__head { display: flex; align-items: baseline; gap: 14px; }
.houserule__num {
    font-family: var(--font-latin);
    font-size: .95rem;
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--oak-deep);
}
.houserule__title {
    font-size: clamp(1.25rem, 2.3vw, 1.7rem);
    font-weight: 300;
    color: var(--ink);
}

.houserule__body > p { max-width: 62ch; }
.houserule__quote {
    max-width: 62ch;
    margin-bottom: 18px;
    padding-inline-start: 20px;
    border-inline-start: 2px solid var(--oak);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--ink);
}
.houserule__quote::before { content: '״'; }
.houserule__quote::after { content: '״'; }

.steps-list { border-top: 1px solid var(--line); }
.step-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: clamp(14px, 3vw, 32px);
    padding: clamp(24px, 3vw, 34px) 0;
    border-bottom: 1px solid var(--line);
}
.step-item__number {
    font-family: var(--font-latin);
    font-size: .95rem;
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--oak-deep);
}
.step-item__content h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: 8px; }
.step-item__content p { font-size: .98rem; color: var(--ink-mute); }

.about__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 5vw, 56px);
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.about__stat { display: flex; flex-direction: column; gap: 4px; }
.about__stat-number {
    font-family: var(--font-latin);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 200;
    color: var(--ink);
    line-height: 1;
}
.about__stat-label { font-size: .74rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-mute); }

/* legacy about split */
.about__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
}
.about__image-wrapper { position: relative; }
.about__photo { width: 100%; height: 100%; object-fit: cover; }
.about__image-accent { display: none; }
.about__text { margin-bottom: 20px; }

.section-tag {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--oak-deep);
    margin-bottom: 20px;
}
.section-title {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    font-weight: 200;
    color: var(--ink);
    margin-bottom: 18px;
}
.section-subtitle { font-size: 1.08rem; font-weight: 300; color: var(--ink-mute); }

/* ============================================================
   CTA
   ============================================================ */

.cta-banner {
    background: var(--ink);
    padding-block: clamp(56px, 8vw, 100px);
    color: rgba(255, 255, 255, 0.72);
}
.cta-banner__title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 200;
    color: var(--white);
    margin-bottom: 14px;
}
.cta-banner__text { max-width: 520px; font-weight: 300; margin-bottom: 32px; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   LONG-FORM CONTENT
   ============================================================ */

.content-page { max-width: var(--wrap-text); }
.content-page p { margin-bottom: 22px; }
.content-page h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 300;
    margin: 48px 0 18px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.content-page h3 { font-size: 1.2rem; font-weight: 500; margin: 34px 0 14px; color: var(--ink); }
.content-page ul, .content-page ol { margin: 0 0 24px; padding-inline-start: 4px; }
.content-page li {
    position: relative;
    padding-inline-start: 22px;
    margin-bottom: 11px;
}
.content-page ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .78em;
    width: 7px;
    height: 1px;
    background: var(--oak);
}
.content-page ol { counter-reset: n; }
.content-page ol li { counter-increment: n; }
.content-page ol li::before {
    content: counter(n);
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--font-latin);
    font-size: .85rem;
    color: var(--oak-deep);
}
.content-page strong { font-weight: 600; color: var(--ink); }
.content-page a:not(.btn) { border-bottom: 1px solid var(--oak); }

.callout {
    padding: clamp(22px, 3vw, 32px);
    background: var(--white);
    border-inline-start: 2px solid var(--oak);
    margin-bottom: 28px;
}
.callout p:last-child { margin-bottom: 0; }

/* ============================================================
   FORM
   ============================================================ */

.contact-form { display: grid; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-mute); }
.form-group input,
.form-group textarea,
.form-group select {
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    transition: border-color var(--t);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--ink); }   /* the ring stays: keyboard users need it */
.form-group textarea { min-height: 150px; resize: vertical; }

.form-status { font-size: .95rem; }
.form-status--ok { color: #2E6B45; }
.form-status--err { color: #97302A; }

.detail-list { border-top: 1px solid var(--line); }
.detail-list__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}
.detail-list__label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-mute); padding-top: 4px; }
.detail-list__value { color: var(--ink); justify-self: start; }
a.detail-list__value { border-bottom: 1px solid var(--oak); transition: color var(--t); }
a.detail-list__value:hover { color: var(--oak-deep); }

.u-fine { font-size: .82rem; color: var(--ink-mute); }
.u-fine a { border-bottom: 1px solid var(--oak); }
.u-mb-m { margin-bottom: 24px; }
.u-mb-s { margin-bottom: 16px; }
.u-mb-l { margin-bottom: 32px; }
.u-mt-m { margin-top: 24px; }
.u-mt-l { margin-top: 32px; }

.map-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    overflow: hidden;
}
.map-container iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   CONTACT BAND + FOOTER
   ============================================================ */

.band { background: var(--ink-2); color: var(--white); }
.band__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 44px) var(--pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.band__item { display: flex; flex-direction: column; gap: 7px; }
.band__label { font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: rgba(255, 255, 255, 0.55); }
.band__value { font-size: .97rem; color: var(--white); transition: color var(--t); }
a.band__value:hover { color: var(--oak); }

.footer { background: var(--ink); color: rgba(255, 255, 255, 0.6); border-top: 1px solid var(--line-dark); }
.footer__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(52px, 7vw, 84px) var(--pad) 0; }
.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(28px, 4vw, 56px);
}
.footer__lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.footer__mark { width: 40px; height: auto; }
.footer__wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.footer__wordmark-name {
    font-family: var(--font-latin);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .2em;
    color: var(--white);
}
.footer__wordmark-sub {
    font-family: var(--font-latin);
    font-size: .56rem;
    font-weight: 300;
    letter-spacing: .26em;
    color: rgba(255, 255, 255, 0.52);
    margin-top: 4px;
}
.footer__about { font-size: .93rem; font-weight: 300; max-width: 40ch; margin-bottom: 22px; }

.footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--line-dark);
    overflow: hidden;
    transition: color var(--t), border-color var(--t);
}
.footer__social:hover { color: var(--oak); border-color: var(--oak); }
.footer__social svg { width: 16px; height: 16px; }

.footer__title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--white);
    margin-bottom: 18px;
}
.footer__link, .footer__line { display: block; font-size: .93rem; font-weight: 300; margin-bottom: 11px; }
.footer__link { transition: color var(--t); }
.footer__link:hover, .footer__link.is-active { color: var(--oak); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    margin-top: clamp(40px, 5vw, 60px);
    padding: 24px 0;
    border-top: 1px solid var(--line-dark);
    font-size: .82rem;
    color: rgba(255, 255, 255, 0.55);
}
.footer__bottom a:hover { color: var(--oak); }

/* ============================================================
   FAB
   ============================================================ */

.fab {
    position: fixed;
    z-index: 900;
    inset-inline-end: clamp(16px, 2.5vw, 28px);
    bottom: clamp(16px, 2.5vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--t), transform var(--t);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.fab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--ink);
    color: var(--white);
    border-radius: 50%;
    transition: background var(--t), transform var(--t);
}
.fab__btn:hover { transform: translateY(-2px); background: var(--oak-deep); }
.fab__btn--wa { background: #1FA855; }
.fab__btn--wa:hover { background: #17914A; }

/* ============================================================
   MOTION — one deliberate entrance, nothing else
   ============================================================ */

.reveal, .reveal-slide, .u-rise {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible, .reveal-slide.visible, .u-rise.visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .nav__links, .nav__phone { display: none; }
    .nav__burger { display: flex; }
    .nav__inner { justify-content: space-between; }
    .nav__end { margin-inline-start: auto; }
}

@media (max-width: 980px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .clients__grid { grid-template-columns: repeat(3, 1fr); }
    .clients-grid { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .band__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    body { font-size: 1rem; }
    .split, .split--text-first, .about__grid { grid-template-columns: 1fr; }
    .services-grid, .team-grid { grid-template-columns: 1fr; }
    .houserule { grid-template-columns: 1fr; gap: 14px; }
    .clients__grid { grid-template-columns: repeat(2, 1fr); }
    .clients-grid { grid-template-columns: 1fr; }
    .roster__row { grid-template-columns: 1fr; gap: 12px; }
    .case { grid-template-columns: 1fr; gap: 16px; }
    .case__aside { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
    .case__year { font-size: 1.5rem; }
    .case__meta-row { grid-template-columns: 1fr; gap: 2px; }
    .index-row { grid-template-columns: 40px 1fr; }
    .index-row__go { display: none; }
    .step-item { grid-template-columns: 40px 1fr; }
    .hero { min-height: 86vh; }
    .nav__wordmark-sub { display: none; }
    .footer__bottom { flex-direction: column; }
}

@media (max-width: 480px) {
    .clients__grid { grid-template-columns: 1fr 1fr; }
    .clients__cell { min-height: 104px; padding: 18px; }
    .band__inner { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   ACCESSIBILITY PANEL + THE MODES IT SWITCHES
   Every option is a class on <html>. The same classes are restored by a short
   inline script in <head> before first paint, so there is no flash of the
   default page for someone who enlarged the text.
   ============================================================ */

/* text size: percentages of the root, so everything sized in rem follows */
html.a11y-text-1 { font-size: 120%; }
html.a11y-text-2 { font-size: 140%; }
html.a11y-text-3 { font-size: 160%; }

/* high contrast: darken the soft greys, strengthen the hairlines, lift thin weights */
html.a11y-contrast {
    --ink-soft: #161719;
    --ink-mute: #2A2C30;
    --oak-deep: #5E4523;
    --line: rgba(22, 23, 25, 0.45);
    --line-dark: rgba(255, 255, 255, 0.5);
}
/* Only the selectors that set translucent white, not every descendant: several hover
   states flip to a white background with ink text, and forcing white there would erase
   the label. :where() keeps this at the lowest specificity, so hover colours still win. */
html.a11y-contrast :where(
    .section--ink, .section--navy, .nav__wordmark-sub, .nav__link, .nav__menu a, .nav__phone,
    .m-nav__sub, .hero__text, .hero__meta-label, .page-header, .page-header__breadcrumb,
    .page-header__subtitle, .cta-banner, .band__label, .footer, .footer__wordmark-sub,
    .footer__social, .footer__bottom
) { color: var(--white); }
html.a11y-contrast .section--navy .section-subtitle { color: var(--white); }
html.a11y-contrast :where(h1, h2, h3, h4, p, li, dd, dt, .lede, .hero__title, .page-header__title, .t-h2) {
    font-weight: 400;
}
html.a11y-contrast .hero__scrim { background: rgba(14, 15, 17, 0.86); }
html.a11y-contrast .band-photo__text { background: rgba(14, 15, 17, 0.95); }

/* links: an underline on every link, so they do not depend on colour alone */
html.a11y-links a:not(.fab__btn):not(.skip-link) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

/* text spacing (WCAG 1.4.12). No letter-spacing: it pulls Hebrew letters apart */
html.a11y-spacing body { word-spacing: .16em; }
html.a11y-spacing :where(p, li, dd, dt, label, blockquote, .lede, .service-card__text,
    .index-row__text, .roster__bio, .case__summary, .team-card__bio) { line-height: 2; }
html.a11y-spacing :where(.content-page p, .about__text) { margin-bottom: 1.5em; }

/* stop motion: the same rules as prefers-reduced-motion, on demand */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
html.a11y-motion :where(.reveal, .reveal-slide, .u-rise) { opacity: 1; transform: none; }
html.a11y-motion .hero__slide.is-active img { animation: none; transform: scale(1.02); }
html.a11y-motion .band-photo__img { transform: none !important; }

/* Used for one synchronous read of the page text. Neither the form honeypot nor the
   breadcrumb trail is content: read aloud, the breadcrumb is just "home slash ..." */
html.a11y-snapshot :is(.hp, .page-header__breadcrumb) { display: none; }

/* --- the panel itself --- */

.a11y {
    position: fixed;
    z-index: 950;
    inset-inline-start: clamp(16px, 2.5vw, 28px);   /* opposite corner from the contact FAB */
    bottom: clamp(16px, 2.5vw, 28px);
}

.a11y__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.34);   /* still visible against the dark sections */
    transition: background var(--t);
}
.a11y__toggle:hover,
.a11y__toggle[aria-expanded="true"] { background: var(--oak-deep); }

.a11y__panel {
    position: absolute;
    bottom: calc(100% + 10px);
    inset-inline-start: 0;
    width: min(20rem, calc(100vw - 32px));
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    padding: 18px 18px 16px;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--ink);
    font-size: .95rem;
    line-height: 1.4;
    word-spacing: normal;
}
.a11y__panel:focus { outline: none; }   /* focused programmatically on open, so a screen reader announces it */

.a11y__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.a11y__title { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.2; }
.a11y__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-inline-end: -8px;
}

.a11y__label { display: block; margin-bottom: 8px; font-size: .8rem; color: var(--ink-mute); }

.a11y__stepper {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
}
.a11y__stepper button { height: 46px; font-size: 1.05rem; font-weight: 500; }
.a11y__stepper button:hover { background: var(--paper); }
.a11y__stepper button[aria-disabled="true"] { color: var(--ink-mute); cursor: default; background: none; }
.a11y__value {
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline: 1px solid var(--line);
    font-family: var(--font-latin);
    direction: ltr;
}

.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.a11y__opt {
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: start;
    font-size: .88rem;
    line-height: 1.3;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.a11y__opt:hover { border-color: var(--ink); }
.a11y__opt[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.a11y__opt[aria-disabled="true"] { color: var(--ink-mute); cursor: default; }
.a11y__opt--wide { width: 100%; }

.a11y__hint { margin-top: 6px; font-size: .78rem; color: var(--ink-mute); }

.a11y__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: .85rem;
}
.a11y__reset, .a11y__link { text-decoration: underline; text-underline-offset: .22em; }

/* ============================================================
   REDUCED MOTION / PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal-slide, .u-rise { opacity: 1; transform: none; }
    .hero__slide.is-active img { animation: none; transform: scale(1.02); }
    .band-photo__img { transform: none !important; }
}

@media print {
    .nav, .m-nav, .fab, .a11y, .band, .cta-banner, .hero__media, .hero__dots { display: none !important; }
    body { background: #fff; color: #000; }
    .reveal, .reveal-slide, .u-rise { opacity: 1 !important; transform: none !important; }
}

/* Honeypot: visible to bots, never to people or screen readers. */
.hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.case__chain {
    margin-top: 18px;
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--line);
    font-size: .95rem;
    color: var(--ink-mute);
    max-width: 68ch;
}

.form-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}