/* Composa marketing site. The colours are the product's own: brand navy and
   blue from the portal, orange from the logo, and the four step-family
   colours from the workflow editor. No web fonts are loaded - nothing on the
   page is fetched from another site. */
:root {
  --navy: #14234a;
  --navy-2: #1c2f5e;
  --blue: #1a5fd6;
  --blue-dark: #134bb0;
  --blue-tint: #eaf1fd;
  --orange: #f4661a;
  --orange-2: #fb8a2a;
  --ink: #17202e;
  --ink-soft: #4a5568;
  --muted: #6b7686;
  --line: #e2e7ef;
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --ok: #2f7d4f;
  --bad: #c0392b;
  --f-connect: #1a5fd6;
  --f-shape: #7c3aed;
  --f-flow: #0d9488;
  --f-look: #64748b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 26, 46, 0.05), 0 8px 28px rgba(16, 26, 46, 0.07);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 0.6rem; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 750; }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 650; }
p { margin: 0 0 1rem; }
code { font-size: 0.9em; background: var(--bg-soft); padding: 0 0.25em; border-radius: 4px; }

.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.center { text-align: center; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.eyebrow {
  color: var(--blue); font-weight: 650; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 0.6rem;
}
.lead { font-size: 1.1rem; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.35rem; border-radius: 10px; border: 1px solid transparent;
  font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(26, 95, 214, 0.25); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-small { padding: 0.55rem 1rem; font-size: 0.92rem; box-shadow: none; }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid rgba(26, 95, 214, 0.4); outline-offset: 2px;
}
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s;
}
.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(16, 26, 46, 0.05); }
.top-row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.brand span { color: var(--navy); font-weight: 650; font-size: 1.4rem; letter-spacing: -0.01em; position: relative; top: -1px; }
.brand-light span { color: #fff; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--blue); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; width: 42px; height: 42px; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav {
    position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 0.5rem 16px 1rem;
    box-shadow: 0 12px 24px rgba(16, 26, 46, 0.08); display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 0.9rem; }
}

/* ---------- hero ----------
   Warm and photographic: a picture of people on the right (assets/img/hero.jpg)
   fading into cream light behind the words. Without the picture the same
   place is a soft glow, so it still looks finished. */
.hero {
  position: relative; overflow: hidden; background: #fbf6f0;
  min-height: clamp(520px, 72vh, 700px); display: flex; align-items: center;
}
.hero {
  /* Where the text column starts: the photograph and the veil are placed
     from here, not from the edge of the window. */
  --edge: max(16px, calc((100vw - 1180px) / 2));
}
/* Three layers. Underneath, the same photograph blurred soft across the whole
   width, so its colour and light run on to the left edge on any screen. Over
   it, on the right, the photograph itself, sharp, fading in from the left.
   Over both, a cream veil behind the words only. */
