/* LegaleFedele — palette "celeste polvere e salvia" (indicazioni del 07/10/2026). */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
}
/* Jost: nome dell'avvocato nel logo. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-variable.woff2") format("woff2");
}

:root {
  --bg: #f4f7fa;
  --dust: #dce5ed;
  --sage-bg: #e3eae1;
  --ink: #22324a;
  --ink-hover: #33476a;
  --text: #6a6f7a;
  --white: #ffffff;
  --border: #d3dfe8;
  --border-sage: #c9d6c8;
  --border-btn: #a7bccf;
  --gold: #bfa27a;
  --copper: #b98a6e;
  --photo-line: #0e2440;
  --photo-line-thin: #b07f72;
  --logo-rule: #98a2af;
  --sage: #7e987d;
  --sage-line: #a9bfa8;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --geo: "Jost", "Century Gothic", "Futura", var(--sans);
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1120px;
  --header-h: 88px;
  /* Zone coperte da tacca, barra di stato o comandi del browser (viewport-fit=cover): zero dove non ci sono. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-total: calc(var(--header-h) + var(--safe-top));
}
@media (max-width: 960px) { :root { --header-h: 80px; } }

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-total) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-top: var(--header-total);
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0;
}

a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-thickness: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left)); }
.container--narrow { max-width: 780px; }

/* Filetti decorativi */
.rule { display: block; width: 48px; height: 1px; background: var(--gold); margin-bottom: 20px; }
.rule--card { width: 32px; margin-bottom: 16px; }
.rule--footer { background: var(--gold); margin: 20px 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

/* Bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--ink-hover); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-btn); }
.btn--secondary:hover { background: var(--dust); }
.btn--small { min-height: 40px; padding: 8px 18px; font-size: 0.875rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn .icon { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; }

/* Header */
/* Fisso, bianco e a tutta larghezza. Parte dal bordo alto dello schermo e si allunga sotto barra di stato e
   comandi del browser (--safe-top): lì sopra non deve vedersi la pagina che scorre. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-top: var(--safe-top);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}
/* Pagina scorsa: l'ombra dice che il contenuto passa sotto la barra. */
.site-header.is-scrolled { box-shadow: 0 6px 18px -6px rgba(34, 50, 74, 0.28); }
/* Copre anche l'elastico dello scorrimento su iOS, sopra il bordo alto. */
.site-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--white); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: calc(var(--header-h) - 1px); }

/* Logo: proporzioni e spaziature misurate sul riferimento (unità del viewBox). */
.logo { display: block; flex: 0 1 280px; min-width: 0; color: var(--ink); text-decoration: none; }
.logo__svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo__outer, .logo__inner, .logo__rule { fill: none; }
.logo__outer { stroke: var(--ink); stroke-width: 4.4; }
.logo__inner { stroke: var(--copper); stroke-width: 1.6; }
.logo__rule { stroke: var(--logo-rule); stroke-width: 2; }
.logo__lf, .logo__word { font-family: var(--serif); font-weight: 500; fill: var(--ink); }
.logo__lf { font-size: 104px; }
.logo__word { font-size: 110.4px; }
.logo__word-i { font-style: italic; letter-spacing: 0.9px; }
.logo__sub { font-family: var(--geo); font-weight: 400; font-size: 26.3px; letter-spacing: 0.335em; word-spacing: 5px; fill: var(--ink); }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__list { display: flex; gap: 24px; list-style: none; }
.site-nav__list a { color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.site-nav__list a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

.menu-toggle {
  display: none;
  /* Solo le tre lineette, senza scritta né contorno; l'area di tocco resta 44×44. */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -9px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  display: block; width: 26px; height: 2px; background: var(--ink); position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -8px; }
.menu-toggle__bars::after { top: 8px; }
.menu-open .menu-toggle__bars { background: transparent; }
.menu-open .menu-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; flex: none; }
  .site-header__inner { gap: 16px; }
  .logo { flex-basis: 280px; }
  /* Menu aperto: pannello pieno fino in fondo, la pagina dietro non scorre. */
  .menu-open { overflow: hidden; }
  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-total); left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px max(var(--gutter), var(--safe-right)) calc(24px + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }
  .menu-open .site-nav { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
  .site-nav .btn { margin-top: 12px; }
}

/* Sezioni */
.section { padding: clamp(64px, 9vw, 104px) 0; }
.section--tight { padding: clamp(40px, 6vw, 64px) 0; }
.section--dust { background: var(--dust); color: var(--ink); }
.section--sage { background: var(--sage-bg); color: var(--ink); }
.section--dust .card, .section--sage .card { color: var(--text); }
.section--sage .card { border-color: var(--border-sage); }

