/* =========================================================
   Fortis Legal — components.css
   Brand, buttons, engravings, practice rows, attorneys, cases, voices, form
   ========================================================= */

/* ===================== ENGRAVING BASE =====================
   Every engraved SVG inherits these properties so they feel
   like plate-engraved ink — thin, warm, slightly glowing.
   ========================================================= */
.engrave,
.hero__watermark,
.philosophy__engraving svg,
.jurisdictions__compass svg,
.awards__laurel svg,
.ornament svg {
  color: var(--accent);
  opacity: 0.88;
  filter: drop-shadow(0 0 18px var(--accent-glow));
}
.hero__watermark { opacity: 0.22; }

/* ===================== ORNAMENT DIVIDER ===================== */
.ornament {
  display: flex;
  justify-content: center;
  padding-block: 40px;
  background: var(--ink);
}
.ornament svg {
  width: 260px;
  height: auto;
  opacity: 0.55;
}

/* ===================== HERO WATERMARK ===================== */
.hero__watermark {
  position: absolute;
  top: 140px;
  right: -40px;
  width: clamp(280px, 28vw, 460px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.hero__grid > * { position: relative; z-index: 1; }



/* ===================== THEME TOGGLE ===================== */
.theme-toggle {
  --tt-w: 58px;
  --tt-h: 28px;
  --tt-pad: 3px;
  width: var(--tt-w);
  height: var(--tt-h);
  padding: 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.theme-toggle__track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-md);
  border: 1px solid var(--nav-border);
  color: var(--bone-dim);
  transition:
    background-color .4s var(--ease),
    border-color .4s var(--ease);
}
.theme-toggle:hover .theme-toggle__track { border-color: var(--accent); }

.theme-toggle__sun,
.theme-toggle__moon {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: opacity .4s var(--ease), color .4s var(--ease);
}
.theme-toggle__thumb {
  position: absolute;
  top: 50%;
  left: var(--tt-pad);
  width: calc(var(--tt-h) - var(--tt-pad) * 2 - 2px);
  height: calc(var(--tt-h) - var(--tt-pad) * 2 - 2px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--accent);
  z-index: 1;
  transition: transform .45s var(--ease-2), background-color .4s var(--ease);
  will-change: transform;
}

/* Dark (default) — thumb on the right covering the moon, moon gets ink color */
:root:not([data-theme="light"]) .theme-toggle__thumb {
  transform: translate(calc(var(--tt-w) - var(--tt-h) - 2px), -50%);
}
:root:not([data-theme="light"]) .theme-toggle__sun  { opacity: 0.4; color: var(--bone-dim); }
:root:not([data-theme="light"]) .theme-toggle__moon { opacity: 1; color: #0a0a0a; }

/* Light — thumb on the left covering the sun, sun gets ivory color */
:root[data-theme="light"] .theme-toggle__sun  { opacity: 1; color: #f4efe2; }
:root[data-theme="light"] .theme-toggle__moon { opacity: 0.4; color: var(--bone-dim); }

/* ===================== BRAND ===================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  color: var(--bone);
  line-height: 1;
}
.brand__mark {
  width: 38px;
  height: 44px;
  flex: 0 0 auto;
}
.brand__word {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.brand__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--bone);
  line-height: 1;
}
.brand__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.brand__motto {
  display: none;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  line-height: 1;
  margin-top: 6px;
}

/* Footer variant gets slightly larger scale + visible motto */
.brand--footer { gap: 18px; }
.brand--footer .brand__name { font-size: 30px; }
.brand--footer .brand__sub  { font-size: 10px; }
.brand--footer .brand__mark { width: 52px; height: 60px; }
.brand--footer .brand__motto { display: block; }

/* ===================== BUTTONS ===================== */
.btn {
  --btn-pad-y: 14px;
  --btn-pad-x: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background-color .4s var(--ease),
    color .4s var(--ease),
    transform .4s var(--ease);
  will-change: transform;
}
.btn svg {
  width: 14px; height: 14px;
  transition: transform .45s var(--ease);
}
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--nav-border);
}
.btn--ghost:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn--solid {
  background: var(--accent);
  color: var(--ink);
}
.btn--solid:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
}
.btn--lg {
  --btn-pad-y: 18px;
  --btn-pad-x: 32px;
}

