/* =============================================================
   García Trujillo & Asociados — stylesheet
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced-motion
   ============================================================= */

/* 1. Tokens ---------------------------------------------------- */
:root {
  --navy:      #0f1b33;
  --navy-2:    #16274a;
  --navy-3:    #1f3560;
  --white:     #ffffff;
  --paper:     #f6f7f9;
  --paper-2:   #eef0f4;
  --ink:       #16213a;
  --ink-soft:  #3c4a63;
  --slate:     #5b6472;
  --gold:      #b68d40;
  --gold-2:    #d4af6a;
  --gold-3:    #e9cf9a;
  --line:      rgba(15, 27, 51, 0.1);
  --line-dark: rgba(255, 255, 255, 0.14);
  --cream:     #f2ede3;

  --serif: "Playfair Display", "Georgia", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px -8px rgba(15, 27, 51, 0.18);
  --shadow-md: 0 20px 44px -20px rgba(15, 27, 51, 0.28);
  --shadow-lg: 0 34px 70px -28px rgba(15, 27, 51, 0.4);
  --shadow-gold: 0 16px 34px -14px rgba(182, 141, 64, 0.55);

  --nav-h: 86px;
  --container: 1200px;
}

/* 2. Reset & base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: clip;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }

/* Justify running prose (bios, descriptions, legal text) — short centered
   intros (.lede, .eyebrow, CTA blurbs) keep their inherited alignment so
   they don't lose their centered look under a centered heading. */
.split-body p,
.team-full-item p,
.team-info p,
.service-card p,
.step p,
.info-item span,
.footer-quote,
.legal-content p,
.blog-card-body p,
.blog-featured-body p,
.study-card p,
.video-card-body p {
  text-align: justify;
  text-justify: inter-word;
}
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.1; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-3); color: var(--navy); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 3. Utilities ---------------------------------------------------- */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.2rem; background: var(--navy); color: var(--white);
  z-index: 9999; border-radius: var(--radius-sm); font-weight: 600; transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(182, 141, 64, 0.1);
  padding: .4rem .9rem .4rem .7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.section--navy .eyebrow, .page-hero .eyebrow { background: rgba(212, 175, 106, 0.14); color: var(--gold-2); }
.section--navy .eyebrow::before, .page-hero .eyebrow::before { background: var(--gold-2); }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

.h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
.h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.lede { color: var(--slate); font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 60ch; }
.section--navy .lede { color: rgba(242,237,227,.78); }

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

/* reveal-on-scroll — defensive rule keeps content visible if JS never runs */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: .01s; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* 4. Buttons & links ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 2rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--radius-pill);
  transition: transform .35s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .35s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--navy);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--gold-3), var(--gold-2)); transform: translateY(-3px); box-shadow: 0 22px 40px -16px rgba(182,141,64,.6); }

.btn-outline {
  border: 1px solid var(--line-dark);
  color: inherit;
  backdrop-filter: blur(6px);
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-3px); }

.btn-outline--dark {
  border: 1px solid rgba(15,27,51,.18);
  color: var(--navy);
}
.btn-outline--dark:hover { background: rgba(15,27,51,.05); border-color: rgba(15,27,51,.3); transform: translateY(-3px); }

.link-underline {
  position: relative;
  padding-bottom: .15rem;
  font-weight: 600;
}
.link-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(0); transform-origin: left; }

