/* ==========================================================================
   LexTriarch Consulting — Sustainability & ESG Advisory ("Sustainability to Survive")
   Design system: navy / teal / gold / sage, Lato typography, tri-arch motif
   ========================================================================== */

:root{
  --navy-dark:   #091929;
  --navy-mid:    #0F2A42;
  --navy-mid-2:  #16344f;
  --teal:        #3A9696;
  --teal-dark:   #2C7373;
  --gold:        #C9A45C;
  --sage:        #82B28A;
  --offwhite:    #EEF3F4;
  --muted:       #ACC0C5;
  --white:       #FFFFFF;
  --ink:         #0B1B2B;

  --font-display: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;

  --container: 1200px;
  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(9,25,41,0.06);
  --shadow-md: 0 8px 30px rgba(9,25,41,0.10);
  --shadow-lg: 0 20px 60px rgba(9,25,41,0.18);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

img{ max-width:100%; display:block; }

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

section{ position:relative; }

/* ----------------------------- Typography ----------------------------- */

h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--navy-dark);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 900; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 900; }
h3{ font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
h4{ font-size: 1.05rem; font-weight: 700; }

p{ color:#28394A; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  display:block;
  width: 28px;
  height: 2px;
  background: var(--gold);
}
.eyebrow.on-dark{ color: var(--sage); }
.eyebrow.on-dark::before{ background: var(--gold); }

.lead{
  font-size: 1.15rem;
  color:#3D515F;
  max-width: 640px;
}

.section-head{
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ------------------------------- Buttons -------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 0.92rem;
  letter-spacing:0.04em;
  padding: 16px 34px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-primary:hover{ background:#dab873; transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-ghost{
  background: transparent;
  border-color: rgba(238,243,244,0.35);
  color: var(--offwhite);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

.btn-outline-dark{
  background: transparent;
  border-color: rgba(9,25,41,0.2);
  color: var(--navy-dark);
}
.btn-outline-dark:hover{ border-color: var(--navy-dark); background: var(--navy-dark); color: var(--offwhite); }

.btn-sm{ padding: 11px 22px; font-size:0.8rem; }

/* -------------------------------- Header -------------------------------- */

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  background: rgba(9,25,41,0.0);
  backdrop-filter: blur(0px);
  transition: all .3s ease;
  border-bottom: 1px solid rgba(238,243,244,0.08);
}
.site-header.is-scrolled{
  background: rgba(9,25,41,0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 92px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark{ width:40px; height:40px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text .brand-name{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  color: var(--offwhite);
}
.brand-text .brand-sub{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform:uppercase;
  color: var(--sage);
  margin-top:3px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:40px;
}
.main-nav a{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--offwhite);
  position:relative;
  padding: 6px 2px;
  transition: color .2s ease;
}
.main-nav a:hover{ color: var(--gold); }
.main-nav a.active{ color: var(--gold); }
.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: var(--gold);
}

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

.nav-toggle{ display:none; }

/* -------------------------------- Hero ---------------------------------- */

.hero{
  background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy-mid) 55%, var(--navy-mid-2) 100%);
  color: var(--offwhite);
  padding: 200px 0 140px;
  overflow:hidden;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 85% 18%, rgba(58,150,150,0.18), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(201,164,92,0.10), transparent 40%);
  pointer-events:none;
}
.hero .container{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items:center;
}
.hero-arches{
  position:relative;
  height: 420px;
}
.hero h1{
  color: var(--offwhite);
  margin-bottom: 26px;
}
.hero h1 .accent{ color: var(--gold); }
.hero .lead{
  color: #D7E4E7;
  font-size: 1.2rem;
  margin-bottom: 40px;
}
.hero-cta{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom: 56px; }

.hero-meta{
  display:flex;
  gap: 40px;
  flex-wrap:wrap;
  padding-top: 36px;
  border-top: 1px solid rgba(238,243,244,0.14);
}
.hero-meta .stat-num{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 1.9rem;
  color: var(--gold);
  line-height:1;
  margin-bottom:6px;
}
.hero-meta .stat-label{
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D7E4E7;
  max-width: 160px;
}

