/* ==========================================================================
   TISH | משרד עורך דין, גישור ובוררות
   Design tokens
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ariana (אריאנה) by Meir Sadan, oketz.com
   Single weight, Hebrew + digits + basic punctuation only (58 codepoints).
   Latin has no glyphs here and resolves to Frank Ruhl Libre below, which is
   the open digital cut of Frank-Ruhl that Ariana itself is derived from.
   Licence: Creative Commons BY-ND-NC 1.0. Attribution is required and
   commercial use needs the author's permission. See assets/fonts/ariana-readme.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Ariana";
  src: url("../fonts/ariana.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Only the ranges the font actually covers, so Latin never waits on it. */
  unicode-range: U+05D0-05EA, U+05F0-05F4, U+05BE, U+05C3, U+0030-0039,
                 U+0020-0022, U+0027-002A, U+002C-002E, U+003A-003B, U+003F,
                 U+2010;
}

/* --------------------------------------------------------------------------
   Attic by CAT-Fonts / Peter Wiegel (2014), digitised from a MacKellar,
   Smiths & Jordan Co. Philadelphia typeface. Carries all Latin text on the
   site: TISH, LAW OFFICE | MEDIATION | ARBITRATION, LL.B, the email address.
   Licence: SIL Open Font License 1.1 (also GPL). Commercial use permitted.
   See assets/fonts/attic-OFL.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Attic";
  src: url("../fonts/attic.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  /* Warm bone / light surfaces */
  --bone:        #F5F2ED;
  --bone-2:      #ECE7DF;
  --bone-3:      #E1DAD0;
  --white:       #FFFFFF;

  /* Deep warm ink / dark surfaces */
  --ink:         #131010;
  --ink-2:       #1B1616;
  --ink-3:       #241E1E;
  --ink-4:       #2E2626;

  /* Dark red brand, sampled from the TISH logo (#A10C0C) */
  --red:         #A10C0C;
  --red-bright:  #C41616;
  --red-soft:    #BE3A3A;
  --red-deep:    #660707;
  --red-wash:    #F4E3E1;

  /* Warm gold accent (from the original artwork) */
  --gold:        #D8AF64;
  --gold-2:      #EBD09A;

  /* Text */
  --tx-dark:     #171212;
  --tx-dark-mut: #6D6259;
  --tx-light:    #F2EDE7;
  --tx-light-mut:#A79C95;

  /* Type */
  /* Ariana is unicode-range limited to Hebrew, so Latin falls to Attic. */
  --f-display: "Ariana", "Attic", "Times New Roman", serif;
  --f-body:    "Ariana", "Attic", "Times New Roman", serif;
  /* For Latin-only strings. Ariana's range must include . , - for Hebrew
     prose, which otherwise leaves Ariana punctuation inside English words
     (its hyphen is ~2x Attic's width). Attic first fixes that; Ariana stays
     in the stack so any stray Hebrew still lands on the right face. */
  --f-latin:   "Attic", "Ariana", "Times New Roman", serif;

  /* Layout */
  --wrap:      1320px;
  --gutter:    clamp(1.125rem, 3.2vw, 3rem);
  --inset:     clamp(0.5rem, 1vw, 0.875rem);
  --r-xl:      clamp(1.25rem, 2.4vw, 2rem);
  --r-lg:      1.125rem;
  --r-md:      0.75rem;
  --r-pill:    999px;
  --header-h:  92px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The whole page is set in Ariana, whose letterforms sit small for their
     point size, so every size in the sheet read a step under what it measured.
     Rather than chase each label, the root carries it: one number here moves
     the entire scale and every relationship in it stays put. */
  font-size: 112.5%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--tx-dark);
  font-family: var(--f-body);
  /* Ariana and Attic are single-weight faces. Without this, browsers fake
     bold by smearing the outlines, which reads as mud on textured type. */
  font-synthesis-weight: none;
  -webkit-font-synthesis: none;
  font-size: clamp(1.0625rem, 0.35vw + 0.94rem, 1.125rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4,
strong, b, th, optgroup {
  font-weight: 400;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold);
}

::selection { background: var(--red); color: #fff; }

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  transform: translate(50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: var(--tx-light);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 400;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(50%, 0); }

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 7vw, 7rem); }

