:root{--ink:#222;--panel:rgba(255,255,255,.92);--inkInv:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.5 Helvetica,Arial,sans-serif;color:var(--ink);
  background:url('../img/wallpaper.png') center/cover fixed no-repeat;}
a{color:inherit;text-decoration:none}

header.top{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(140%) blur(4px);
  background:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.06)}

.bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:8px 16px}
.logo img{height:34px}

nav ul{list-style:none;display:flex;gap:12px;margin:0;padding:0}
nav a{font-size:13px;padding:6px 8px;border-radius:8px}
nav a:hover{background:rgba(0,0,0,.06)}
.hamburger{display:none;flex-direction:column;gap:3px;cursor:pointer}
.hamburger span{width:22px;height:2px;background:#111;display:block}
.content{max-width:1180px;margin:18px auto;padding:0 16px}
.block{background:var(--panel);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;margin:0 0 14px 0}
.title{margin:0 0 10px;font-size:20px;font-weight:700}
.subtitle{margin:10px 0 6px;font-size:16px;font-weight:700}
/* Home mosaic */
.home-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn{background:#111;color:#fff;padding:10px 14px;border-radius:10px}
.home-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:16px auto;padding:0 16px}
.tile{position:relative;min-height:160px;background:#fff;border-radius:14px;padding:16px;overflow:hidden;transition:transform .25s;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(0,0,0,.08)}
.tile:hover{transform:scale(1.02)}
.tile h2{margin:0 0 6px;font-size:15px}
.tile p{margin:0;font-size:13px}
.glyph{position:absolute;top:10px;right:12px;font-size:18px;z-index:3;pointer-events:none}
.tile.dark{background:#111;color:#fff}
.tile.team{color:#fff;background:#000 url('../img/team-photo.jpg') center/cover no-repeat}
.tile.team::after{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.45);transition:background .2s}
.tile.team:hover::after{background:rgba(0,0,0,.62)}
.tile.team *{position:relative;z-index:2;color:#fff}
/* Explicit grid placement for desktop */
.tile.btrans{grid-column:1;grid-row:1}
.tile.ethos{grid-column:2;grid-row:1}
.tile.services{grid-column:3;grid-row:1}
.tile.stories{grid-column:4;grid-row:1}
.tile.pubs{grid-column:2;grid-row:2}
.tile.team{grid-column:3/5;grid-row:2/4;min-height:340px}
.tile.cases{grid-column:1/3;grid-row:3}
footer{margin-top:20px;text-align:center;padding:10px;background:rgba(255,255,255,.92)}
/* Responsive stack */
@media (max-width:1000px){
  .home-mosaic{grid-template-columns:repeat(3,1fr)}
  .tile.team{grid-column:2/4;grid-row:auto;min-height:280px}
  .tile.cases{grid-column:1/3}
}
@media (max-width:900px){
  nav ul{display:none;position:absolute;left:0;right:0;top:56px;background:rgba(255,255,255,.98);flex-direction:column;gap:0;border-bottom:1px solid rgba(0,0,0,.06)}
  nav ul.show{display:flex}
  .hamburger{display:flex}
  .home-mosaic{grid-template-columns:repeat(2,1fr)}
  .tile{min-height:140px;padding:14px}
  .tile.team{min-height:220px}
}
@media (max-width:560px){
  .home-mosaic{grid-template-columns:1fr}
  .tile{min-height:130px}
  .logo img{height:30px}
}
/* === Contact form layout (iter-01) === */
form[name="contact"], form[action*="contact"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0;
}

form[name="contact"] label {
  font-weight: 600;
  font-size: 14px;
}

form[name="contact"] input[type="text"],
form[name="contact"] input[type="email"],
form[name="contact"] input[type="tel"],
form[name="contact"] input[type="url"],
form[name="contact"] select,
form[name="contact"] textarea {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #fff;
  font: 14px/1.45 Helvetica, Arial, sans-serif;
}

form[name="contact"] textarea {
  min-height: 160px;
  resize: vertical;
}

form[name="contact"] button[type="submit"],
form[name="contact"] input[type="submit"] {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #111;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
}

form[name="contact"] button[type="submit"]:hover,
form[name="contact"] input[type="submit"]:hover {
  filter: brightness(1.05);
}

/* Group two fields side-by-side on wider screens */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .form-row.two {
    grid-template-columns: 1fr 1fr;
  }
}

/* Keep form nicely spaced inside your block cards */
.block form[name="contact"] { margin-top: 6px; }


/* === iter-02: modernized internal-page styling (v11 look) === */

/* Type scale & rhythm */
.content { max-width: 1180px; margin: 18px auto; padding: 0 16px }
.content .block { margin: 0 0 16px 0 }
h1.title, .content > .block h1 { font-size: 26px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em }
.subtitle, h2.subtitle, .content h2 { font-size: 18px; font-weight: 700; margin: 8px 0 10px }
.content p { max-width: 75ch; margin: 8px 0 }

/* Breadcrumb bar */
.content > .block:first-child { 
  padding: 10px 14px; 
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}

/* Card treatment for nested blocks (e.g., services/principles/publications items) */
.block .block {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.block .block:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}
.block .block h3, .block .block h2, .block .block .subtitle { margin-top: 0 }

/* Simple responsive grids when multiple inner cards are siblings */
.block { --gap:16px }
.block:has(.block + .block) { }
@media (min-width: 860px) {
  .block:has(.block + .block) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
  }
  /* Two across if only two cards fit better */
  .block:has(.block:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 560px) and (max-width: 859px) {
  .block:has(.block + .block) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }
}

/* Publications: align download button to the right; beautify buttons */
.block .block a[download] {
  float: right;
  margin-left: 12px;
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #111;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.block .block a[download]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* “Interested? Contact us.” callout — center, clean */
.content > .block:last-of-type {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 12px;
  text-align: center;
}
.content > .block:last-of-type a { color: #fff; text-decoration: underline }

/* Lists inside cards read better */
.block .block ul, .block .block ol { margin: 8px 0 0 18px }
.block .block li { margin: 6px 0 }

/* Soften outer cards (top-level .block) to match v11 glass look */
.block {
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

/* Tighten vertical whitespace between stacked sections */
.content .block + .block { margin-top: 14px }

/* Utilities you can reuse later without HTML changes */
.lead { font-size: 17px; line-height: 1.55; opacity: .9 }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; opacity: .75; margin-bottom: 4px }

/* === iter-02.1 components === */

/* Buttons */
.btn { display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none }
.btn.primary { background:#111; color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.18); }
.btn.primary:hover { filter:brightness(1.06) }

/* Home hero (white card with CTA button aligned right) */
.cta-hero { 
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08); 
  border-radius:14px; padding:14px 16px; 
}

/* IMPORTANT: don’t force the last .block to be black anymore.
   We’ll only darken the contact band when we explicitly add .contact-cta */
.content > .block:last-of-type { 
  background: rgba(255,255,255,.90); color: inherit; border: 1px solid rgba(0,0,0,.06);
}
.content > .block.contact-cta {
  background:#111; color:#fff; border:none; text-align:center; border-radius:12px;
}
.content > .block.contact-cta a { color:#fff; text-decoration:underline }

/* Card style for nested blocks (v11 look, already present but reinforced here) */
.block .block {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.block .block:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); border-color:rgba(0,0,0,.12) }

/* Auto-grid for groups of inner cards */
.block { --gap:16px }
@supports(selector(:has(*))){
  @media (min-width: 860px){
    .block:has(.block + .block){ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
    .block.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  }
  @media (min-width:560px) and (max-width:859px){
    .block:has(.block + .block){ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap) }
  }
}

/* Download button style inside publication cards (align right) */
.pub-actions { display:flex; gap:10px; justify-content:flex-end; align-items:center }
a[download].btn.primary { white-space:nowrap }

/* === iter-03: Team page + LinkedIn button === */

/* LinkedIn button */
a.linkedin-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: #0a66c2;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  margin-top: 8px;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
a.linkedin-btn:hover { background:#004182; box-shadow:0 3px 6px rgba(0,0,0,.15); transform: translateY(-1px); }

/* Team grid: 2 columns desktop, 1 column mobile */
.team-grid { display:flex; flex-wrap:wrap; gap:16px; }
.team-card { flex:1 1 calc(50% - 8px); max-width:calc(50% - 8px); text-align:center; }
.team-card p {
  line-height: 1.5;
  font-size: 0.95rem;
  max-width: 95%;
  min-height: 550px;
  margin: 0 auto;
}
@media (max-width: 992px){
  .team-card {
  flex: 1 1 calc(25% - 20px)%; /* instead of 1 1 30% or similar */
  max-width: calc(25% - 20px); /* you can raise this to ~320px */
  margin: 0 10px;   /* reduce side margin */
}
}

/* Card internals */
.team-photo { width:160px; height:160px; object-fit:cover; border-radius:50%; margin-bottom:12px; }
.team-name { margin:0 0 4px; font-size:18px; font-weight:700; }
.team-role { margin:0 0 8px; font-size:14px; opacity:.85; }
/* iter-03.1: team bios */
.team-bio { text-align:left; margin-top:8px; font-size:14px; line-height:1.55 }
.team-bio p { margin:6px 0 }

/* === iter-03.2: Team layout fixes (width, gaps, overrides) === */

/* Force flex layout and neutralize any auto-grid */
.team-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  grid-template-columns: none !important; /* in case grid was applied */
}

/* Desktop: 4-up; Tablet: 2-up; Mobile: 1-up */
.team-card { 
  text-align: center;
  flex: 1 1 100%;
  max-width: 100%;
}
@media (min-width: 720px) {
  .team-card { 
    flex: 1 1 calc(50% - 24px);
    max-width: calc(50% - 24px);
  }
}
@media (min-width: 1100px) {
  .team-card { 
    flex: 1 1 calc(25% - 24px);
    max-width: calc(25% - 24px);
  }
}

/* Paragraphs: remove the accidental huge min-height and narrow width */
.team-card p {
  font-size: 14px;
  line-height: 1.55;
  max-width: none;
  min-height: 0;            /* overrides previous 550px */
  margin: 0 auto;
}

/* Keep bios left-aligned and comfortably wide */
.team-bio { 
  text-align: left; 
  margin: 12px auto 0; 
  max-width: 60ch; 
}

/* === iter-03.3: card alignment + home adaptive === */

/* 1) Internal cards: remove child margins that cause the first tile to sit higher */
.block:has(.block + .block) {
  align-items: stretch;               /* force equal top alignment */
}
.block:has(.block + .block) > .block {
  margin: 0;                          /* kill incidental outer margins on children */
}
.block .block > :first-child { margin-top: 0; }     /* no extra top margin on first element */
.block .block > :last-child  { margin-bottom: 0; }  /* no extra bottom margin */

/* Safety: headings inside cards never push cards down */
.block .block h1,
.block .block h2,
.block .block h3,
.block .block .subtitle { margin-top: 0; }

/* 2) Home: clean adaptive grid, no manual offsets on smaller screens */
@media (max-width: 1000px) {
  .home-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  /* reset any explicit desktop placement */
  .home-mosaic .tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* keep big items spanning full width */
  .home-mosaic .tile.team { grid-column: 1 / -1; min-height: 280px; }
  .home-mosaic .tile.cases { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .home-mosaic {
    grid-template-columns: 1fr;
  }
  .home-mosaic .tile { min-height: 130px; }
  .home-mosaic .tile.team { min-height: 220px; }
}

/* Optional: a little extra consistency for card spacing on all pages */
.block { --gap:16px }
.content .block + .block { margin-top: 14px; }

/* === iter-04: Cards grid, blog list, and vertical video embed === */

/* Reusable grid for cards (auto-responsive) */
.cards-grid { --gap:16px; display:grid; gap:var(--gap); }
@media (min-width: 640px){ .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px){ .cards-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Case/Story cards */
.card { background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.08); padding:16px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform:translateY(-2px); border-color:rgba(0,0,0,.12); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.card h3 { margin:0 0 6px; font-size:18px }
.card .meta { font-size:12px; opacity:.7; margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em }
.badge { display:inline-block; padding:3px 8px; font-size:12px; border-radius:999px; background:#111; color:#fff; }

/* Card footer actions */
.card .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px }
a.btn { display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none }
a.btn.primary{ background:#111; color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.18) }
a.btn.primary:hover{ filter:brightness(1.05) }

/* Blog list spacing */
.blog-list .card p { margin:6px 0 0 }

/* Detail section blocks */
.case-detail, .post-detail { background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px }
.case-detail h2, .post-detail h2 { margin-top:0 }

/* Ethos: two-column layout with vertical video */
.ethos-grid { display:grid; gap:16px; align-items:start }
@media (min-width: 980px){ .ethos-grid { grid-template-columns: 1fr 380px; } } /* text + video column */
.video-frame { aspect-ratio: 9 / 16; width:100%; background:#000; border-radius:16px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.25); }
.video-frame video { width:100%; height:100%; object-fit:cover; display:block }
.video-caption{ font-size:12px; opacity:.75; margin-top:6px; text-align:center }

/* Minor: normalize inner-card top/bottom spacing so first column aligns */
.block .card > :first-child{ margin-top:0 } .block .card > :last-child{ margin-bottom:0 }

/* === iter-04.1: mobile header & menu sizing === */
header.top .bar { justify-content: space-between; }
.hamburger { margin-left: auto; }

@media (max-width: 900px){
  nav ul { right: 0; left: 0; }
  nav ul.show a, nav ul.show li a {
    font-size: 16px;      /* was small on iPhone */
    padding: 12px 16px;
  }
  .hamburger span { width: 24px; height: 2px; }
  .logo img { height: 32px; }
}

/* === iter-04.1: background fix for mobile (no seams) === */
@media (max-width: 1024px){
  html, body { min-height: 100%; }
  body{
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}
/* === iter-04.2: Case Studies typography & spacing (no global side effects) === */
.case-detail {
  max-width: 1100px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px;
}

.case-detail h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.case-detail h3 { margin: 16px 0 6px; font-size: 18px; line-height: 1.35; }
.case-detail p  { margin: 8px 0; }
.case-detail ul { margin: 8px 0 8px 22px; padding: 0; }
.case-detail li { margin: 4px 0; }

.case-detail blockquote {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 4px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.04);
  border-radius: 8px;
}

/* optional: downloads form cues */
main .block:first-of-type + .block { /* the intro block */
  border: 1px solid rgba(0,0,0,.06);
}

/* === downloads form styling (match contact form) === */
form[name="contact"],
form[name="pubs-access"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0;
}

form[name="contact"] label,
form[name="pubs-access"] label {
  font-weight: 600;
  font-size: 14px;
}

form[name="contact"] input[type="text"],
form[name="contact"] input[type="email"],
form[name="contact"] input[type="tel"],
form[name="contact"] input[type="url"],
form[name="contact"] select,
form[name="contact"] textarea,
form[name="pubs-access"] input[type="text"],
form[name="pubs-access"] input[type="email"],
form[name="pubs-access"] input[type="tel"],
form[name="pubs-access"] input[type="url"],
form[name="pubs-access"] select,
form[name="pubs-access"] textarea {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #fff;
  font: 14px/1.45 Helvetica, Arial, sans-serif;
}

form[name="contact"] textarea,
form[name="pubs-access"] textarea {
  min-height: 160px;
  resize: vertical;
}

form[name="contact"] button[type="submit"],
form[name="contact"] input[type="submit"],
form[name="pubs-access"] button[type="submit"],
form[name="pubs-access"] input[type="submit"] {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #111;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
}

form[name="contact"] button[type="submit"]:hover,
form[name="contact"] input[type="submit"]:hover,
form[name="pubs-access"] button[type="submit"]:hover,
form[name="pubs-access"] input[type="submit"]:hover {
  filter: brightness(1.05);
}

/* shared row helper */
.form-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .form-row.two { grid-template-columns: 1fr 1fr; } }

/* make the tiny helper line readable */
.block .form-helper {
  margin: 8px 0 0;
  font-size: 12px;
  opacity: .8;
}

/* === downloads form v2 (left-aligned, tidy) === */
.downloads-form { max-width: 880px; }

.downloads-form form[name="pubs-access"]{
  display: grid;
  gap: 14px;
  margin: 8px 0;
}

.form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 860px){
  .form-grid.two{ grid-template-columns: 1fr 1fr; }
}

.form-field label{ display:block; font-weight:600; font-size:14px; margin:0 0 6px; }
.form-field input,
.form-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#fff;
  font:14px/1.45 Helvetica, Arial, sans-serif;
}
.form-field textarea{ min-height:160px; resize:vertical; }

.consent-row{ display:flex; align-items:center; gap:8px; }
.actions{ display:flex; gap:10px; }

/* === iter-width-normalize: make all main parents match the breadcrumb/container width === */
/* Use the .content container width everywhere; kill per-section narrow widths */
.case-detail { max-width: none; }          /* was 1100px */
.post-detail { max-width: none; }
.downloads-form { max-width: none; }       /* was 880px */

/* Make sure these parent blocks align flush with the breadcrumb edges */
.block.cards-grid,
.case-detail,
.post-detail,
.ethos-grid,
.downloads-form {
  margin-left: 0;
  margin-right: 0;
  /* they already sit inside .content, which sets the true width */
}

/* Optional safety: if any page introduced a wrapper with its own width, neutralize it */
.cs-container, .downloads-wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* --- Fix for "+" sign alignment in tiles --- */
.tile {
  position: relative; /* make sure the tile itself is the reference */
}

.tile .plus {
  position: absolute;
  top: 12px;    /* adjust spacing as needed */
  right: 12px;  /* adjust spacing as needed */
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

/* Contact/Downloads shared form layout */
form.contact-form,
form[name="pubs-access"] { display: block; }

.form-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 12px; 
  margin: 8px 0 12px; 
}

.form-grid.two { 
  grid-template-columns: 1fr 1fr; 
  gap: 12px; 
}

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #fff;
  font: 14px/1.45 Helvetica, Arial, sans-serif;
}

.form-field textarea { min-height: 160px; resize: vertical; }

.actions { margin-top: 6px; }

.actions button {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #111;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.actions button:hover { filter: brightness(1.05); }

/* Mobile stack */
@media (max-width: 720px){
  .form-grid.two { grid-template-columns: 1fr; }
}