/* ---------------------------- Regulator strip --------------------------- */

.regstrip{
  background: var(--offwhite);
  border-bottom: 1px solid rgba(9,25,41,0.06);
  padding: 30px 0;
}
.regstrip .container{
  display:flex;
  align-items:center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.regstrip-label{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-mid);
  flex: 0 0 auto;
}
.regstrip-items{
  display:flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items:center;
}
.regstrip-items span{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--navy-mid);
  opacity: 0.8;
  transition: opacity .2s ease;
}
.regstrip-items span:hover{ opacity:1; color: var(--teal-dark); }

/* -------------------------------- Sections ------------------------------- */

.section{ padding: 110px 0; }
.section.bg-offwhite{ background: var(--offwhite); }
.section.bg-navy{ background: linear-gradient(160deg, var(--navy-dark), var(--navy-mid)); color: var(--offwhite); }
.section.bg-navy h2, .section.bg-navy h3, .section.bg-navy h4{ color: var(--offwhite); }
.section.bg-navy p{ color: var(--muted); }
.section.tight{ padding: 80px 0; }

/* ------------------------------ Value cards ------------------------------ */

.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }

.value-card{
  background: var(--white);
  border: 1px solid rgba(9,25,41,0.07);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: all .25s ease;
}
.value-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.value-card .num{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  display:block;
}
.value-card h3{ margin-bottom: 12px; }
.value-card p{ font-size: 0.94rem; }

/* ------------------------------- Service cards ---------------------------- */

.service-card{
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(9,25,41,0.07);
  padding: 34px;
  display:flex;
  flex-direction:column;
  gap: 16px;
  transition: all .25s ease;
  height:100%;
}
.service-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.service-card .icon{
  width:52px; height:52px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--sage));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.service-card .icon svg{ width:26px; height:26px; stroke: var(--white); fill:none; stroke-width:1.8; }
.service-card .tag{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.service-card h3{ font-size: 1.12rem; }
.service-card p{ font-size: 0.92rem; flex-grow:1; }
.service-card .card-link{
  font-family: var(--font-display);
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.04em;
  color: var(--teal-dark);
  display:inline-flex; align-items:center; gap:8px;
  margin-top:6px;
}
.service-card .card-link svg{ width:14px; height:14px; transition: transform .2s ease; }
.service-card:hover .card-link svg{ transform: translateX(4px); }

/* ------------------------------ Markets section --------------------------- */

.markets-wrap{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items:center;
}
.market-list{ display:flex; flex-direction:column; gap:0; margin-top: 30px; }
.market-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(9,25,41,0.08);
}
.market-row .name{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 1.15rem;
  color: var(--navy-dark);
}
.market-row .detail{
  font-size: 0.86rem;
  color:#46606C;
  text-align:right;
  max-width: 360px;
}

.map-graphic{
  position:relative;
  background: linear-gradient(150deg, var(--navy-dark), var(--navy-mid));
  border-radius: var(--radius);
  height: 460px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* -------------------------------- Process -------------------------------- */

.process-list{ display:flex; flex-direction:column; }
.process-item{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 36px;
  padding: 38px 0;
  border-bottom: 1px solid rgba(238,243,244,0.12);
}
.process-item:first-child{ border-top: 1px solid rgba(238,243,244,0.12); }
.process-item .pnum{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 2.6rem;
  color: var(--gold);
  opacity: 0.85;
  line-height:1;
}
.process-item h3{ color: var(--offwhite); margin-bottom:8px; }
.process-item p{ max-width: 620px; }

/* -------------------------------- Insights -------------------------------- */

.insight-card{
  background: var(--white);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(9,25,41,0.07);
  transition: all .25s ease;
  display:flex;
  flex-direction:column;
}
.insight-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.insight-thumb{
  height: 160px;
  background: linear-gradient(135deg, var(--navy-mid), var(--teal-dark));
  position:relative;
}
.insight-thumb .thumb-tag{
  position:absolute; bottom:16px; left:20px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:0.68rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--gold);
  background: rgba(9,25,41,0.55);
  padding: 6px 12px;
  border-radius: 2px;
}
.insight-body{ padding: 26px; display:flex; flex-direction:column; gap:12px; flex-grow:1; }
.insight-date{ font-size:0.78rem; color: var(--teal-dark); font-weight:700; letter-spacing:0.06em; }
.insight-body h3{ font-size: 1.05rem; }
.insight-body p{ font-size:0.9rem; flex-grow:1; }