.panel {
  border-radius: var(--r-xl);
  overflow: hidden;
}

.panel--inset { margin-inline: var(--inset); }

.dark {
  background: var(--ink);
  color: var(--tx-light);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.dark .eyebrow { color: var(--gold); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head__title {
  font-size: clamp(1.9rem, 4.4vw, 3.25rem);
  max-width: 12.5em;
  margin-top: 0.875rem;
}

.section-head__lead {
  max-width: 46ch;
  color: var(--tx-dark-mut);
  margin-top: 0.875rem;
}
.dark .section-head__lead { color: var(--tx-light-mut); }

.rule {
  height: 1px;
  background: currentColor;
  opacity: 0.14;
  border: 0;
  margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--tx-light);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.055em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.28s var(--ease), background-color 0.28s var(--ease),
              color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--red   { --btn-bg: var(--red);  --btn-fg: #fff; }
.btn--red:hover { --btn-bg: var(--red-bright); box-shadow: 0 10px 26px -12px rgba(194,32,44,0.75); }

.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--bone-2); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border: 1px solid currentColor;
  box-shadow: inset 0 0 0 0 currentColor;
}
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover .btn__label { color: var(--bone); }
/* On hover a ghost button fills with its own text colour. On a dark surface
   that fill is light, so the label has to flip to the dark ink or it vanishes
   into the fill. .dark carries this for panels that opt into the class; the
   hero and the footer are dark grounds without it, and both had the bug. */
.dark .btn--ghost:hover .btn__label,
.hero .btn--ghost:hover .btn__label,
.site-footer .btn--ghost:hover .btn__label { color: var(--ink); }

.btn__label { transition: color 0.28s var(--ease); }

.btn--lg { padding: 0.95rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; justify-content: center; }

/* Circular arrow that pairs with a pill, like the reference */
.btn-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.arrow-circle {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--tx-light);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.arrow-circle svg { width: 0.95rem; height: 0.95rem; }
.btn-pair:hover .arrow-circle,
.arrow-circle:hover { transform: rotate(45deg); background: var(--red); }

.arrow-circle--light { background: var(--white); color: var(--ink); }
.btn-pair:hover .arrow-circle--light { background: var(--gold); color: var(--ink); }

.arrow-circle--outline {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}
.btn-pair:hover .arrow-circle--outline { background: var(--red); border-color: var(--red); color: #fff; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.text-link:hover { gap: 0.7rem; color: var(--red-bright); }
.dark .text-link { color: var(--gold); }
.dark .text-link:hover { color: var(--gold-2); }
.text-link svg { width: 0.7rem; height: 0.7rem; transform: scaleX(-1); }

/* ==========================================================================
   Brand mark
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.brand__logo {
  width: auto;
  height: 5.625rem;
  flex: none;
  transition: transform 0.4s var(--ease);
}
.brand:hover .brand__logo { transform: scale(1.05); }

.brand--on-dark .brand__logo {
  /* Was brightness(1.45) saturate(1.15), which pushed the mark off the red it
     is in the header. Same artwork, same colour, top and bottom. */
  filter: none;
}

/* The English line is the wider of the two, so it sets the block width and
   the Hebrew line is justified out to meet it. That keeps the lockup flush
   on both edges without hand-tuning sizes per font. */
.brand__text {
  display: grid;
  gap: 2px;
  line-height: 1.2;
  width: max-content;
}
.brand__he,
.brand__en {
  text-align: justify;
  text-align-last: justify;
  -moz-text-align-last: justify;
  font-weight: 400;
}
.brand__he {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.01em;
}
.brand__en {
  font-size: 0.8125rem;
  letter-spacing: 0.145em;
  color: var(--tx-dark-mut);
}
.brand--on-dark .brand__en { color: var(--tx-light-mut); }
.brand--lg .brand__logo { height: 4.75rem; }

@media (max-width: 60rem) {
  .brand__logo { height: 4.875rem; }
  .brand__he { font-size: 1rem; }
  .brand__en { font-size: 0.75rem; letter-spacing: 0.12em; }
}
@media (max-width: 30rem) {
  .brand { gap: 0.5rem; }
  .brand__logo { height: 2.9rem; }
  .brand__he { font-size: 0.875rem; }
  .brand__en { font-size: 0.625rem; letter-spacing: 0.09em; }
}
/* Below this the lockup and the burger would collide. */
@media (max-width: 19rem) {
  .brand__text { display: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.site-header.is-stuck {
  background: rgba(245, 242, 237, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(23, 18, 18, 0.09), 0 12px 32px -22px rgba(23, 18, 18, 0.5);
}

.nav { display: none; }

@media (min-width: 62rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.2vw, 2.25rem);
  }
}

.nav__link {
  position: relative;
  font-size: 1.0625rem;
  font-weight: 400;
  padding-block: 0.35rem;
  color: var(--tx-dark);
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover { color: var(--red); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--red); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.site-header__cta { display: none; }
@media (min-width: 48rem) { .site-header__cta { display: inline-flex; } }

/* Burger */
.burger {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  transition: background-color 0.3s var(--ease);
}
.burger:hover { background: var(--red); }
@media (min-width: 62rem) { .burger { display: none; } }

.burger__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
}
.burger__bars span {
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.burger__bars span:nth-child(3) { bottom: 0; }

.burger[aria-expanded="true"] .burger__bars span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--tx-light);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 62rem) { .drawer { display: none; } }

.drawer__nav { display: grid; gap: 0.25rem; }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid rgba(242, 237, 231, 0.12);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 6.5vw, 2.125rem);
  font-weight: 400;
  transition: color 0.25s var(--ease), padding-inline-start 0.3s var(--ease);
}
.drawer__link:hover, .drawer__link:focus-visible {
  color: var(--gold);
  padding-inline-start: 0.5rem;
}
.drawer__num {
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--red-soft);
  letter-spacing: 0.08em;
}