/* 5. Nav --------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(15,27,51,.55), rgba(15,27,51,0));
  backdrop-filter: blur(2px);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), height .3s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(15, 27, 51, .78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 16px 40px -26px rgba(0,0,0,.6);
  height: 74px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; }
.brand img { width: auto; height: 34px; }

.nav-links {
  display: none;
  align-items: center;
  gap: 2.1rem;
}
.nav-links a {
  font-size: .93rem; font-weight: 500; color: var(--white);
  position: relative; padding-block: .3rem;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--gold-2); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--gold-2); }

.nav-cta { display: none; padding: .8rem 1.6rem; font-size: .88rem; }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  width: 26px; padding: .5rem 0;
  z-index: 910;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; background: var(--white); border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  position: fixed; inset: 0; z-index: 895;
  background: var(--navy);
  display: flex; flex-direction: column;
  /* flex-start, no center: con 8 enlaces + botón el contenido suele ser
     más alto que la pantalla en teléfonos comunes (ej. 375x667), y
     "justify-content: center" desborda por igual hacia arriba y abajo —
     eso empujaba "Inicio" bien arriba, debajo del header, sin importar
     el padding-top. Alineado arriba, el padding-top sí es un límite real. */
  align-items: stretch; justify-content: flex-start;
  gap: 0;
  /* padding-top >= la altura del header fijo (z-index 900, por encima de
     este panel): sin esto, "Inicio" (el primer link) queda tapado por él. */
  padding: calc(var(--nav-h) + .5rem) 1.75rem 2rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
}
.mobile-panel::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 60%;
  background: radial-gradient(50% 60% at 20% 0%, rgba(182,141,64,.14), transparent 70%);
  pointer-events: none;
}
.mobile-panel.is-open { opacity: 1; visibility: visible; transform: none; }
/* Antes cada link era serif de 1.9rem con 1.6rem de separación — ocho
   enlaces así ocupaban mucho más que la pantalla y se sentía "gigante".
   Ahora es una lista compacta con divisores finos, del mismo tamaño que
   el resto de la tipografía del sitio, con el mismo subrayado dorado al
   pasar el cursor que ya usa el menú de escritorio (.nav-links a::after). */
.mobile-panel a {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600;
  color: var(--white);
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: color .25s var(--ease-out), padding-left .25s var(--ease-out);
}
.mobile-panel a:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.mobile-panel a::after {
  content: "";
  width: 16px; height: 1px; flex-shrink: 0;
  background: var(--gold-2);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.mobile-panel a:hover, .mobile-panel a:active { color: var(--gold-2); padding-left: .2rem; }
.mobile-panel a:hover::after, .mobile-panel a:active::after { transform: scaleX(1); }
.mobile-panel a.btn {
  margin-top: 1.7rem;
  align-self: flex-start;
  border: 0;
}
.mobile-panel a.btn::after { display: none; }

/* 7. Page hero (interior pages) ------------------------------------- */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + 5rem) 4.5rem;
  background: var(--navy);
  color: var(--white);
  overflow: clip;
}
.page-hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%;
  height: 140%;
  background: radial-gradient(50% 60% at 80% 0%, rgba(182,141,64,.2), transparent 70%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute; inset: auto -10% -30% 60%;
  height: 80%;
  background: radial-gradient(45% 55% at 30% 100%, rgba(31,53,96,.55), transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 20ch; }
.page-hero p { margin-top: 1.1rem; max-width: 56ch; color: rgba(242,237,227,.78); }
.breadcrumb {
  display: flex; gap: .5rem; align-items: center;
  font-size: .82rem; color: rgba(242,237,227,.6);
  margin-bottom: 1.6rem;
}
.breadcrumb a:hover { color: var(--gold-2); }

/* 8. About summary / two-column -------------------------------------- */
.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 15%; box-shadow: var(--shadow-lg); }
.split-media::before {
  content: "";
  position: absolute; inset: 1.4rem -1.1rem auto auto;
  width: 55%; height: 60%;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(182,141,64,.16), rgba(182,141,64,0));
  border: 1px solid rgba(182,141,64,.3);
  z-index: -1;
}
.split-media.no-frame::before { display: none; }
.split-body .h2 { margin-bottom: 1.1rem; }
.split-body p + p { margin-top: 1rem; }
.split-body .btn { margin-top: 1.8rem; }

.stat-row { display: flex; gap: clamp(1.5rem, 5vw, 3.2rem); margin-top: 2.2rem; flex-wrap: wrap; }
.stat strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--navy); }
.stat span { font-size: .85rem; color: var(--slate); }

