/* =========================================================
   DUARTE ADVOCACIA INTERNACIONAL (D.A.I.)
   Design tokens — colors, typography, spacing, shadows
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- PRIMITIVE COLORS ---------- */
  /* Navy — institutional, the backbone */
  --navy-deep:  #183850;   /* deepest, used in shadows / inverted text */
  --navy-mid:   #204058;
  --navy-soft:  #304860;
  --navy:       #002040;   /* primary navy — brand canonical */

  /* Silver — metallic / typographic accent */
  --silver:        #B0B8C0;  /* primary */
  --silver-light:  #C8D0D8;
  --silver-mid:    #8898A8;
  --silver-dark:   #5A6878;  /* derived for text on light */

  /* Neutrals */
  --off-white: #F8F8F8;
  --paper:     #FBFBFC;     /* slightly warmer canvas */
  --pearl:     #EEF0F3;
  --line:      #DDE2E8;     /* hairline */
  --line-soft: #E8ECF1;

  /* Gold — used SPARINGLY; numerals, divider dots, seal flourishes */
  --gold:       #C9A84C;
  --gold-soft:  #D9BD6E;
  --gold-deep:  #A88932;

  /* States — institutional, never bright */
  --success: #3E6F5A;
  --warning: #B27B2C;
  --danger:  #8A2A2A;
  --info:    var(--navy-soft);

  /* ---------- SEMANTIC SURFACE ---------- */
  --bg:           var(--off-white);
  --bg-elevated:  #FFFFFF;
  --bg-inverse:   var(--navy);
  --bg-section:   var(--paper);

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg1: var(--navy);          /* primary text on light */
  --fg2: var(--silver-dark);   /* secondary, captions */
  --fg3: var(--silver-mid);    /* tertiary, hints */
  --fg-inverse: var(--off-white);
  --fg-inverse-2: var(--silver-light);
  --fg-accent: var(--gold-deep);

  /* ---------- BORDERS ---------- */
  --border: var(--line);
  --border-strong: var(--silver-mid);
  --border-inverse: rgba(255,255,255,0.18);

  /* ---------- TYPOGRAPHY ---------- */
  /* Display — geometric sans, thin weights, wide tracking.
     Outfit is a Google Fonts substitution for the bespoke
     wordmark; flag in README. */
  --font-display: "Outfit", "Spartan", "Jost", system-ui, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Cormorant Garamond", "Times New Roman", serif; /* for editorial quotes / numerals */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — premium, generous */
  --t-display:   clamp(56px, 7.5vw, 104px);  /* hero wordmark */
  --t-h1:        clamp(40px, 5vw, 64px);
  --t-h2:        clamp(30px, 3.5vw, 44px);
  --t-h3:        24px;
  --t-h4:        20px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-eyebrow:   12px;     /* all-caps label */
  --t-micro:     11px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-base:     1.55;
  --lh-loose:    1.75;

  --ls-display:  0.04em;
  --ls-h1:       0.02em;
  --ls-eyebrow:  0.22em;   /* WIDE — secondary labels are spaced out */
  --ls-button:   0.18em;
  --ls-body:     0.01em;

  /* ---------- SPACING (8pt grid) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 160px;

  /* ---------- RADII ---------- */
  /* Deliberately restrained — institutional, never playful. */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;     /* default */
  --r-3:  6px;
  --r-4:  8px;     /* cards (upper bound) */
  --r-pill: 999px; /* only for tags / state pills */

  /* ---------- ELEVATION ---------- */
  /* Soft, low-contrast — printed-paper feel, never glossy. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(24,56,80,0.04), 0 1px 1px rgba(24,56,80,0.03);
  --shadow-2: 0 2px 6px rgba(24,56,80,0.06), 0 1px 2px rgba(24,56,80,0.04);
  --shadow-3: 0 8px 24px rgba(24,56,80,0.08), 0 2px 6px rgba(24,56,80,0.04);
  --shadow-4: 0 24px 48px rgba(24,56,80,0.12), 0 4px 12px rgba(24,56,80,0.06);
  --shadow-inset-hairline: inset 0 0 0 1px var(--line);
  --shadow-focus: 0 0 0 3px rgba(0,32,64,0.18);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emphatic: cubic-bezier(.16,.84,.24,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* =========================================================
   ELEMENT BASELINES — apply on top of a CSS reset
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  font-weight: 300;
  margin: 0;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h1, .h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  font-weight: 300;
}

h2, .h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h1);
  font-weight: 300;
}

h3, .h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-weight: 400;
}

h4, .h4 {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-weight: 500;
}

p, .p {
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg1);
  margin: 0;
}

.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg2);
  font-weight: 400;
}

small, .caption {
  font-size: var(--t-body-sm);
  color: var(--fg2);
}

/* Secondary labels — ALL CAPS, wide tracking. Brand signature. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
  font-weight: 500;
}

.eyebrow-gold { color: var(--gold-deep); }
.eyebrow-silver { color: var(--silver-mid); }

/* Editorial serif — pull quotes, large numerals */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* Hairline divider — used as a section opener */
.rule {
  height: 1px;
  background: var(--border);
  width: 100%;
}
.rule-short {
  height: 1px;
  width: 48px;
  background: var(--silver-mid);
}
.rule-gold {
  height: 1px;
  width: 32px;
  background: var(--gold);
}