.drawer__foot { display: grid; gap: 1.25rem; }
.drawer__contact { display: grid; gap: 0.4rem; font-size: 1rem; color: var(--tx-light-mut); }
.drawer__contact a:hover { color: var(--gold); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: calc(var(--header-h) + var(--inset)) var(--inset) 0;
}

/* One panel, not two columns. The photograph is the hero's background and all
   of the copy sits under the headline on top of it, so the eye lands on the
   title and then reads straight down instead of crossing a seam into a second
   block of text beside it. */
.hero__card {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  /* see ::before below */
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(32rem, 96vw, 40rem);
  box-shadow: 0 40px 90px -60px rgba(23, 18, 18, 0.55);
}

@media (min-width: 62rem) {
  .hero__card { min-height: min(86vh, 720px); }
}

.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero-justice-lit.jpg") center 38% / cover no-repeat;
  /* Scaled past the edges so the blur has pixels to sample and does not
     vignette against the border. */
  transform: scale(1.12);
  filter: blur(22px) brightness(0.62) saturate(1.05);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.75rem, 3.4vw, 3.25rem);
  color: var(--tx-light);
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}
/* The words occupy the side of the frame the figure does not, so neither has
   to compete with the other. */
@media (min-width: 62rem) {
  /* start, not end: in a right-to-left document the logical start is the
     physical right, which is the side the figure leaves free. */
  .hero__content { justify-items: start; }
  .hero__content > * { max-width: 44rem; }
}

/* Gold on a dark ground, the same swap the rest of the page makes. */
.hero .eyebrow { color: var(--gold); }

.hero__lead {
  margin: 0;
  font-size: clamp(1rem, 0.4vw + 0.86rem, 1.125rem);
  line-height: 1.72;
  color: rgba(242, 237, 231, 0.84);
  max-width: 62ch;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.72);
  text-align: justify;
  text-justify: inter-word;
}
.hero__lead strong { font-weight: 400; color: var(--tx-light); }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: rgba(242, 237, 231, 0.12);
  border: 1px solid rgba(242, 237, 231, 0.22);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.075em;
  color: rgba(242, 237, 231, 0.92);
  white-space: nowrap;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              transform 0.28s var(--ease);
}
.chip:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
}
.chip--count {
  background: rgba(216, 175, 100, 0.16);
  border-color: rgba(216, 175, 100, 0.34);
  color: var(--gold-2);
  cursor: default;
}
.chip--count:hover {
  transform: none;
  background: rgba(216, 175, 100, 0.16);
  border-color: rgba(216, 175, 100, 0.34);
  color: var(--gold-2);
}

