/*
Theme Name: ISPB · Inteligência em Negócios
Theme URI: https://ispb.com.br
Author: ISPB
Description: Tema WordPress da ISPB — consultoria tributária. Fundo branco, cor secundária #1B2536. Inclui CPT de Serviços, seções da home editáveis pelo Customizer e portal do cliente.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ispb
Tags: business, one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, threaded-comments, translation-ready
*/

/* ================================================================
   ISPB · Contabilidade — Design System
   ================================================================ */

:root {
  /* Colors — light theme with #1B2536 as secondary */
  --bg: #ffffff;
  --bg-1: #f6f7f9;
  --bg-2: #eef0f4;
  --bg-3: #e3e6ec;
  --border: #e1e4ea;
  --border-strong: #c8cdd7;
  --text: #1B2536;
  --text-dim: #5a6680;
  --text-mute: #8a95aa;
  --secondary: #1B2536;
  --accent: #1B2536;
  --accent-2: #2a3a55;
  --accent-glow: rgba(27, 37, 54, 0.10);
  --success: #2f8f63;
  --warning: #b88a2a;
  --danger: #c0524f;

  /* Type */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Spacing */
  --pad-x: 64px;
  --container: 1320px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ================================================================
   Layout
   ================================================================ */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
}

/* ================================================================
   Topbar
   ================================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 16px;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-logo-lg {
  height: 44px;
}

.brand-sub {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  letter-spacing: 0.04em;
}

.nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav-item {
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--text-dim);
  border-radius: 7px;
  transition: color .15s, background .15s;
  font-weight: 450;
}

.nav-item:hover {
  color: var(--text);
  background: var(--bg-2);
}

.nav-item.active {
  color: var(--text);
  background: var(--bg-2);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================================================================
   Buttons
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  transition: all .15s;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, black);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--border-strong);
  background: var(--bg-2);
}

.btn-link {
  color: var(--text-dim);
  padding: 8px 0;
  background: transparent;
}

.btn-link:hover {
  color: var(--text);
}

.btn-lg {
  padding: 13px 22px;
  font-size: 14px;
}

.btn-sm {
  padding: 6px 11px;
  font-size: 12.5px;
}

/* ================================================================
   Type
   ================================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.h-display {
  font-size: clamp(48px, 6.5vw, 88px);
  letter-spacing: -0.04em;
  font-weight: 450;
  line-height: 0.98;
}

.h-section {
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.03em;
  font-weight: 450;
  line-height: 1.02;
}

.h-card {
  font-size: 20px;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 400;
}

.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.text-accent { color: var(--accent); }

.mono { font-family: var(--font-mono); }

/* ================================================================
   Sections
   ================================================================ */

.section {
  padding: 96px 0;
  border-bottom: 1px solid var(--border);
}

.section-tight { padding: 64px 0; }
.section-loose { padding: 128px 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border);
}

.section-head-text {
  max-width: 720px;
}

.section-head .eyebrow {
  margin-bottom: 16px;
}

/* ================================================================
   Cards
   ================================================================ */

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}

.card-pad {
  padding: 28px;
}

.card-hover:hover {
  border-color: var(--border-strong);
  background: var(--bg-2);
}

.card-accent {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-glow), transparent);
}

/* Service card */
.svc-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
}

.svc-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-2);
  transform: translateY(-2px);
}

.svc-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}

.svc-card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: all .25s;
  color: var(--accent);
}

.svc-card:hover .svc-card-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* ================================================================
   Stat block
   ================================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
  overflow: hidden;
}

.stat-cell {
  padding: 32px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-cell:last-child {
  border-right: none;
}

.stat-num {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 450;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}

.stat-num .stat-unit {
  font-size: 22px;
  color: var(--text-dim);
  margin-left: 4px;
}

.stat-label {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 12px;
}

.stat-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ================================================================
   Tag / Pill
   ================================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-accent {
  background: var(--accent-glow);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

.tag-success {
  background: rgba(47, 143, 99, 0.08);
  border-color: rgba(47, 143, 99, 0.28);
  color: var(--success);
}

.tag-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

/* ================================================================
   Footer
   ================================================================ */

.footer {
  padding: 80px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border);
}

.footer-col h5 {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin: 0 0 16px;
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: var(--text-dim);
  font-size: 13.5px;
  transition: color .15s;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ================================================================
   Utility
   ================================================================ */

.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; }
.between { justify-content: space-between; }
.center { align-items: center; }
.middle { justify-content: center; align-items: center; }
.wrap { flex-wrap: wrap; }

.divider {
  height: 1px;
  background: var(--border);
  border: none;
}

.divider-vertical {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}

/* Subtle grid bg */
.grid-bg {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}

/* Noise / glow */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 80% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(700px 400px at 0% 60%, var(--accent-glow), transparent 60%);
  z-index: 0;
}

/* Animations */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px transparent; }
}

@keyframes ticker {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}

.pulse-dot {
  animation: pulse-dot 2s infinite ease-out;
}

/* Inputs */
.input {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
  width: 100%;
}

.input:focus {
  border-color: var(--accent);
  background: var(--bg-2);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.input::placeholder {
  color: var(--text-mute);
}

.input-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Search */
.search {
  position: relative;
  width: 100%;
}

.search .input {
  padding-left: 42px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}

/* Chip / filter */
.chip {
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 500;
}

/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 500;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}

.table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.table tr:hover td {
  background: var(--bg-1);
  color: var(--text);
}