/* =========================================================
   RESPONSIVE — global breakpoint rules
   Targets inline-styled grids via attribute selectors.
   Inline styles win unless we use !important.
   ========================================================= */

/* TABLET ≤1024px — collapse 4-5 column grids to 2 */
@media (max-width: 1024px) {
  body { font-size: 15px; }

  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  [style*="grid-template-columns: 260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* hide sticky TOC on tablet (it loses meaning collapsed) */
  nav[style*="position: sticky"] { position: static !important; }
}

/* MOBILE ≤768px — single column for everything */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
  }

  body { font-size: 14px; }

  /* Any multi-column grid collapses to single column */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 100px 1fr"],
  [style*="grid-template-columns: 110px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Hero pulls right column under text */
  section[id="top"] > div > div > div[style*="alignItems: \"end\""],
  section[id="top"] [style*="alignItems: \"end\""] {
    align-items: stretch !important;
  }

  /* Big section vertical padding */
  section[style*="padding: \"120px 0\""],
  section[style*="padding: \"120px 0"] { padding: 64px 0 !important; }
  section[style*="padding: \"100px 0\""] { padding: 56px 0 !important; }
  section[style*="paddingTop: 160"] { padding-top: 100px !important; }
  section[style*="paddingTop: 80"]   { padding-top: 80px !important; }

  /* Shrink large hero gaps */
  [style*="gap: 80px"] { gap: 32px !important; }
  [style*="gap: 100px"] { gap: 32px !important; }
  [style*="gap: 56px"] { gap: 28px !important; }
  [style*="gap: 72px"] { gap: 32px !important; }

  /* Heading clamps degrade well, but force a max on huge ones */
  h1, h2 { word-wrap: break-word; overflow-wrap: anywhere; }

  /* Nav: hide nav links, keep CTA */
  header nav { display: none !important; }
  header [style*="padding: \"22px 0\""] > a img { height: 32px !important; }

  /* Form pill row wraps cleanly */
  [style*="gridTemplateColumns"][style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* Container narrower side gutters */
  .container, [class*="container"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* FAQ — kill right padding on opened answer */
  [style*="paddingRight: 60"] { padding-right: 0 !important; }

  /* Methodology / WhyChoose — remove leftover right border on single column */
  [style*="borderRight: \"1px solid"] { border-right: none !important; }
  [style*="borderLeft: \"1px solid"] { border-left: none !important; }
  [style*="borderRight: \"1px solid var(--line)\""] {
    border-right: none !important; border-bottom: 1px solid var(--line) !important;
  }
  [style*="borderRight: \"1px solid rgba(255,255,255"] {
    border-right: none !important;
  }

  /* Footer bottom utility row — links wrap instead of overflowing */
  footer [style*="paddingTop: 32"][style*="justifyContent: \"space-between\""] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  footer [style*="gap: 28"] {
    gap: 14px !important;
    flex-wrap: wrap !important;
  }
}