.hero__chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero__chips-group { display: grid; gap: 0.5rem; }

/* The photograph.
   Rebuilt from the original artwork rather than the derived asset, which had
   been exposed down until neither the figure nor the shelves behind her were
   left in the pixels.

   The element box is given the picture's own aspect ratio on purpose. With
   object-fit: contain the picture sat letterboxed inside a wider box, so the
   fade was still two thirds opaque at the point where the picture actually
   stopped and left a hard vertical line down the frame. Box and picture the
   same shape means the fade reaches nothing exactly where there is nothing
   left to fade, and the sharp figure dissolves into the blurred copy behind
   it. Every other edge sits on the card's own boundary, which is clipped. */
.hero__img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 940 / 892;
  object-fit: cover;
  object-position: center 34%;
  /* A touch more than the original print, so the spines behind her carry at
     screen brightness. Past this the source's grain starts to show. */
  filter: brightness(1.14) saturate(1.08);
  /* One column: she stands at the foot of the frame and fades upward. The
     source crop ends part-way down her dress, so the lower edge fades too
     rather than ending on a hard horizontal slice. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 82%, transparent 100%);
}
@media (min-width: 62rem) {
  .hero__img {
    top: 0;
    right: auto;
    height: 100%;
    width: auto;
    object-position: center;
    /* Two axes, intersected: out to the side where the copy is, and down at
       the foot, because the picture stops part-way down her dress and a hard
       edge there reads as a crop. */
    -webkit-mask-image:
      linear-gradient(to right, #000 0%, #000 38%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image:
      linear-gradient(to right, #000 0%, #000 38%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* Only as much darkness as the words need, and only where they are. The copy
   sits bottom-right in Hebrew, so the wash is heaviest there and clears away
   towards the shelves on the other side. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(19,16,16,0.44) 0%, rgba(19,16,16,0.18) 48%, rgba(19,16,16,0) 84%, rgba(19,16,16,0.16) 100%),
    linear-gradient(to left, rgba(19,16,16,0.40) 0%, rgba(19,16,16,0.08) 48%, rgba(19,16,16,0) 80%);
}

/* On one column the copy has nowhere to sit but over the middle of the
   photograph, where the lit chains are. A gentle side wash is not enough
   there, so the whole frame carries a heavier one and the picture reads as
   atmosphere behind the words rather than competing with them. */
@media (max-width: 61.99rem) {
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(19,16,16,0.92) 0%, rgba(19,16,16,0.78) 46%, rgba(19,16,16,0.58) 100%),
      linear-gradient(to left, rgba(19,16,16,0.55) 0%, rgba(19,16,16,0.20) 60%, rgba(19,16,16,0.10) 100%);
  }
}

