/* The legal family: /privacy-policy, /faqs, /404. Three layouts: desktop at 1200 and up, tablet from 810 to 1199,
   phone at 809 and below. Colors are the shared tokens (shared/base.css). */

/* Per-language typography (Farsi fonts and leading, Hindi, Punjabi and Chinese line boxes) lives in families/_chrome/style.css, shipped on every page. */

/* The three-stroke arrow lives once, in an inline sprite; it takes no room. */
.lg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- shared pieces ---------- */
.lg-h1 { margin: 0; font-family: var(--serif); font-size: 64px; line-height: 64px; font-weight: 400; letter-spacing: -2.56px; text-align: start; color: var(--ink); }
.lg-kicker, .pp__eff, .faq__kicker { font-family: var(--sans); font-size: 14px; line-height: 16.8px; letter-spacing: 0.42px; text-transform: uppercase; color: var(--ink); }

/* The photograph hero (/faqs and /404): photo, a darkening gradient, a masked blur, the headline on top. */
.lg-hero { position: relative; display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; height: 500px; background: var(--sand); }
/* The photograph starts 5 percent larger and settles (the chrome's hero-zoom reveal): without a clip the page pans
   sideways for about 1.6 s. The clip sits on <main> rather than on the hero so the hero's own text is never a
   clipped box when the parallax moves it past the hero's edge. Vertical overflow stays visible. */
.page--legal main { overflow-x: clip; }
.lg-hero__bg { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1 0 0; max-width: 100%; height: 100%; padding: 160px 48px 64px; }
.lg-hero__photo { position: absolute; inset: 0; }
.lg-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.lg-hero__content { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 64px; width: 100%; max-width: 1000px; }
.lg-hero__title { display: flex; flex-direction: column; justify-content: flex-start; flex: 2 0 0; white-space: pre-wrap; word-break: break-word; }
.lg-w { display: inline-block; animation: lg-word 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.17s + var(--i, 0) * 45ms) backwards; }
@keyframes lg-word { from { opacity: 0; transform: translateY(10px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lg-word-still { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lg-w { animation-name: lg-word-still; } }
.lg-hero .lg-h1 { color: var(--white); }
.lg-hero__darken { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); overflow: clip; }
.lg-hero__blur { position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); overflow: clip;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(0, 0, 0) 90%); mask-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(0, 0, 0) 90%); }

/* The 404 button: white, square-ish, the arrow waits just outside the right edge and slides in on hover. */
.lg-hero__btn { flex: 0 0 auto; }
.lg-btn { display: flex; justify-content: center; align-items: center; position: relative; background: var(--white); border-radius: 2px; overflow: hidden; cursor: pointer; color: var(--ink); }
.lg-btn__content { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 16px 32px; }
.lg-btn__text { display: flex; justify-content: center; align-items: center; height: 20px; white-space: pre; text-wrap: nowrap; transition: transform 0.12s ease-out; }
.lg-btn__label { display: block; font-family: var(--sans); font-size: 16px; line-height: 19.2px; letter-spacing: 0.64px; text-transform: uppercase; color: var(--ink); }
.lg-btn__arrow { position: absolute; left: 100%; top: 50%; z-index: 1; width: 19px; height: 19px; flex: 0 0 auto; overflow: hidden; transform: translateY(-50%); transition: transform 0.12s ease-out; }
/* Present only while the pointer is on the button (script.js): invisible, never takes room. */
.lg-btn__helper { position: absolute; left: 32px; top: 16px; display: flex; justify-content: center; align-items: center; height: 20px; opacity: 0; pointer-events: none; white-space: pre; text-wrap: nowrap; }
@media (hover: hover) {
  .lg-btn:hover .lg-btn__text { transform: translateX(-16px); }
  .lg-btn:hover .lg-btn__arrow { transform: translate(-35px, -50%); }
}

/* ---------- /privacy-policy ---------- */
.pp { position: relative; display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; background: var(--sand); }
.pp__bg { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1 0 0; max-width: 100%; padding: 180px 48px; background: var(--sand); }
.pp__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 64px; width: 100%; max-width: 1000px; }
.pp__cols { display: flex; justify-content: flex-start; align-items: flex-start; gap: 128px; width: 100%; }
.pp__side { position: sticky; top: 140px; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; flex: 1 0 0; width: 100%; padding: 4px 0 0; }
.pp__eff-wrap, .pp__title-wrap { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; white-space: pre-wrap; word-break: break-word; }
.pp__main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 48px; flex: 4 0 0; width: 100%; overflow: clip; }
/* The firm's privacy article: self-contained typography rules scoped to #nlf-privacy. Its position and width come from the column it sits in. */
#nlf-privacy { width: 100%; font-family: NLF Sans, ui-sans-serif, system-ui, sans-serif; color: #0d1626; }
#nlf-privacy .pp-lead { font-size: 17px; line-height: 29px; color: #0d1626; margin: 0 0 20px; }
#nlf-privacy h2 { font-family: "NLF Serif", Georgia, serif; font-weight: 400; font-size: 26px; line-height: 32px; letter-spacing: -0.5px; color: #0d1626; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid #0d16261a; }
#nlf-privacy p { font-size: 16px; line-height: 27px; color: #0d1626c7; margin: 16px 0 0; }
#nlf-privacy p strong { font-weight: 600; color: #0d1626; }
#nlf-privacy address { font-style: normal; font-size: 16px; line-height: 29px; color: #0d1626c7; margin: 18px 0 0; }
#nlf-privacy address strong { font-weight: 600; color: #0d1626; }
/* A telephone number and an email address are Latin runs; isolate them so a right-to-left page cannot reorder the digits. */
#nlf-privacy address .pp-ltr { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 810px) {
  #nlf-privacy h2 { font-size: 23px; line-height: 29px; margin-top: 34px; padding-top: 22px; }
  #nlf-privacy .pp-lead { font-size: 16px; line-height: 27px; }
}