.hero-media {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(520px 420px at 70% 45%, rgba(251, 138, 42, 0.30), transparent 70%),
    radial-gradient(520px 480px at 30% 75%, rgba(26, 95, 214, 0.20), transparent 70%),
    linear-gradient(135deg, #fde7d3, #eef3fd);
}
.hero-media::before {
  content: ""; position: absolute; inset: -60px;
  background: url("../img/hero.jpg") 30% 40% / cover no-repeat;
  /* Full strength: a paler layer here showed as a light band where the
     sharp photograph starts. The veil does the lightening. */
  filter: blur(34px) saturate(1.1);
}
.hero-media::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(var(--edge) + 300px);
  /* Positioned for this photograph: the two people clear of the words. */
  background: url("../img/hero.jpg") 75% 35% / cover no-repeat;
  /* Eased, not straight: a straight ramp meeting full strength leaves a
     corner the eye sees as a line. */
  --fade-in: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.06) 60px, rgba(0, 0, 0, 0.22) 130px,
    rgba(0, 0, 0, 0.5) 210px, rgba(0, 0, 0, 0.78) 290px, rgba(0, 0, 0, 0.94) 360px, #000 420px);
  -webkit-mask-image: var(--fade-in);
          mask-image: var(--fade-in);
}
.hero-glow {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    /* As light behind the words as the lightest part of the photograph
       beside them, so the brightness only ever falls from the text to the
       people: anything lighter in between reads as a white line. */
    rgba(251, 246, 240, 0.74) 0,
    rgba(251, 246, 240, 0.93) calc(var(--edge) - 40px),
    rgba(251, 246, 240, 0.93) calc(var(--edge) + 420px),
    rgba(251, 246, 240, 0.88) calc(var(--edge) + 480px),
    rgba(251, 246, 240, 0.74) calc(var(--edge) + 540px),
    rgba(251, 246, 240, 0.52) calc(var(--edge) + 600px),
    rgba(251, 246, 240, 0.3) calc(var(--edge) + 660px),
    rgba(251, 246, 240, 0.13) calc(var(--edge) + 720px),
    rgba(251, 246, 240, 0.03) calc(var(--edge) + 780px),
    rgba(251, 246, 240, 0) calc(var(--edge) + 840px));
}
.hero-inner { position: relative; z-index: 1; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.hero-copy { max-width: 560px; }
.hero-copy h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 1.2rem; }
.hero-copy .lead { font-size: 1.15rem; }
.hero .eyebrow { color: #b4501a; letter-spacing: 0.14em; }
.hl { color: var(--blue); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }
.btn-warm { background: linear-gradient(135deg, var(--orange-2), var(--orange)); color: #fff; box-shadow: 0 8px 20px rgba(244, 102, 26, 0.28); }
.btn-warm:hover { background: linear-gradient(135deg, #f47d20, #e0560f); }
.btn svg, .link-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-card {
  position: absolute; z-index: 2; right: clamp(16px, 5vw, 70px); bottom: clamp(20px, 6vh, 56px);
  display: flex; align-items: center; gap: 1.1rem; padding: 0.85rem 1.2rem;
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; box-shadow: 0 18px 40px rgba(16, 26, 46, 0.16);
}
.hc-ring { width: 40px; height: 40px; border-radius: 50%; background: #e3f2e8; display: grid; place-items: center; }
.hc-ring svg { width: 20px; height: 20px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hc-text, .hc-stat { display: grid; line-height: 1.2; }
.hc-text small, .hc-stat small { color: var(--muted); font-size: 0.75rem; }
.hc-text b { color: var(--ok); font-size: 1.1rem; }
.hc-stat { border-left: 1px solid var(--line); padding-left: 1.1rem; }
.hc-stat b { color: var(--navy); font-size: 1.1rem; }
@media (max-width: 900px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  /* On a narrow screen the picture goes underneath the words, full width. */
  .hero-media::before { display: none; }
  .hero-media::after { left: 0; -webkit-mask-image: none; mask-image: none; }
  .hero-media { position: relative; width: 100%; height: 300px; order: 2;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
  .hero-glow { display: none; }
  .hero-inner { padding-bottom: 1rem; }
  .hero-card { left: 16px; right: auto; bottom: 16px; gap: 0.8rem; padding: 0.7rem 0.9rem; }
  .hc-stat { padding-left: 0.8rem; }
}
.shot { margin: 0; }
.shot img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(16, 26, 46, 0.16), 0 4px 12px rgba(16, 26, 46, 0.06); background: #fff; }
.shot figcaption { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 0.9rem; }

/* four reasons under the hero */
.pillars { background: #fff; border-bottom: 1px solid var(--line); padding: clamp(2.2rem, 4vw, 3rem) 0; }
.pillars .grid4 { gap: 0; }
.pillar { padding: 0.4rem clamp(1rem, 2vw, 1.8rem); border-left: 1px solid var(--line); }
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar svg { width: 34px; height: 34px; fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.8rem; }
.pillar h3 { font-size: 1.12rem; }
.pillar p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
@media (max-width: 1000px) {
  .pillars .grid4 { gap: 1.6rem 0; }
  .pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) { .pillar { border-left: 0; padding-left: 0; } }

/* the product, in a warm band */
.in-action {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    radial-gradient(700px 380px at 90% 20%, rgba(26, 95, 214, 0.10), transparent 70%),
    radial-gradient(600px 360px at 0% 90%, rgba(251, 138, 42, 0.12), transparent 70%),
    #fbf6f0;
}
.in-action-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 980px) { .in-action-grid { grid-template-columns: 1fr; } }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; color: #c2551a; font-weight: 650; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- bands ---------- */
.band { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.band-soft { background: var(--bg-soft); }
.band-dark {
  background: radial-gradient(800px 400px at 50% 0%, rgba(26, 95, 214, 0.35), transparent 70%), var(--navy);
  color: #d7deeb;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--orange-2); }
.band-dark .lead { color: #c3cde0; }
.band > .wrap > h2.center { max-width: 820px; margin-left: auto; margin-right: auto; }

.grid2, .grid3, .grid4, .grid5 { display: grid; gap: 1.2rem; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid4, .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid2, .grid3, .grid4, .grid5 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }

/* problem */
.problems { margin-top: 2rem; }
.problem { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 12px; padding: 1.2rem 1.25rem; }
.problem b { display: block; color: var(--navy); margin-bottom: 0.3rem; }
.problem span { color: var(--ink-soft); font-size: 0.95rem; }
.answer { text-align: center; margin: 2rem 0 0; font-size: 1.12rem; color: var(--ink-soft); }
.answer b { color: var(--navy); }

/* how it works */
.flow-diagram { display: flex; align-items: center; justify-content: center; gap: 0; margin: 2.2rem 0 2.4rem; flex-wrap: wrap; row-gap: 0.8rem; }
.flow-diagram i { width: 56px; height: 2px; background: var(--blue); position: relative; }
.flow-diagram i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--blue); border-right: 0; }
.fd-node { background: #fff; border: 1.5px dashed #b8c3d6; border-radius: 12px; padding: 0.7rem 1.1rem; font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.fd-steps { border-style: solid; border-color: var(--line); box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 0.35rem; }
.fd-steps em { width: 16px; height: 16px; border-radius: 5px; border: 2px solid; display: inline-block; }
.fd-steps em:last-of-type { margin-right: 0.45rem; }
.fd-steps .c1 { border-color: var(--f-connect); } .fd-steps .c2 { border-color: var(--f-shape); }
.fd-steps .c3 { border-color: var(--f-flow); } .fd-steps .c4 { border-color: var(--f-look); }
@media (max-width: 640px) { .flow-diagram i { width: 28px; } }
.concept { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.25rem; box-shadow: var(--shadow); }
.concept svg, .feature svg {
  width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--blue-tint);
  fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.9rem;
}
.concept p, .feature p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* building blocks */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split-rev { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
.split-blocks { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); margin-top: 2.2rem; align-items: start; }
@media (max-width: 980px) { .split, .split-rev, .split-blocks { grid-template-columns: 1fr; } .split-rev .data-visual { order: 2; } }
.families { display: grid; gap: 0.6rem; margin: 0 0 1rem; }
.family { display: grid; gap: 0.1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem 0.8rem 3.1rem; position: relative; }
.family::before { content: ""; position: absolute; left: 1rem; top: 0.95rem; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--fam); background: #fff; }
.family b { color: var(--navy); font-size: 0.97rem; }
.family span { color: var(--ink-soft); font-size: 0.9rem; }
.f-connect { --fam: var(--f-connect); } .f-shape { --fam: var(--f-shape); } .f-flow { --fam: var(--f-flow); } .f-look { --fam: var(--f-look); }
.example { background: var(--blue-tint); border-radius: 12px; padding: 1rem 1.2rem; color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.example b { color: var(--navy); }

/* wizard */
.steps4 { list-style: none; padding: 0; margin: 2.6rem 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.steps4 li { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); padding: 1.3rem 1.2rem; font-size: 0.95rem; color: #c3cde0; }
.steps4 li span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--orange-2), var(--orange)); color: #fff; font-weight: 700; margin-bottom: 0.7rem; }
.steps4 li b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 0.25rem; }
@media (max-width: 900px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } }
.points-dark > div { padding: 0.4rem 0.2rem; }
.points-dark p { color: #c3cde0; font-size: 0.97rem; margin: 0; }
.quote { text-align: center; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: #fff; font-weight: 500; max-width: 760px; margin: 2.8rem auto 0; font-style: italic; }
.why .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--orange-2); color: var(--orange-2); font-weight: 700; margin-bottom: 0.8rem; }
.why > div { text-align: center; padding: 0.5rem 1rem; }

/* lists with ticks */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.ticks li { position: relative; padding-left: 1.9rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.2rem; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5fd6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks li b { color: var(--navy); }
.cols-cards { margin-top: 2.2rem; }
.cols-cards h3 { margin-bottom: 1rem; }

/* features */
.features { margin-top: 2.2rem; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.35rem; box-shadow: var(--shadow); }

/* data */
.data-visual { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 1.4rem; display: grid; gap: 0.6rem; }
.dv-row { display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; }
.dv-line { color: var(--navy); font-weight: 600; }
.dv-tag { font-size: 0.78rem; font-weight: 650; border-radius: 999px; padding: 0.2rem 0.65rem; min-width: 84px; text-align: center; }
.dv-tag.enc { background: var(--blue-tint); color: var(--blue); }
.dv-tag.none { background: #fdeee4; color: #b4501a; }
.dv-search { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.4rem; background: var(--bg-soft); border-radius: 10px; padding: 0.75rem 0.9rem; color: var(--ink-soft); font-size: 0.93rem; }
.dv-search svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }

/* connections */
.connects { margin-top: 2.2rem; }
.connect { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.connect b { display: block; color: var(--navy); margin-bottom: 0.2rem; }
.connect span { color: var(--ink-soft); font-size: 0.93rem; }
.foundation { text-align: center; color: var(--ink-soft); margin: 2rem 0 0; }
.foundation b { color: var(--navy); }

/* pricing */
.pricing { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.price-card { border-top: 4px solid var(--blue); }
.price-card p { color: var(--ink-soft); }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1rem; padding: clamp(1.3rem, 3vw, 2rem); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 0.35rem; font-size: 0.92rem; font-weight: 600; color: var(--navy); }
.form .req { color: var(--orange); }
.form .opt { color: var(--muted); font-weight: 400; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  font: 400 1rem/1.4 var(--font); color: var(--ink); background: #fff;
  border: 1px solid #cdd5e2; border-radius: 9px; padding: 0.7rem 0.8rem; width: 100%;
}
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: 3px solid rgba(26, 95, 214, 0.18); outline-offset: 0; }
.form .invalid { border-color: var(--bad); }
.form .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; }
.form .consent input { margin-top: 0.25rem; width: 17px; height: 17px; flex: none; accent-color: var(--blue); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 0.95rem; min-height: 1.4em; }
.form-status.ok { color: var(--ok); font-weight: 600; }
.form-status.error { color: var(--bad); }

/* footer */
.foot { background: var(--navy); color: #aab6cc; padding: 2.2rem 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.foot-nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot-nav a { color: #c3cde0; text-decoration: none; font-size: 0.93rem; }
.foot-nav a:hover { color: #fff; }
.copy { margin: 0; font-size: 0.9rem; }

/* plain pages (privacy, thanks) */
.page { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.page .wrap { max-width: 780px; }
.page h2 { font-size: 1.3rem; margin-top: 2rem; }
.page p, .page li { color: var(--ink-soft); }