/* --------------------------------- CTA band -------------------------------- */

.cta-band{
  background: linear-gradient(120deg, var(--teal-dark), var(--navy-mid));
  border-radius: var(--radius);
  padding: 64px 70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
  color: var(--offwhite);
}
.cta-band h2{ color: var(--offwhite); font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom:10px; max-width: 560px;}
.cta-band p{ color: var(--muted); max-width: 460px; }
.cta-band-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* -------------------------------- Footer ---------------------------------- */

.site-footer{
  background: var(--navy-dark);
  color: var(--muted);
  padding: 80px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(238,243,244,0.08);
}
.footer-brand .brand{ margin-bottom: 18px; }
.footer-brand p{ color: var(--muted); font-size:0.92rem; max-width: 340px; }
.footer-col h4{ color: var(--offwhite); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom: 22px; font-weight:700; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap: 12px; }
.footer-col a{ color: var(--muted); font-size:0.92rem; transition: color .2s ease; }
.footer-col a:hover{ color: var(--gold); }
.footer-col p{ font-size: 0.92rem; color: var(--muted); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 28px 0;
  flex-wrap:wrap;
  gap: 16px;
  font-size: 0.8rem;
  color: rgba(172,192,197,0.9);
}
.footer-bottom .social{ display:flex; gap:18px; }
.footer-bottom .social a{ color: var(--muted); }
.footer-bottom .social a:hover{ color: var(--gold); }

/* -------------------------------- Page header (sub pages) ------------------ */

.page-hero{
  background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
  color: var(--offwhite);
  padding: 200px 0 90px;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 90% 20%, rgba(58,150,150,0.18), transparent 45%);
  pointer-events:none;
}
.page-hero .container{ position:relative; z-index:2; max-width: 820px; }
.page-hero h1{ color: var(--offwhite); margin-bottom: 20px; }
.page-hero .lead{ color: var(--muted); }
.breadcrumb{
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--sage);
  font-weight:700;
  margin-bottom: 22px;
}
.breadcrumb a{ color: var(--sage); }
.breadcrumb a:hover{ color: var(--gold); }

/* ---------------------------------- Misc ----------------------------------- */

.divider{ height:1px; background: rgba(9,25,41,0.08); margin: 60px 0; }

.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 22px; }
.pill{
  font-family: var(--font-display);
  font-weight:700;
  font-size:0.74rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(58,150,150,0.1);
  color: var(--teal-dark);
}

/* -------------------------------- Team cards ------------------------------- */

.team-card{
  background: var(--white);
  border: 1px solid rgba(9,25,41,0.07);
  border-radius: var(--radius);
  padding: 32px;
  transition: all .25s ease;
}
.team-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.team-avatar{
  width:56px; height:56px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--sage));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:900; font-size:1.05rem; color: var(--white);
  margin-bottom: 20px;
}
.team-card h3{ margin-bottom: 4px; }
.team-role{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--teal-dark);
  margin-bottom: 14px;
}
.team-card p{ font-size: 0.92rem; }

/* -------------------------------- Check list -------------------------------- */

.check-list{ list-style:none; display:flex; flex-direction:column; gap: 16px; margin-top: 26px; }
.check-list li{
  display:flex; gap:14px; align-items:flex-start;
  font-size: 0.97rem; color:#28394A;
}
.check-list li::before{
  content:"\2713";
  flex-shrink:0;
  width:24px; height:24px;
  margin-top:1px;
  border-radius:50%;
  background: var(--sage);
  color: var(--white);
  font-size:0.7rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.check-list.on-dark li{ color: var(--offwhite); }

/* -------------------------------- Pillar hero icon --------------------------- */

.pillar-icon{
  width:64px; height:64px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--sage));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 24px;
}
.pillar-icon svg{ width:32px; height:32px; stroke: var(--white); fill:none; stroke-width:1.6; }