/* 9. Service cards -------------------------------------------------- */
.services-grid {
  display: grid;
  gap: 1.4rem;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out), border-color .4s var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(182,141,64,.3); }
.service-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-3), var(--navy));
  margin-bottom: 1.4rem;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
}
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.service-icon svg { width: 23px; height: 23px; color: var(--gold-2); transition: color .35s var(--ease-out); }
.service-card:hover .service-icon svg { color: var(--navy); }
.service-card h3 { font-size: 1.12rem; margin-bottom: .6rem; }
.service-card p { color: var(--slate); font-size: .93rem; }

/* 10. Methodology steps ----------------------------------------------- */
.steps {
  display: grid;
  gap: 2rem;
}
.step {
  position: relative; padding: 2rem 1.8rem 1.8rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.section:not(.section--navy) .step { background: var(--white); box-shadow: var(--shadow-sm); }
.section--navy .step { border-color: rgba(255,255,255,.1); }
.step-num {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
  margin-bottom: .8rem;
  display: inline-block;
}
.step h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.step p { color: var(--slate); font-size: .95rem; max-width: 34ch; }
.section--navy .step p { color: rgba(242,237,227,.7); }

/* 11. Team cards ------------------------------------------------------ */
.team-grid {
  display: grid;
  gap: 2rem;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.team-photo { aspect-ratio: 4/5; overflow: clip; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform .6s var(--ease-out); }
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-info { padding: 1.6rem 1.7rem 1.9rem; }
.team-info .role { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .3rem; }
.team-info h3 { font-size: 1.25rem; margin-bottom: .7rem; }
.team-info p { color: var(--slate); font-size: .92rem; }

.team-full { display: grid; gap: 3rem; }
.team-full-item { display: grid; gap: 2rem; align-items: start; }
.team-full-item img { border-radius: var(--radius-lg); aspect-ratio: 4/5; object-fit: cover; object-position: center 12%; box-shadow: var(--shadow-md); }
.team-full-item .role { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .4rem; }
.team-full-item h3 { font-size: 1.7rem; margin-bottom: .9rem; }
.team-full-item p { color: var(--slate); }
.team-full-item p + p { margin-top: .9rem; }

/* 12. Office / contact info -------------------------------------------- */
.office-grid { display: grid; gap: 2.5rem; align-items: center; }
.office-media img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 16/11; object-fit: cover; box-shadow: var(--shadow-lg); }
.info-list { display: grid; gap: 1.5rem; margin-top: 1.8rem; }
.info-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  /* .info-list es un grid de una columna: sin esto, el correo
     (una sola palabra larga sin espacios) fija el ancho mínimo de esa
     columna por encima del contenedor, y las 4 tarjetas terminan
     recortadas por el "overflow-x: clip" del body en móvil. */
  min-width: 0;
}
.info-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.info-item .info-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; background: linear-gradient(135deg, var(--navy-3), var(--navy));
  display: flex; align-items: center; justify-content: center;
}
.info-item .info-icon svg { width: 19px; height: 19px; color: var(--gold-2); }
.info-item > div:not(.info-icon) { min-width: 0; }
.info-item strong { display: block; font-family: var(--serif); font-size: 1.02rem; margin-bottom: .2rem; }
.info-item span, .info-item a { color: var(--slate); font-size: .93rem; display: block; overflow-wrap: break-word; }
.info-item a:hover { color: var(--navy); }