/* ===================== PRACTICE LIST ===================== */
.practice-list { display: flex; flex-direction: column; }
.practice-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 1.8fr) 60px;
  align-items: baseline;
  gap: 48px;
  padding-block: 44px;
  border-top: 1px solid var(--line);
  transition: padding-left .5s var(--ease), background-color .5s var(--ease);
  position: relative;
}
.practice-row:last-child { border-bottom: 1px solid var(--line); }
.practice-row:hover { padding-left: 20px; }
.practice-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width .5s var(--ease);
}
.practice-row:hover::before { width: 4px; }

.practice-row__num {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--muted);
}
.practice-row__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.practice-row__title h3 {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 400;
  color: var(--bone);
  transition: color .4s var(--ease);
}
.practice-row:hover .practice-row__title h3 { color: var(--accent); }
.practice-row__tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 99px;
}
.practice-row__body {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--bone-dim);
  max-width: 48ch;
}
.practice-row__arrow {
  justify-self: end;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-dim);
  transition:
    background-color .4s var(--ease),
    color .4s var(--ease),
    border-color .4s var(--ease),
    transform .4s var(--ease);
}
.practice-row__arrow svg { width: 16px; height: 16px; }
.practice-row:hover .practice-row__arrow {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  transform: rotate(-45deg);
}

/* ===================== ATTORNEYS ===================== */
.attorney-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.attorney {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.attorney__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-3);
  position: relative;
}
.attorney__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--photo-scrim));
  pointer-events: none;
}
.attorney__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(calc(var(--photo-grayscale) + 0.2)) contrast(var(--photo-contrast));
  transition:
    filter .8s var(--ease),
    transform 1.5s var(--ease);
}
.attorney:hover .attorney__photo img {
  filter: grayscale(0) contrast(var(--photo-contrast));
  transform: scale(1.05);
}
.attorney__body { display: flex; flex-direction: column; gap: 6px; }
.attorney__body h3 {
  font-size: var(--fs-xl);
  color: var(--bone);
}
.attorney__role {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.attorney__practice {
  font-size: var(--fs-sm);
  color: var(--bone-dim);
}
.attorney__meta {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.attorney__meta li {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ===================== RESULTS / CASE EXPERIENCE ===================== */
.results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.case {
  padding: 56px 40px 56px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.case:last-child { border-right: 0; padding-right: 0; }
.case + .case { padding-left: 40px; }
.case__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.case__kind {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.case__year {
  font-family: var(--serif);
  font-size: var(--fs-md);
  color: var(--muted);
}
.case h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bone);
  max-width: 22ch;
}
.case p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--bone-dim);
  max-width: 42ch;
}
.case__meta {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.case__meta dt {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.case__meta dd {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  color: var(--bone);
}

/* ===================== VOICES / TESTIMONIALS ===================== */
.voices__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
}
.voices__head .section-num {
  display: block;
  margin-bottom: 24px;
}
.voices__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bone);
  margin-bottom: 20px;
}
.voices__lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto;
}

.voices__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  max-width: 920px;
  margin: 0 auto;
}

.voices__track {
  position: relative;
  min-height: 360px;
}
.voice-card {
  margin: 0;
  padding: 48px 56px 52px;
  background: var(--surface-md);
  border-radius: 4px;
  position: relative;
  isolation: isolate;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.voice-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-sheen) 50%,
    transparent 100%
  );
}
.voice-card[hidden] { display: none; }
.voice-card.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}
.voice-card.is-entering {
  opacity: 0;
  transform: translateY(-8px);
}

.voice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.voice-card__who {
  display: flex;
  align-items: center;
  gap: 18px;
}
.voice-card__who img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(var(--photo-grayscale));
}
.voice-card__who strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--bone);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.voice-card__who span {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 6px;
}

.voice-card__rating {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.voice-card__rating svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}

.voice-card blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.65;
  color: var(--bone-dim);
  letter-spacing: -0.003em;
  margin: 0;
}