.hero__title {
  font-size: clamp(2.05rem, 5.4vw, 4rem);
  max-width: 8.6em;
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.hero__title span {
  display: block;
  background: linear-gradient(100deg, var(--gold-2) 0%, var(--gold) 45%, #B9822F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Shares the measure and the rhythm of the paragraphs under it, so the three
   read as one block under the headline rather than three separate widths. */
.hero__sub {
  margin: 0;
  max-width: 46ch;
  color: rgba(242, 237, 231, 0.9);
  font-size: clamp(1rem, 0.4vw + 0.86rem, 1.125rem);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

.hero__scroll {
  position: absolute;
  inset-inline-end: clamp(1.5rem, 3.4vw, 3.25rem);
  top: clamp(1.5rem, 3.4vw, 3.25rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(242, 237, 231, 0.4);
  color: var(--tx-light);
  background: rgba(19, 16, 16, 0.35);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__scroll:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(4px);
}
.hero__scroll svg { width: 1rem; height: 1rem; animation: nudge 2.6s var(--ease) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(4px); }
  60%      { transform: translateY(0); }
}

/* ==========================================================================
   Mission: scroll-linked word reveal
   ========================================================================== */

.mission__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 62rem) {
  .mission__grid { grid-template-columns: 16rem 1fr; align-items: start; }
}

.mission__aside { display: grid; gap: 1.25rem; align-content: start; }

.mission__statement {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 3.1vw, 2.375rem);
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.mission__statement .w {
  color: rgba(23, 18, 18, 0.2);
  transition: color 0.45s var(--ease);
}
.mission__statement .w.is-lit { color: var(--tx-dark); }
.mission__statement .w.is-accent.is-lit { color: var(--red); }

.mission__meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.mission__meta-item {
  padding-top: 1.125rem;
  border-top: 1px solid rgba(23, 18, 18, 0.14);
}
.mission__meta-item dt {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}
.mission__meta-item dd {
  margin: 0;
  font-size: 1rem;
  color: var(--tx-dark-mut);
  line-height: 1.55;
}

/* ==========================================================================
   Practice areas: accordion
   ========================================================================== */

.practice { padding-block: clamp(2.75rem, 6vw, 5.5rem); }

.acc { border-top: 1px solid rgba(242, 237, 231, 0.14); }

.acc__item { border-bottom: 1px solid rgba(242, 237, 231, 0.14); }

.acc__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding-block: clamp(1.125rem, 2.2vw, 1.75rem);
  text-align: start;
  color: rgba(242, 237, 231, 0.62);
  transition: color 0.35s var(--ease);
}
.acc__trigger:hover { color: var(--tx-light); }
.acc__item.is-open .acc__trigger { color: var(--tx-light); }

.acc__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  color: var(--red-soft);
  transition: color 0.35s var(--ease), transform 0.45s var(--ease);
}
.acc__item.is-open .acc__icon { color: var(--gold); transform: scale(1.08); }

.acc__title {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2.75vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
}

.acc__num {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(242, 237, 231, 0.4);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.acc__item.is-open .acc__num { color: var(--gold); }

.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.5s var(--ease-out);
}
.acc__inner {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.acc__body {
  color: rgba(242, 237, 231, 0.72);
  font-size: clamp(1rem, 0.35vw + 0.88rem, 1.125rem);
  line-height: 1.72;
  max-width: 62ch;
}
.acc__actions { margin-top: 1.25rem; }

.acc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.acc__tag {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(242, 237, 231, 0.2);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(242, 237, 231, 0.66);
}

/* ==========================================================================
   Carousel (advantages + credentials)
   ========================================================================== */

.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
  cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.carousel__track.is-dragging * { pointer-events: none; }

.carousel__nav {
  display: flex;
  gap: 0.5rem;
}
.carousel__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(23, 18, 18, 0.2);
  color: var(--tx-dark);
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              opacity 0.28s var(--ease), border-color 0.28s var(--ease);
}
.carousel__btn svg { width: 0.9rem; height: 0.9rem; }
.carousel__btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.carousel__btn:disabled { opacity: 0.3; pointer-events: none; }

.carousel__hint {
  font-size: 0.8125rem;
  color: var(--tx-dark-mut);
  letter-spacing: 0.04em;
}

/* Advantage card */
.adv-card {
  position: relative;
  flex: 0 0 clamp(15rem, 74vw, 20rem);
  scroll-snap-align: start;
  min-height: clamp(17rem, 42vw, 24rem);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bone-2) 0%, #E6DFD5 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.625rem;
  overflow: hidden;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              transform 0.45s var(--ease);
}
.adv-card:hover {
  background: linear-gradient(170deg, var(--red) 0%, var(--red-deep) 100%);
  color: var(--tx-light);
  transform: translateY(-4px);
}

.adv-card__badge {
  position: absolute;
  top: clamp(1.25rem, 2.2vw, 1.75rem);
  inset-inline-end: clamp(1.25rem, 2.2vw, 1.75rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--red);
  color: #fff;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}
.adv-card__badge svg { width: 1.25rem; height: 1.25rem; }
.adv-card:hover .adv-card__badge { background: var(--white); color: var(--red); }

.adv-card__num {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--red);
  transition: color 0.45s var(--ease);
}
.adv-card:hover .adv-card__num { color: var(--gold-2); }

.adv-card__title {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 400;
  line-height: 1.14;
}
.adv-card__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tx-dark-mut);
  transition: color 0.45s var(--ease);
}
.adv-card:hover .adv-card__body { color: rgba(242, 237, 231, 0.85); }