.section-head { max-width: 680px; margin-bottom: 40px; }
.section-title { font-size: clamp(2rem, 4.2vw, 2.75rem); }
.section-intro { font-size: 1.0625rem; margin: 0; }

/* Hero */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  grid-template-areas:
    "eyebrow photo"
    "title photo"
    "body photo";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.hero__eyebrow { grid-area: eyebrow; margin-bottom: 18px; }
.hero__eyebrow::before { content: ""; display: block; width: 48px; height: 1px; background: var(--gold); margin-bottom: 20px; }
.hero__title { grid-area: title; font-size: clamp(2.5rem, 5vw, 3.8rem); line-height: 1.05; margin-bottom: 24px; }
.hero__body { grid-area: body; max-width: 600px; }
.hero__lead { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.35; color: var(--ink); }
.hero__note { font-style: italic; }
.hero__reassurance { font-size: 0.8125rem; margin: 0; }

.hero__photo { grid-area: photo; position: relative; margin: 0; align-self: end; max-width: 440px; justify-self: end; width: 100%; }
/* Ritratto (richiesta del 13/10/2026): la foto sfuma in basso e a sinistra; in alto e a destra due linee ad
   angolo, come il doppio bordo del logo, che sfumano anch'esse verso sinistra e verso il basso.
   Solo CSS: il file della foto non è toccato. */
.hero__photo { --fade-corner: linear-gradient(to left, #000 30%, transparent 92%), linear-gradient(to bottom, #000 30%, transparent 88%); }
.hero__photo::before, .hero__photo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  -webkit-mask-image: var(--fade-corner);
  mask-image: var(--fade-corner);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Linea spessa blu notte, vicina alla foto. */
.hero__photo::before { inset: 9% 0 12% 6%; border-top: 3px solid var(--photo-line); border-right: 3px solid var(--photo-line); }
/* Linea sottile cipria, poco più all'esterno. */
.hero__photo::after { inset: calc(9% - 9px) -9px 12% 6%; border-top: 1px solid var(--photo-line-thin); border-right: 1px solid var(--photo-line-thin); }
.hero__photo img {
  position: relative;
  z-index: 1;
  width: 100%; height: auto;
  --fade-photo: linear-gradient(to top, transparent 0%, #000 26%), linear-gradient(to right, transparent 0%, #000 30%);
  -webkit-mask-image: var(--fade-photo);
  mask-image: var(--fade-photo);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 820px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "photo" "body";
    grid-template-rows: auto;
  }
  .hero__photo { justify-self: center; max-width: 210px; margin-bottom: 28px; }
}

/* Card */
.cards { list-style: none; display: grid; gap: 20px; }
.cards--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--areas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.cards--articles, .cards--contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .cards--articles, .cards--contacts { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .cards--areas { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  color: var(--text);
}
.card__title { font-size: 1.5rem; margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
/* Indirizzi e-mail lunghi: vanno a capo invece di allargare la pagina sui telefoni stretti. */
.cards > li { min-width: 0; }
.card a { overflow-wrap: anywhere; }
.card__meta { font-size: 0.8125rem; margin-bottom: 8px; color: var(--text); }
.card--area, .card--article { display: flex; flex-direction: column; transition: border-color 0.2s ease; }
.card--area p, .card--article p { flex: 1; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card--area:hover, .card--article:hover { border-color: var(--border-btn); }
.card__more {
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.card--wide { max-width: 720px; }
.card--wide .btn { margin-top: 16px; }
.handle { color: var(--text); font-size: 1.125rem; }

/* Metodo */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 32px; }
.step { border-top: 1px solid var(--sage-line); padding-top: 18px; }
.step__number { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--sage); margin-bottom: 14px; }
.step__title { font-size: 1.375rem; margin-bottom: 8px; }
.step p { font-size: 0.9375rem; margin: 0; }
.method__closing { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink); margin-bottom: 24px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* Chi sono */
.about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.about__text p { max-width: 620px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

.dot-list { list-style: none; }
.dot-list li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.dot-list li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.offices-box { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--border-sage); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 0.9375rem; }
.offices-box__title { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 6px; }
.offices-box ul { list-style: none; }

/* FAQ */
.faq__list { display: grid; gap: 12px; max-width: 820px; }
.faq__item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { padding: 0 24px 20px; margin: 0; }

/* Contatti e modulo */
.contact__remote { margin: 20px 0 0; }
.card--form { margin-top: 40px; max-width: 820px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 16px; }
.field { display: grid; gap: 6px; font-size: 0.875rem; color: var(--ink); }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--border-btn); border-color: var(--ink); }
.privacy-section { margin-bottom: 1.4em; scroll-margin-top: calc(var(--header-total) + 16px); }
.privacy-section > .dot-list { margin-bottom: 1em; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; margin-bottom: 20px; }
.consent input { margin-top: 5px; accent-color: var(--ink); }
.form-status { margin: 16px 0 0; color: var(--ink); }
.form-status:empty { display: none; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* Pagine interne (aree, articoli, privacy) */
.page-hero { padding: clamp(40px, 7vw, 80px) 0 clamp(24px, 4vw, 40px); }
.page-hero--full { padding: clamp(64px, 12vw, 140px) 0; }
.breadcrumb { font-size: 0.8125rem; margin-bottom: 28px; }
.breadcrumb a { color: var(--text); }
.page-title { font-size: clamp(2.3rem, 5.4vw, 3.4rem); line-height: 1.08; }
.page-highlight { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.35; color: var(--ink); margin-bottom: 0; }
.page-body { font-size: 1.0625rem; }
.page-intro:first-child { margin-top: 0; }
.page-subtitle { font-size: 1.9rem; margin-top: 1.6em; }
.situation { margin: 1.4em 0; padding-left: 20px; border-left: 1px solid var(--gold); }
.situation__title { font-style: italic; font-size: 1.45rem; margin-bottom: 6px; }
.situation p { margin: 0; }
.dot-list--page li { margin-bottom: 10px; }
.page-emphasis { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--ink); line-height: 1.4; margin: 1.4em 0; }
.approach { margin-top: 1em; }
.page-closing { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink); margin: 1.8em 0 1.4em; }
.page-body .btn { margin: 8px 0 24px; }
.page-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 32px; }
.notice { padding: 14px 18px; border: 1px solid var(--border-btn); border-radius: 10px; background: var(--dust); color: var(--ink); font-size: 0.9375rem; }
.other-areas__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
@media (max-width: 600px) { .other-areas__list { grid-template-columns: 1fr; } }