/* ---------- /faqs ---------- */
.faq { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 180px 48px; background: var(--sand); overflow: clip; scroll-margin-top: 100px; }
.faq__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 48px; width: 100%; max-width: 1000px; }
.faq__upper { display: flex; justify-content: flex-start; align-items: flex-start; gap: 128px; width: 100%; }
.faq__kicker-wrap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; flex: 1 0 0; padding: 4px 0 0; }
.faq__kicker-box, .faq__title-box { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; white-space: pre-wrap; word-break: break-word; }
.faq__title-wrap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; flex: 4 0 0; }
.faq__h2 { margin: 0; font-family: var(--serif); font-size: 48px; line-height: 52.8px; font-weight: 400; letter-spacing: -1.92px; text-align: start; color: var(--ink); }
.faq__list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; width: 100%; }
.faq__item { display: block; width: 100%; padding: 24px; background: var(--cream); cursor: pointer; transition: background-color 0.2s ease; }
@media (hover: hover) { .faq__item:hover { background: var(--white); } }
/* the chrome's reveal transition would replace the card's background transition, so the two are written together */
html.js .faq__item[data-reveal="fade"].is-in { transition: opacity .35s var(--reveal-ease) var(--reveal-delay, 0s), background-color 0.2s ease; }
.faq__q { display: flex; justify-content: center; align-items: center; gap: 48px; list-style: none; cursor: pointer; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__h3 { flex: 1 0 0; position: relative; z-index: 1; margin: 0; font-family: var(--serif); font-size: 27.2px; line-height: 32.64px; font-weight: 400; letter-spacing: -1.088px; text-align: start; color: var(--ink); text-wrap: balance; }
.faq__chev { display: block; flex: 0 0 auto; width: 19px; height: 19px; aspect-ratio: 1 / 1; overflow: hidden; transform: rotate(90deg); }
.faq__item[open] .faq__chev { transform: rotate(-90deg); }
.faq__a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 10px; padding: 0 16px 0 0; }
.faq__a-inner { display: flex; flex-direction: column; justify-content: flex-start; max-width: 600px; white-space: pre-wrap; word-break: break-word; }
.faq__p { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 22.4px; text-align: start; color: var(--ink); }

/* ---------- tablet: 810 to 1199 ---------- */
@media (max-width: 1199px) {
  .lg-h1 { font-size: 52px; line-height: 52px; letter-spacing: -2.08px; }
  .lg-hero__bg { padding-bottom: 48px; }
  .lg-hero__content { gap: 48px; }
  .pp__bg { padding: 160px 48px 120px; }
  .pp__content { gap: 48px; }
  .pp__cols { gap: 54px; }
  .faq { padding: 120px 48px; }
  .faq__upper { gap: 64px; }
  .faq__h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
  .faq__h3 { font-size: 24.8px; line-height: 29.76px; letter-spacing: -0.992px; }
}

/* ---------- phone: 809 and below ---------- */
@media (max-width: 809px) {
  .lg-h1 { font-size: 40px; line-height: 40px; letter-spacing: -1.6px; }
  .lg-hero--faqs { height: 300px; }
  .lg-hero__bg { padding: 160px 24px 32px; }
  .lg-hero__img { object-position: 50% 100%; }
  .lg-hero__darken { background-image: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%); }
  .lg-hero--faqs .lg-hero__blur { -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 80%); mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 80%); }
  .lg-hero__content { flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
  .lg-hero--404 .lg-hero__content { gap: 24px; }
  .lg-hero__title { flex: 0 0 auto; }
  .lg-btn__content { padding: 12px 16px; }
  .lg-btn__helper { display: none; }
  .lg-btn__arrow { position: static; width: 16px; height: 16px; transform: none; }
  .pp__bg { padding: 140px 24px 80px; }
  .pp__content { gap: 24px; }
  .pp__cols { flex-direction: column; gap: 12px; }
  .pp__side { position: relative; top: auto; flex: 0 0 auto; }
  .pp__main { flex: 0 0 auto; }
  .faq { padding: 80px 24px; scroll-margin-top: 80px; }
  .faq__upper { flex-direction: column; justify-content: flex-start; gap: 12px; }
  .faq__kicker-wrap, .faq__title-wrap { flex: 0 0 auto; width: 100%; }
  .faq__h2 { font-size: 32px; line-height: 35.2px; letter-spacing: -1.28px; }
  .faq__h3 { font-size: 22.4px; line-height: 26.88px; letter-spacing: -0.896px; }
  .faq__p { font-size: 14.4px; line-height: 20.16px; }
}