/* Credential card */
.cred-card {
  flex: 0 0 clamp(15rem, 78vw, 19.5rem);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid rgba(23, 18, 18, 0.08);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2vw, 1.625rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.cred-card:hover {
  transform: translateY(-4px);
  border-color: rgba(158, 20, 32, 0.28);
  box-shadow: 0 22px 48px -30px rgba(23, 18, 18, 0.5);
}

.cred-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cred-card__logo {
  width: auto;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 4px;
}
.cred-card__kind {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  padding: 0.3rem 0.6rem;
  background: var(--red-wash);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.cred-card__title {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin-top: auto;
}
.cred-card__org {
  font-size: 0.9375rem;
  color: var(--tx-dark-mut);
  line-height: 1.5;
}
.cred-card__deg {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--tx-dark-mut);
  direction: ltr;
  text-align: start;
}

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

.band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(17rem, 34vw, 22rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--ink);
  isolation: isolate;
}
.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.9;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(106,13,20,0.42) 0%, rgba(19,16,16,0.82) 68%, rgba(19,16,16,0.95) 100%);
}
.band__inner { display: grid; gap: 1.25rem; justify-items: center; max-width: 44rem; }
.band__title {
  color: var(--tx-light);
  font-size: clamp(1.75rem, 4.6vw, 3.125rem);
  line-height: 1.1;
}
.band__sub {
  color: rgba(242, 237, 231, 0.78);
  max-width: 40ch;
}

/* ==========================================================================
   About
   ========================================================================== */

.about__grid {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.about__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-3);
  max-width: 26rem;
}
.about__figure img { width: 100%; }
.about__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(242, 237, 231, 0.12);
  border-radius: inherit;
  pointer-events: none;
}

.about__name {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: 0.75rem;
}
.about__role {
  color: var(--gold);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.about__body {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  color: rgba(242, 237, 231, 0.76);
  max-width: 58ch;
  line-height: 1.75;
}
.about__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.about__marks {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242, 237, 231, 0.14);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.about__marks img {
  height: 2.75rem;
  width: auto;
  background: var(--white);
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.8);
}
.about__marks-label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-light-mut);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 62rem) {
  .faq__grid { grid-template-columns: 18rem 1fr; align-items: start; }
}

.faq__list { display: grid; gap: 0.5rem; }

.faq__item {
  background: var(--bone-2);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.faq__item.is-open {
  background: var(--ink);
  color: var(--tx-light);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.875rem, 1.6vw, 1.125rem) clamp(1rem, 2vw, 1.5rem);
  text-align: start;
  font-size: clamp(1rem, 0.5vw + 0.86rem, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
}

.faq__sign {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s linear;
}
.faq__sign::before { inset-inline: 0; top: 50%; height: 1.5px; margin-top: -0.75px; }
.faq__sign::after  { inset-block: 0; inset-inline-start: 50%; width: 1.5px; margin-inline-start: -0.75px; }
.faq__item.is-open .faq__sign::after { transform: scaleY(0); opacity: 0; }

.faq__panel { overflow: hidden; height: 0; transition: height 0.45s var(--ease-out); }
.faq__answer {
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.375rem);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(242, 237, 231, 0.76);
  max-width: 68ch;
}