/* 13. FAQ accordion ------------------------------------------------------ */
.faq-list { display: grid; gap: 1rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding-inline: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.faq-item[data-open="true"] { border-color: rgba(182,141,64,.35); box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left; font-family: var(--serif); font-size: 1.08rem; font-weight: 600;
  /* <button> is "white-space: nowrap" by default in browsers — without this
     reset, long questions overflow the card on narrow screens instead of
     wrapping to a second line. */
  white-space: normal;
}
.faq-q .plus {
  flex-shrink: 0; width: 30px; height: 30px; position: relative;
  border-radius: 50%; background: var(--paper);
}
.faq-q .plus::before, .faq-q .plus::after {
  content: ""; position: absolute; background: var(--navy);
  transition: transform .35s var(--ease-out), opacity .3s;
}
.faq-q .plus::before { top: 50%; left: 8px; right: 8px; height: 2px; transform: translateY(-1px); }
.faq-q .plus::after { left: 50%; top: 8px; bottom: 8px; width: 2px; transform: translateX(-1px); }
.faq-item[data-open="true"] .plus { background: var(--gold); }
.faq-item[data-open="true"] .plus::before, .faq-item[data-open="true"] .plus::after { background: var(--navy); }
.faq-item[data-open="true"] .plus::after { opacity: 0; }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out);
}
.faq-a p { padding-bottom: 1.6rem; color: var(--slate); max-width: 62ch; }
/* El alto real de la respuesta abierta lo fija main.js (scrollHeight),
   igual que el acordeón de Áreas de Práctica en servicios.html — un
   valor fijo aquí (antes 240px) recortaba respuestas largas en móvil,
   donde el texto ocupa más líneas al envolver en un ancho menor. */

/* 14. Final CTA band ------------------------------------------------------ */
.cta-band {
  position: relative;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: clip;
}
.cta-band::before {
  content: "";
  position: absolute; inset: -60% -10% -60% -10%;
  background: radial-gradient(45% 55% at 50% 50%, rgba(182,141,64,.24), transparent 72%);
  pointer-events: none;
}
.cta-inner { position: relative; text-align: center; max-width: 700px; margin-inline: auto; }
.cta-inner .h2 { color: var(--white); }
.cta-inner p { margin-top: 1rem; color: rgba(242,237,227,.78); }
.cta-inner .btn { margin-top: 2rem; }

/* 15. Contact form ---------------------------------------------------------- */
.contact-grid { display: grid; gap: 3rem; }
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; gap: 1.2rem; margin-bottom: 1.2rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
  color: var(--navy); margin-bottom: .45rem;
}
.field input, .field textarea {
  width: 100%; padding: .9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}
.field input:focus, .field textarea:focus {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(182,141,64,.15);
  outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field .error-msg {
  display: none; font-size: .78rem; color: #a02824; margin-top: .35rem;
}
.field.has-error input, .field.has-error textarea { border-color: #a02824; }
.field.has-error .error-msg { display: block; }
.form-note { font-size: .82rem; color: var(--slate); margin-top: 1rem; }
.form-status {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: .9rem;
  display: none;
}
.form-status.is-success { display: block; background: rgba(74,93,58,.12); color: #3a4a2a; }
.form-status.is-error { display: block; background: rgba(160,40,36,.1); color: #a02824; }

.map-wrap { border-radius: var(--radius-lg); overflow: clip; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.map-wrap iframe { width: 100%; height: 320px; border: 0; filter: grayscale(.2) contrast(1.02); }

/* 16. Footer ---------------------------------------------------------------- */
.footer {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, #0a1324 100%);
  color: rgba(242,237,227,.72);
  padding-block: 4rem 2rem;
}
.footer-top {
  display: grid;
  gap: 2.4rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand { max-width: 340px; }
.footer .brand { margin-bottom: 1.2rem; }
.footer-quote {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: rgba(242,237,227,.85);
}
.footer-col h4 {
  font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: .7rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem;
}

/* 17. Responsive ------------------------------------------------------------ */
@media (min-width: 540px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row--pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse > .split-media { order: 2; }
  .office-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .team-full-item { grid-template-columns: 240px 1fr; }
  .contact-grid { grid-template-columns: 1.1fr 1fr; }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1.4fr .8fr .8fr 1fr; }
}

/* 18. Print / no-js safety --------------------------------------------------- */
.no-js .mobile-panel,
.no-js .nav-toggle { display: none; }