/* Piè di pagina: unica fascia scura */
.site-footer { background: var(--ink); color: var(--dust); padding: 64px 0 calc(32px + var(--safe-bottom)); font-size: 0.9375rem; }
.site-footer a { color: var(--dust); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 0.9fr; gap: 40px; }
.site-footer__name { font-family: var(--serif); font-size: 1.75rem; color: var(--bg); margin-bottom: 8px; }
.site-footer__title { font-weight: 500; color: var(--bg); margin-bottom: 12px; }
.site-footer__list { list-style: none; display: grid; gap: 6px; }
.site-footer__list a { text-decoration-color: transparent; }
.site-footer__list a:hover { text-decoration-color: var(--gold); }
.site-footer__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.footer-office p { margin: 0; }
.footer-office__city { color: var(--bg); font-weight: 500; }
.site-footer__remote { margin: 16px 0 0; }
.site-footer__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(220, 229, 237, 0.2); font-size: 0.8125rem; }
.site-footer__legal p { margin-bottom: 6px; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Torna su */
.back-to-top {
  position: fixed;
  right: calc(20px + var(--safe-right)); bottom: calc(20px + var(--safe-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-btn);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--dust); }

/* Movimento: comparsa allo scorrimento ed effetti al passaggio del mouse, leggeri */
/* Selettore raddoppiato: deve vincere sulle transizioni hover di card e bottoni finché l'elemento compare. */
.reveal.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.reveal.is-in { opacity: 1; transform: none; }

.btn { transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.card--area, .card--article { transition: border-color 0.25s ease, transform 0.25s ease; }
.card--area:hover, .card--article:hover { transform: translateY(-3px); }
.card--area .rule--card, .card--article .rule--card { transition: width 0.3s ease; }
.card--area:hover .rule--card, .card--article:hover .rule--card { width: 56px; }
.card__more { transition: text-underline-offset 0.2s ease; }
.card--area:hover .card__more, .card--article:hover .card__more { text-decoration-thickness: 2px; }
.step__number { transition: color 0.25s ease; }
.step:hover .step__number { color: var(--ink); }
.faq__item { transition: border-color 0.2s ease; }
.faq__item:hover { border-color: var(--border-btn); }
.hero__photo img { animation: hero-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card--area:hover, .card--article:hover { transform: none; }
  .hero__photo img { animation: none; }
}