/* ==========================================================================
   Contact + footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--tx-light);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-inline: var(--inset);
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

.footer__headline {
  font-size: clamp(1.6rem, 4.4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: none;
  text-wrap: balance;
}

.contact__grid {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 56rem) {
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.contact__details { display: grid; gap: 1.75rem; align-content: start; }

.contact__quick { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.dl { display: grid; gap: 0.875rem; }
.dl__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(242, 237, 231, 0.1);
  align-items: baseline;
}
.dl__row dt {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-light-mut);
}
.dl__row dd {
  margin: 0;
  font-size: 1rem;
  display: grid;
  gap: 0.25rem;
  /* Every other value in this list is a Latin run set left-to-right, which
     lands it against the far edge of the column. The postal address is Hebrew
     and cannot be flipped, so it is aligned to that same edge instead. */
  text-align: end;
  justify-items: end;
  /* Every value in this list is pure white. The labels stay muted, so the
     hierarchy is label against value rather than one value against another.
     Attic still lays down less ink than the Hebrew face at the same size, but
     that is the face, not the colour, and the colour is now identical. */
  color: #fff;
}
.dl__row dd a { transition: color 0.25s var(--ease); }
.dl__row dd a:hover { color: var(--gold); }
.dl__val-ltr {
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

/* A section heading that speaks at the same volume as the hero, in the same
   gold, because it names the thing the whole page is about. */
.section-head__title--display {
  font-size: clamp(2.05rem, 5.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--gold-2) 0%, var(--gold) 45%, #B9822F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Header contact
   The two lines and the address, in place of the appointment button. */
.site-header__contact {
  display: flex;
  align-items: center;
  gap: 0.35rem 1.15rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-header__tel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.site-header__tel:hover,
.site-header__mail:hover { color: var(--red); }
.site-header__num {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--f-latin);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}
.site-header__where {
  font-size: 0.875rem;
  color: var(--ink-3, #9a8f89);
}
.site-header__mail {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--f-latin);
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Below the desktop layout the burger carries navigation and the drawer
   already lists these, so the header keeps only the mark and the burger. */
@media (max-width: 68rem) {
  .site-header__contact { display: none; }
}

/* Credentials
   Grouped by the body that issued them, the way the original artwork sets it
   out: one seal, then every credential from that institution beside it. The
   carousel it replaces paged six cards past you one at a time and never
   showed that there are only two institutions behind them. */
.creds {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.creds__group {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--hairline, rgba(23,18,18,0.12));
}
.creds__group:last-child { border-bottom: 0; padding-bottom: 0; }

.creds__logo {
  width: auto;
  height: clamp(4.5rem, 8vw, 6.5rem);
  flex: none;
}

.creds__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.creds__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.creds__org { color: var(--tx-dark); }
.creds__dash { color: var(--ink-3, #9a8f89); }
.creds__what { color: var(--red); }

/* The degree code is Latin, so it is set left-to-right and kept out of the
   Hebrew run's bidi ordering. */
.creds__abbr {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--f-latin);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--ink-3, #9a8f89);
  margin-inline-start: 0.35rem;
}

@media (max-width: 40rem) {
  .creds__group { grid-template-columns: 1fr; justify-items: start; }
  .creds__item { font-size: 1rem; }
}

/* Practice fields
   Two columns, the right one first, in the order the original artwork sets
   them out. Every field is open: the accordion hid seven of eight behind a
   click, and this section is the answer to "what does this office do". */
.fields {
  display: grid;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
/* One grid, not two stacks. Four equal rows with the flow running down each
   column in turn gives every card the same height while keeping the order the
   original artwork sets out: the right column top to bottom, then the left. */
@media (min-width: 56rem) {
  .fields {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
  }
}

.field {
  background: rgba(242, 237, 231, 0.045);
  border: 1px solid rgba(242, 237, 231, 0.09);
  border-radius: var(--r-lg);
  padding: clamp(1.125rem, 2vw, 1.6rem);
  display: grid;
  gap: 0.6rem;
  /* The icon sits level with the title on its outer edge. */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "body body"
    "tags tags";
  grid-template-rows: auto auto 1fr;
  align-items: center;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.field:hover {
  border-color: rgba(242, 237, 231, 0.2);
  background: rgba(242, 237, 231, 0.07);
}

.field__icon {
  grid-area: icon;
  color: var(--red-bright, #C2202C);
  display: grid;
  place-items: center;
}
.field__icon svg { width: 1.6rem; height: 1.6rem; }

.field__title {
  grid-area: title;
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--red-bright, #C2202C);
}

.field__body {
  grid-area: body;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(242, 237, 231, 0.86);
  text-align: justify;
  text-justify: inter-word;
}

.field__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  align-content: end;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.field__tag {
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(242, 237, 231, 0.07);
  color: rgba(242, 237, 231, 0.72);
  white-space: nowrap;
}

/* Form */
.form {
  background: var(--ink-2);
  border: 1px solid rgba(242, 237, 231, 0.1);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.form__title { font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.form__note {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--tx-light-mut);
  /* Full width of the form, so it sets in two lines rather than three. */
  max-width: none;
}

.form__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 34rem) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
}

.form__field { display: grid; gap: 0.4rem; }
.form__label {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-light-mut);
}
.form__label .req { color: var(--red-soft); }

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(242, 237, 231, 0.05);
  border: 1px solid rgba(242, 237, 231, 0.16);
  border-radius: var(--r-md);
  color: var(--tx-light);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.form__input::placeholder, .form__textarea::placeholder { color: rgba(167, 156, 149, 0.7); }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(242, 237, 231, 0.09);
}
.form__textarea { resize: vertical; min-height: 6.5rem; }

.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A79C95' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.9rem center;
  background-size: 0.75rem;
  padding-inline-start: 0.9rem;
  padding-inline-end: 2.25rem;
}
.form__select option { background: var(--ink-2); color: var(--tx-light); }

.form__field.has-error .form__input,
.form__field.has-error .form__select,
.form__field.has-error .form__textarea { border-color: var(--red-bright); }

.form__error {
  font-size: 0.875rem;
  color: #F0A0A6;
  min-height: 0;
}
.form__field.has-error .form__error { min-height: 1.2em; }

.form__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.form__status {
  margin-top: 1rem;
  font-size: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-md);
  background: rgba(216, 175, 100, 0.12);
  border: 1px solid rgba(216, 175, 100, 0.4);
  color: var(--gold-2);
  display: none;
}
.form__status.is-visible { display: block; }

.form__privacy { margin-top: 1rem; font-size: 0.8125rem; color: var(--tx-light-mut); line-height: 1.6; }

/* Footer bottom */
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(242, 237, 231, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.9375rem;
}
.footer__nav a { color: var(--tx-light-mut); transition: color 0.25s var(--ease); }
.footer__nav a:hover { color: var(--tx-light); }
.footer__legal { font-size: 0.875rem; color: var(--tx-light-mut); }

.footer__disclaimer {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(167, 156, 149, 0.75);
  max-width: 90ch;
}

/* ==========================================================================
   Floating actions
   ========================================================================== */

.fab-stack {
  position: fixed;
  inset-inline-end: clamp(0.875rem, 2vw, 1.5rem);
  bottom: clamp(0.875rem, 2vw, 1.5rem);
  z-index: 90;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.fab {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease),
              visibility 0.3s, background-color 0.3s var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 1.5rem; height: 1.5rem; }

.fab--wa { background: #25D366; color: #fff; }
.fab--wa:hover { background: #1EBE5A; }

.fab--top {
  background: var(--ink);
  color: var(--bone);
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.fab--top svg { width: 1.05rem; height: 1.05rem; }
.fab--top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.fab--top:hover { background: var(--red); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .mission__statement .w { color: var(--tx-dark); }
  .mission__statement .w.is-accent { color: var(--red); }
}

/* ==========================================================================
   Latin runs
   ========================================================================== */

/* English wordmarks, degree abbreviations, and the LTR contact block, so
   their punctuation comes from Attic rather than Ariana. */
.brand__en,
.cred-card__deg,
.dl__val-ltr,
.drawer__contact a,
.footer__legal,
[dir="ltr"] {
  font-family: var(--f-latin);
}

/* ==========================================================================
   Touch targets
   ========================================================================== */

@media (max-width: 47.99rem) {
  .chip { padding-block: 0.75rem; }
  .text-link { padding-block: 0.6rem; }
  .dl__row dd a,
  .dl__row dd .dl__val-ltr,
  .drawer__contact a,
  .footer__nav a { padding-block: 0.6rem; }
  .dl__row { grid-template-columns: 7rem 1fr; }
}

@media (hover: none) {
  /* Hover-only card inversions never trigger on touch, so show them on tap. */
  .adv-card:active {
    background: linear-gradient(170deg, var(--red) 0%, var(--red-deep) 100%);
    color: var(--tx-light);
  }
  .adv-card:active .adv-card__badge { background: var(--white); color: var(--red); }
  .adv-card:active .adv-card__num { color: var(--gold-2); }
  .adv-card:active .adv-card__body { color: rgba(242, 237, 231, 0.85); }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .drawer, .fab-stack, .hero__scroll, .carousel__nav { display: none !important; }
  body { background: #fff; color: #000; }
  .dark, .site-footer { background: #fff !important; color: #000 !important; }
  .acc__panel, .faq__panel { height: auto !important; }
}