.table-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Code block */
.codeblock {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-dim);
  overflow-x: auto;
}

.code-key { color: var(--accent); }
.code-str { color: var(--success); }
.code-num { color: var(--warning); }
.code-comment { color: var(--text-mute); font-style: italic; }


/* ================================================================
   WordPress core classes
   ================================================================ */
.alignnone{margin:1.5em 0}
.aligncenter{display:block;margin:1.5em auto}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:12.5px;color:var(--text-mute);font-family:var(--font-mono);margin-top:8px}
.screen-reader-text{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:focus{position:fixed;top:12px;left:12px;z-index:999;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--accent);color:#fff;border-radius:8px}
.sticky{border-color:var(--accent)}
.bypostauthor{}

/* Entry content (páginas e posts) */
.entry-content{font-size:16px;line-height:1.7;color:var(--text-dim);max-width:760px}
.entry-content h2{font-size:32px;letter-spacing:-.025em;color:var(--text);margin:48px 0 16px}
.entry-content h3{font-size:22px;letter-spacing:-.015em;color:var(--text);margin:36px 0 12px}
.entry-content p{margin:0 0 18px}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--accent-2)}
.entry-content ul,.entry-content ol{padding-left:20px;margin:0 0 18px}
.entry-content li{margin-bottom:8px}
.entry-content blockquote{margin:28px 0;padding:20px 24px;border-left:2px solid var(--accent);background:var(--bg-1);border-radius:0 10px 10px 0;font-size:18px;color:var(--text)}
.entry-content img{max-width:100%;height:auto;border-radius:10px}
.entry-content code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-2);padding:2px 6px;border-radius:4px}

/* ================================================================
   Brand / logo
   ================================================================ */
.brand-logo{height:32px;width:auto;display:block}
.brand-logo-lg{height:44px}
.custom-logo{height:32px;width:auto;display:block}

/* ================================================================
   Menu toggle (mobile)
   ================================================================ */
.menu-toggle{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:8px;align-items:center;justify-content:center;background:var(--bg)}
.menu-toggle span{display:block;width:16px;height:1.5px;background:var(--text);position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text)}
.menu-toggle span::before{top:-5px}.menu-toggle span::after{top:5px}

/* ================================================================
   Sobre / responsável técnico
   ================================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:stretch}
.about-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:20px}
.about-photo{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--bg-2)}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,.92);border-radius:999px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.about-bio{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:36px}
.about-bio p:first-child{font-size:19px;line-height:1.55;color:var(--text);margin:0 0 18px;text-wrap:pretty}
.about-bio p:last-child{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;text-wrap:pretty}
.creds{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:14px;background:var(--bg);overflow:hidden}
.cred{padding:22px;display:flex;flex-direction:column;gap:6px;min-height:110px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cred:nth-child(2n){border-right:none}
.cred-kind{font-family:var(--font-mono);font-size:10.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}
.cred-title{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.cred-school{font-size:13px;color:var(--text-dim);margin-top:auto}

/* ================================================================
   FAQ (accordion nativo)
   ================================================================ */
.faq-list{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-1)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--text-mute);flex:none;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq-item summary:hover{background:var(--bg-2)}
.faq-answer{padding:0 28px 26px;color:var(--text-dim);font-size:14.5px;line-height:1.65;max-width:820px}

/* ================================================================
   Grids reutilizáveis
   ================================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end}
.split-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.process-cell{padding:32px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:16px;min-height:220px}
.process-cell:last-child{border-right:none}

/* Hero painel */
.hero-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 24px 64px -20px rgba(27,37,54,.18),0 0 0 1px var(--border)}
.hero-panel-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-2)}
.hero-panel-metric{padding:28px;border-bottom:1px solid var(--border)}
.hero-tag{position:absolute;top:-12px;right:-12px;background:var(--accent);color:#fff;padding:6px 12px;border-radius:999px;font-size:11px;font-family:var(--font-mono);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hero-row{padding:11px 22px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;font-size:12.5px}

/* Contato */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute)}
textarea.input{min-height:130px;resize:vertical;line-height:1.55}

/* ================================================================
   Responsivo
   ================================================================ */
@media (max-width:1180px){
  :root{--pad-x:40px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .stat-grid,.grid-4{grid-template-columns:1fr 1fr}
  .stat-cell:nth-child(2n){border-right:none}
  .stat-cell:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .grid-3{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-cell:nth-child(2n){border-right:none}
  .process-cell:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .about-grid,.split-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--pad-x:22px}
  .section{padding:64px 0}.section-loose{padding:80px 0}
  .nav{display:none}
  .menu-toggle{display:flex}
  .topbar-actions .btn:not(.menu-toggle){display:none}
  .nav.is-open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:8px}
  .nav.is-open .nav-item{padding:13px 16px;font-size:15px}
  .section-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:40px}
  .grid-3,.grid-4,.stat-grid,.process-grid,.creds,.contact-grid{grid-template-columns:1fr}
  .stat-cell,.process-cell,.cred{border-right:none!important;border-bottom:1px solid var(--border)!important}
  .stat-cell:last-child,.process-cell:last-child,.cred:last-child{border-bottom:none!important}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-base{flex-direction:column;gap:16px;align-items:flex-start}
  .about-bio{padding:26px}
  .hero-tag{right:8px}
  .h-display{font-size:clamp(38px,10vw,54px)}
}