.voices__nav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--nav-ring);
  color: var(--bone-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color .4s var(--ease),
    color .4s var(--ease),
    border-color .4s var(--ease),
    transform .4s var(--ease);
  flex: 0 0 auto;
}
.voices__nav svg {
  width: 18px;
  height: 18px;
}
.voices__nav:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  transform: scale(1.05);
}

.voices__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
}
.voices__dots button {
  width: 28px;
  height: 2px;
  background: var(--dot-track);
  border-radius: 0;
  transition: background-color .4s var(--ease), width .4s var(--ease);
}
.voices__dots button.is-active {
  background: var(--accent);
  width: 48px;
}

/* ===================== CONTACT FORM ===================== */
.contact-form {
  display: grid;
  gap: 28px;
  padding: 48px;
  background: var(--ink-2);
  border-radius: 2px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.field { display: flex; flex-direction: column; gap: 10px; }
.field__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0 14px;
  color: var(--bone);
  font-size: var(--fs-md);
  font-family: var(--sans);
  transition: border-color .4s var(--ease);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted-dim);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-md);
}
.field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}
.field select {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
    linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field select option {
  background: var(--ink-2);
  color: var(--bone);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.field--check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: 0 0 auto;
  margin-top: 3px;
  border: 0;
  padding: 0;
}
.field--check span {
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  line-height: 1.5;
}

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.contact-form__note {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  max-width: 26ch;
  margin: 0;
}

/* ===================== PHILOSOPHY ===================== */
.philosophy {
  padding-block: var(--section-y);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.philosophy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head  engraving"
    "creed engraving";
  column-gap: 80px;
  row-gap: 60px;
  align-items: start;
}
.philosophy__grid .section-head {
  grid-area: head;
  margin-bottom: 0;
}
.philosophy__engraving {
  grid-area: engraving;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  margin: 0;
}
.philosophy__engraving svg {
  width: 100%;
  height: auto;
}
.philosophy__creed {
  grid-area: creed;
  display: grid;
  gap: 0;
  counter-reset: creed;
}
.philosophy__creed li {
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.philosophy__creed li:last-child { border-bottom: 1px solid var(--line); }
.creed__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--accent);
  grid-row: span 2;
  align-self: start;
  padding-top: 6px;
}
.philosophy__creed h3 {
  font-size: var(--fs-xl);
  color: var(--bone);
  margin-bottom: 10px;
}
.philosophy__creed p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 48ch;
  margin: 0;
}

/* ===================== JURISDICTIONS ===================== */
.jurisdictions {
  padding-block: var(--section-y);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.jurisdictions__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: center;
}
.jurisdictions__compass {
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  animation: drift-rotate 40s linear infinite;
}
.jurisdictions__compass svg {
  width: 100%;
  height: auto;
}
@keyframes drift-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.jurisdictions__body .display { margin-top: 10px; margin-bottom: 28px; }
.jurisdictions__list {
  margin-top: 48px;
  display: grid;
  gap: 0;
}
.jurisdictions__list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  line-height: 1.55;
}
.jurisdictions__list li:last-child { border-bottom: 1px solid var(--line); }
.jurisdictions__list span {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ===================== AWARDS ===================== */
.awards {
  padding-block: var(--section-y);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.awards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "laurel head"
    "laurel list";
  column-gap: 80px;
  row-gap: 48px;
  align-items: center;
}
.awards__grid .section-head {
  grid-area: head;
  margin-bottom: 0;
  align-self: end;
}
.awards__laurel {
  grid-area: laurel;
  grid-row: span 2;
  justify-self: center;
  margin: 0;
  width: 100%;
  max-width: 520px;
}
.awards__laurel svg {
  width: 100%;
  height: auto;
}
.awards__list {
  grid-area: list;
  display: grid;
  gap: 0;
}
.awards__list li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  column-gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  transition: padding-left .5s var(--ease);
}
.awards__list li:hover { padding-left: 12px; }
.awards__list li:last-child { border-bottom: 1px solid var(--line); }
.awards__rank {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--accent);
}
.awards__list strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--bone);
}
.awards__year {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}