.framework-block{
  background: var(--white);
  border: 1px solid rgba(9,25,41,0.07);
  border-radius: var(--radius);
  padding: 30px 34px;
  margin-top: 14px;
}
.framework-block h4{ margin-bottom: 14px; }
.framework-block p{ font-size:0.94rem; margin:0; }

/* -------------------------------- Extensibility / bespoke card --------------- */

.service-card.bespoke{
  background: linear-gradient(150deg, var(--navy-dark), var(--navy-mid));
  border: none;
  color: var(--offwhite);
}
.service-card.bespoke h3{ color: var(--offwhite); }
.service-card.bespoke p{ color: var(--muted); }
.service-card.bespoke .tag{ color: var(--sage); }
.service-card.bespoke .card-link{ color: var(--gold); }
.service-card.bespoke .icon{ background: linear-gradient(135deg, var(--gold), var(--sage)); }

/* -------------------------------- Forms -------------------------------------- */

.form-card{
  background: var(--white);
  border: 1px solid rgba(9,25,41,0.07);
  border-radius: var(--radius);
  padding: 44px;
}
.form-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group.full{ grid-column: 1 / -1; }
.form-group label{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-mid);
}
.form-group input,
.form-group select,
.form-group textarea{
  font-family: var(--font-body);
  font-size: 0.96rem;
  padding: 14px 16px;
  border: 1px solid rgba(9,25,41,0.16);
  border-radius: 4px;
  background: var(--offwhite);
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}
.form-group textarea{ resize: vertical; min-height: 140px; }
.form-actions{ margin-top: 30px; display:flex; align-items:center; gap: 22px; flex-wrap:wrap; }
.form-note{ font-size: 0.85rem; color: #46606C; }

.confidential-note{
  display:flex; gap:14px; align-items:flex-start;
  background: var(--offwhite);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  border-radius: 4px;
  margin-top: 30px;
}
.confidential-note p{ font-size:0.92rem; margin:0; }

/* -------------------------------- Contact info grid --------------------------- */

.contact-info{ display:flex; flex-direction:column; gap: 30px; }
.contact-info-item{ display:flex; gap:18px; align-items:flex-start; }
.contact-info-item .icon{
  width:46px; height:46px; flex-shrink:0;
  border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--sage));
  display:flex; align-items:center; justify-content:center;
}
.contact-info-item .icon svg{ width:22px; height:22px; stroke:var(--white); fill:none; stroke-width:1.8; }
.contact-info-item h4{ margin-bottom: 6px; }
.contact-info-item p{ font-size: 0.94rem; }

/* -------------------------------- Filter pills row ---------------------------- */

.filter-row{ display:flex; gap: 12px; flex-wrap:wrap; margin-bottom: 50px; }
.filter-row .pill{
  cursor:default;
  background: var(--white);
  border: 1px solid rgba(9,25,41,0.1);
  color: var(--navy-mid);
}
.filter-row .pill.active{
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--gold);
}

/* ----------------------------------- Responsive ----------------------------------- */

@media (max-width: 1024px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .markets-wrap{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .hero .container{ grid-template-columns: 1fr; }
  .hero-arches{ display:none; }
}

@media (max-width: 760px){
  .main-nav{ display:none; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .section{ padding: 70px 0; }
  .hero{ padding: 150px 0 90px; }
  .cta-band{ padding: 40px 28px; flex-direction:column; align-items:flex-start; }
  .process-item{ grid-template-columns: 1fr; gap:12px; }
  .container{ padding: 0 20px; }
  .regstrip .container{ flex-direction:column; align-items:flex-start; gap:18px; }
  .form-grid{ grid-template-columns: 1fr; }
  .form-card{ padding: 28px; }
}