/* Palmetto Build Group — Design Tokens */

:root {
  /* Colors — Coastal After Dark palette */
  --navy-900: #0A1628;
  --navy-800: #0F1D33;
  --navy-700: #152843;
  --navy-600: #1D3654;
  --navy-500: #2A476B;

  --bone-50: #FAF7F1;
  --bone-100: #F2EDE4;
  --bone-200: #E8DFD0;
  --bone-300: #D4C7B0;

  --steel-400: #8BA5BF;
  --steel-500: #6B8BA8;
  --steel-600: #4F7089;

  --brass-400: #D4B57E;
  --brass-500: #B8975A;
  --brass-600: #9A7D44;

  --ink-900: #0A1628;
  --ink-700: #2A3A4E;
  --ink-500: #556578;
  --ink-300: #8A95A3;

  /* Type */
  --font-display: 'Canela Deck', 'Canela', 'Didot', 'Tiempos Headline', Georgia, serif;
  --font-body: 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Scale — fluid */
  --fs-xs: clamp(11px, 0.72vw, 12px);
  --fs-sm: clamp(13px, 0.85vw, 14px);
  --fs-base: clamp(15px, 1.02vw, 17px);
  --fs-lg: clamp(18px, 1.25vw, 20px);
  --fs-xl: clamp(22px, 1.6vw, 26px);
  --fs-2xl: clamp(28px, 2.2vw, 36px);
  --fs-3xl: clamp(36px, 3.2vw, 52px);
  --fs-4xl: clamp(48px, 5vw, 80px);
  --fs-5xl: clamp(64px, 7.5vw, 128px);
  --fs-6xl: clamp(80px, 11vw, 180px);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Layout */
  --page-pad-x: clamp(24px, 4vw, 72px);
  --container-max: 1600px;
  --rule: 1px solid rgba(10, 22, 40, 0.12);
  --rule-light: 1px solid rgba(242, 237, 228, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bone-50);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.eyebrow--light {
  color: var(--bone-300);
}

.rule { border-top: var(--rule); }
.rule-light { border-top: var(--rule-light); }

/* Selection */
::selection { background: var(--brass-500); color: var(--navy-900); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.1, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0.1, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Placeholder imagery */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(107, 139, 168, 0.08) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(180deg, var(--navy-700), var(--navy-900));
  color: var(--bone-100);
  overflow: hidden;
  isolation: isolate;
}

.ph--light {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(10, 22, 40, 0.06) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(180deg, var(--bone-200), var(--bone-100));
  color: var(--navy-800);
}

.ph__label {
  position: absolute;
  inset: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
  pointer-events: none;
}
.ph__label span { max-width: 80%; text-wrap: pretty; opacity: 0.7; letter-spacing: 0.06em; }
.ph__id { opacity: 0.5; }

/* ============================================================
   RESPONSIVE — tablet (<=1024px) & mobile (<=768px)
   Strategy: override grid-template-columns on flagged wrappers,
   shrink spacing, stack sticky panels.
   ============================================================ */

/* Tablet landscape → portrait */
@media (max-width: 1024px) {
  :root {
    --page-pad-x: clamp(20px, 4vw, 40px);
    --sp-10: 96px;
    --sp-9: 72px;
  }

  /* Generic 2-column "intro" rows (eyebrow + heading) across every section */
  section > div > .reveal[style*="grid-template-columns: 1fr 2fr"],
  section > div > div.reveal[style*="1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
  }
}

/* Narrow desktop / tablet landscape — nav breathing room */
@media (max-width: 1100px) and (min-width: 769px) {
  .desktop-nav { gap: 22px !important; }
  .desktop-nav > a:last-child { padding: 10px 14px !important; font-size: 11px !important; letter-spacing: 0.08em !important; }
  .desktop-nav > a:not(:last-child) { font-size: 12px !important; }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --page-pad-x: 20px;
    --sp-10: 72px;
    --sp-9: 56px;
    --sp-8: 48px;
    --sp-7: 36px;
  }

  body { font-size: 15px; }

  h1, h2, h3 { letter-spacing: -0.02em; }

  /* Force every inline grid into single column — aggressive but targeted */
  [style*="grid-template-columns"][data-keep-grid] { /* opt-out hook */ }

  /* Nav: hide desktop link row, show hamburger */
  .desktop-nav { display: none !important; }
  .mobile-nav-toggle { display: flex !important; }

  /* Hero */
  .hero-h1 { font-size: clamp(40px, 10vw, 64px) !important; }
  .hero-meta-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-corner-marks { top: 96px !important; font-size: 9px !important; gap: 8px; flex-direction: column; align-items: flex-start !important; }
  .hero-corner-marks span { display: block; }
  .hero-content { padding-top: 200px !important; }

  /* Services — stack list + sticky panel */
  .svc-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .svc-panel { position: static !important; padding: 28px !important; min-height: 0 !important; }
  .svc-row-head { grid-template-columns: auto 1fr auto !important; gap: 14px !important; }
  .svc-row-head h3 { font-size: 22px !important; }
  .svc-row p { padding-left: 0 !important; font-size: 14px; }

  /* Methodology */
  .method-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .method-tabs { flex-wrap: wrap; }
  .method-tabs button { flex: 1 0 33% !important; font-size: 9px !important; padding: 12px 4px !important; }

  /* Projects */
  .proj-filters { gap: 6px; }
  .proj-filters button { padding: 8px 12px !important; font-size: 10px !important; }
  .proj-count { margin-left: 0 !important; width: 100%; margin-top: 8px; }
  .proj-grid { grid-template-columns: 1fr !important; row-gap: 48px !important; gap: 24px !important; }
  .proj-grid > article { grid-column: 1 / -1 !important; }
  .proj-meta { grid-template-columns: 1fr !important; gap: 4px !important; margin-top: 16px !important; }
  .proj-footer { flex-direction: column; gap: 24px; align-items: flex-start !important; }

  /* Markets */
  .mkt-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mkt-map { aspect-ratio: 1 / 1 !important; }
  .mkt-detail { position: static !important; }
  .mkt-stats { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* About */
  .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 72px !important; }
  .about-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  .about-stats > div > div:first-child { font-size: 28px !important; }
  .timeline { padding-left: 28px !important; }
  .timeline-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 20px 0 !important; }
  .timeline-row > div:nth-child(1) { font-size: 22px !important; }

  /* Partners */
  .partners-shell { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .partners-shell > div:first-child { border-right: none !important; border-bottom: 1px solid rgba(242,237,228,0.12); }
  .partners-shell button { padding: 16px 20px !important; grid-template-columns: 32px 1fr auto !important; gap: 14px !important; }
  .partners-shell button span[style*="var(--fs-2xl)"] { font-size: 20px !important; }
  .partner-detail { padding: 32px 24px !important; }
  .partner-detail h3 { font-size: 40px !important; }
  .partner-footer-stats { grid-template-columns: 1fr 1fr !important; }

  /* Sustainability */
  .sust-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .contact-form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .contact-chips-2 { grid-template-columns: 1fr !important; }
  .contact-chips-4 { grid-template-columns: 1fr 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column !important; gap: 12px; align-items: flex-start !important; text-align: left; }

  /* Generic intro rows (eyebrow + H2) already handled by tablet query — also shrink H2 */
  section h2 { font-size: clamp(32px, 8vw, 48px) !important; }

  /* Tweaks panel */
  .tweaks-panel { width: calc(100vw - 40px) !important; right: 20px !important; bottom: 20px !important; }
}