/* =========================================
   ZLEXY — BRAND THEME (logo-derived colors)
   Coral (primary/CTA):  #D97A63
   Steel Blue (secondary): #79A1B8
========================================= */
:root{
  /* Brand */
  --coral:#D97A63;          /* primary / CTA */
  --coral-600:#B86754;      /* CTA hover/darker */
  --coral-50:#FCEDE8;       /* very light coral tint */
  --coral-200:#F6D6CE;      /* light coral border */

  --blue:#79A1B8;           /* secondary accent */
  --blue-600:#66889C;       /* darker blue */
  --blue-50:#F5F8FA;        /* pale blue/neutral surface */

  /* Legacy tokens kept for compatibility */
  --green:#D97A63;          /* map old --green → coral */
  --dark:#2B2B2B;
  --light:var(--blue-50);   /* soft light background */
  --black:#000;
  --white:#fff;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0b0b0b;background:#fff}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--dark)}
.container{width:min(1200px,92%);margin-inline:auto}
.visually-hidden{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eaeaea}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:1rem}
.brand{display:flex;gap:.75rem;align-items:center}
.brand-logo{height:56px;width:auto;display:block}
.brand-text .brand-name{font-weight:800;font-size:1.35rem;line-height:1}
.brand-text .brand-tagline{font-size:.80rem;color:#555;margin-top:2px}
.nav-toggle{background:none;border:none;font-size:1.5rem;display:none}
.main-nav .menu{list-style:none;display:flex;align-items:center;gap:1rem;margin:0;padding:0}
.main-nav .menu>li>a{padding:.5rem .75rem;border-radius:10px}
.main-nav .menu>li>a.btn-cta{
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
  font-weight:700;
}
.main-nav .menu>li>a.btn-cta:hover{ background:var(--coral-600); border-color:var(--coral-600); }
.main-nav .has-sub{position:relative}
.main-nav .has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu{position:absolute;top:calc(100% + .25rem);left:0;background:#fff;border:1px solid #e9e9e9;border-radius:12px;box-shadow:var(--shadow);list-style:none;margin:0;padding:.5rem;min-width:260px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.submenu>li>a{display:block;padding:.5rem .75rem;border-radius:8px}
.submenu>li>a:hover{background:var(--light)}

/* Hero */
.hero{padding:5rem 0 3rem;position:relative;overflow:hidden}
.hero--bg{background-image:url('../img/hero-bg.png');background-size:cover;background-position:center}
.hero--bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.70) 40%,rgba(255,255,255,.35) 70%,rgba(255,255,255,0) 100%)}
.hero--bg .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr}
.hero-watermark{position:absolute;right:1.5rem;bottom:1.2rem;font-weight:700;font-size:1rem;letter-spacing:.3px;color:rgba(0,0,0,.55);background:rgba(255,255,255,.7);padding:.4rem .55rem;border-radius:10px;border:1px solid rgba(0,0,0,.06)}
.hero h1{font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;margin:0 0 1rem;color:#1a1a1a}
.hero p.lead{font-size:clamp(1rem,1.25vw,1.15rem);color:#111}

/* Brandy badge (soft coral) */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;
  background:var(--coral-50);
  border:1px solid var(--coral-200);
  border-radius:999px;font-size:.8rem;font-weight:600;color:#7A2D1F;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1rem;
  border-radius:12px;
  font-weight:600;

  /* Secondary CTA (Steel Blue) */
  background: var(--blue);        /* #79A1B8 */
  border: 1px solid var(--blue);
  color: #0b0b0b;
}
.btn:hover{
  background: var(--blue-600);    /* #66889C */
  border-color: var(--blue-600);
}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(121,161,184,.35);
}

/* Primary CTAs remain Coral */
.btn-cta{
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
}
.btn-cta:hover{ background:var(--coral-600); border-color:var(--coral-600); }

.btn-strong{
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
  font-weight:800;
}
.btn-strong:hover{ background:var(--coral-600); border-color:var(--coral-600); }

/* Sections */
.section{padding:3rem 0}
.section h2{font-size:1.8rem;margin:0 0 1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.card{background:#fff;border:1px solid #eaeaea;border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}
.card .icon{font-size:1.8rem}
.card h3{margin:.3rem 0 .5rem}

/* Why */
/* Why Choose Us - full width, no background image */
.why.why--image {
  background: none;
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-top: none;
  border-bottom: none;
  color: #222;
}

.why.why--image::before {
  content: none; /* remove gradient overlay */
}

.why.why--image .why-copy {
  max-width: 100%;   /* allow full width */
  text-align: justify;
  text-justify: inter-word;
}

.why.why--image h2 {
  color: #1a1a1a;
  text-shadow: none;
}


/* Testimonials */
.testimonial-view{position:relative;max-width:820px}
.testimonial blockquote{margin:0 0 .5rem 0;font-size:1.05rem;line-height:1.6}
.testimonial .attribution{color:#444;font-weight:600}
.t-controls{display:flex;gap:.5rem;margin-top:.75rem}
.t-controls button{padding:.4rem .7rem;border:1px solid #dcdcdc;border-radius:10px;background:#fff;cursor:pointer}
/* --- Testimonials centering tweaks --- */
#testimonials .container > h2{ text-align:center; margin-left:auto; margin-right:auto; }
#testimonials .testimonial-view{ margin-left:auto; margin-right:auto; text-align:center; }
#testimonials .t-controls{ display:flex; justify-content:center; }
#testimonials .actions{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.45rem; }
#testimonials .actions .btn{ margin:0; }
/* --- End testimonials tweaks --- */

/* Trusted logos */
.trust .logo-row{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.trust .logo-row img{height:42px;background:#fafafa;border:1px solid #efefef;border-radius:10px;padding:6px;opacity:.98}

/* Footer (dark theme) */
.site-footer{
  background:#2b2b2b;
  color:#eee;
  margin-top:3rem;
}
.site-footer a{ color:#eee !important; }
.site-footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding:2rem 0}
.footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.footer-brand img{height:76px;width:auto}
.footer-brand .brand-name{font-weight:800;font-size:1.2rem}
.footer-brand .brand-tagline{font-size:1rem;color:#ccc}
.footer-contact{font-size:.95rem;line-height:1.5;color:#ddd;margin-top:.6rem}
.footer-badges{margin-top:.6rem;font-size:.9rem;color:#ddd}
.site-footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;border-top:1px solid rgba(255,255,255,0.15);color:#ccc}
.site-footer .socials a{
  display:inline-flex;width:32px;height:32px;border:1px solid rgba(255,255,255,0.25);border-radius:10px;align-items:center;justify-content:center;margin-right:.5rem;color:#eee
}
.site-footer .socials a:hover{ background: rgba(255,255,255,0.1); }
.site-footer .socials img{ width:20px; height:20px; display:block; }

/* Lists + column dividers */
.site-footer .footer-grid ul{ list-style:none; padding:0; margin:.25rem 0 0; }
.site-footer .footer-grid ul li + li{ margin-top:.4rem; }
.site-footer .footer-grid > div{ border-left:1px solid rgba(255,255,255,0.12); padding-left:1.25rem; }
.site-footer .footer-grid > div:first-child{ border-left:none; padding-left:0; }

/* Mobile: remove column dividers when stacked */
@media (max-width:960px){
  .site-footer .footer-grid{ grid-template-columns:1fr 1fr; row-gap:1.5rem; }
  .site-footer .footer-grid > div{ border-left:none; padding-left:0; }
}
@media (max-width:560px){
  .site-footer .footer-grid{ grid-template-columns:1fr; }
}

/* Back-to-top */
backToTop{position:fixed;right:1rem;bottom:1rem;z-index:900;width:42px;height:42px;border-radius:999px;border:1px solid #e2e2e2;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:.2s}
backToTop.visible{opacity:1;transform:translateY(0)}
backToTop span{font-size:18px;line-height:1}

/* Anchors */
#services{scroll-margin-top:84px}

/* Responsive (nav & grids) */
@media (max-width:960px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .site-footer .footer-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:block}
  .main-nav{position:fixed;inset:60px 0 auto 0;background:#fff;padding:1rem;border-bottom:1px solid #eee;transform:translateY(-120%);transition:.2s}
  .main-nav.open{transform:translateY(0)}
  .main-nav .menu{flex-direction:column;align-items:flex-start;gap:.25rem}
  .has-sub .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:.5rem}
}

.site-header{position:sticky;top:0;z-index:2000;background:#fff;border-bottom:1px solid #eaeaea}
.main-nav .menu>li{position:relative}
.main-nav .menu{list-style:none;display:flex;align-items:center;gap:.75rem;margin:0;padding:0;flex-wrap:nowrap;white-space:nowrap}
.submenu{z-index:2100}

@media (max-width:960px){
  .has-sub .submenu{display:none}
  .has-sub.show-sub .submenu{display:block}
}

.testimonial-view{margin-inline:auto;text-align:center}
.testimonial .attribution{text-align:center}

.trust h2{text-align:center}
.trust .logo-row{justify-content:center}

/* Alternating light sections */
.section.alt{background:var(--light);border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea}

/* Forms */
.form-row{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:1rem}
.card input,.card select,.card textarea{width:100%;padding:.65rem .7rem;border:1px solid #ddd;border-radius:10px;background:#fff}
.card label{display:block;font-weight:600;margin-bottom:.35rem}
.card textarea{min-height:140px}
.card .form-actions{margin-top:.6rem}

/* Industries grid (desktop first) */
.section.industries .industries-icons{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  justify-items: stretch;
}
.section.industries .industry-card{
  height: 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:#fff;
  padding: 1.2rem;
  border-radius: var(--radius);
  border: 1px solid #eaeaea;
  box-shadow: var(--shadow);
  transition: all .25s ease;
  color: inherit;
}
.section.industries .industry-card .icon{
  font-size: 2.65rem;
  line-height: 1;
  margin-bottom: .5rem;
  transition: transform .25s ease;
}
.section.industries .industry-card .label{
  font-size: .95rem;
  color: #555;
  font-weight: 600;
  transition: color .25s ease;
}
/* Hover accents now use brand coral */
.section.industries .industry-card:hover{
  transform: translateY(-4px);
  border-color: var(--coral);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.section.industries .industry-card:hover .icon{ transform: scale(1.06); }
.section.industries .industry-card:hover .label{ color: var(--coral); }

/* Responsive: 3 columns, then 2, then 1 */
@media (max-width: 1200px){
  .section.industries .industries-icons{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 960px){
  .section.industries .industries-icons{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .section.industries .industries-icons{ grid-template-columns: 1fr; }
}

/* Notice (soft brand-neutral) */
.notice.success{
  background:#EEF4F8;               /* blue-50 variant */
  border:1px solid #D6E3EB;
  padding:.9rem 1rem;
  border-radius:.5rem;
  font-weight:500;
}

/* LinkedIn embeds grid */
.li-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.li-grid iframe{
  width: 100%;
  height: 560px;
  border: 0;
}
@media (max-width: 520px){
  .li-grid iframe{ height: 520px; }
}

/* ATA badge */
.footer-badges{ margin-top:.6rem; }
.footer-badges a{ display:inline-flex; align-items:center; justify-content:center; }
.footer-badges img.ata-badge{
  height:42px; width:auto; display:block; transition:transform .2s ease;
}
.footer-badges a:hover img.ata-badge{ transform: scale(1.05); }

/* Visually hide labels but keep for screen readers */
.sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Language select in nav */
.menu .lang-item { display:flex; align-items:center; }

/* Match general button sizing without looking like a big button */
.lang-select {
  font: inherit;
  line-height: 1.2;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  max-height: 36px;
}

/* Mobile: make it stack nicely in the opened menu */
@media (max-width: 768px) {
  .menu .lang-item { margin-top: 8px; }
  .lang-select { width: 100%; }
}

.form-field.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-field.checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.form-field.checkbox-row label {
  margin: 0;
  font-weight: 400;
  line-height: 1.35;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;            /* stick to bottom */
  display: none;                 /* toggled by JS */
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(18,18,18,0.95);
  color: #fff;
  z-index: 9999;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
  font-size: 14px;
}
.cookie-banner[data-show="true"] { display: flex; }
.cookie-text { margin: 0; max-width: 70ch; line-height: 1.45; }
.cookie-text a { color: #fff; text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }

.cookie-btn {
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
}
.cookie-btn--primary {
  background: var(--cta-color, #ff6b6b); /* your coral */
  color: #fff;
}
.cookie-btn--primary:hover { opacity: 0.9; }
.cookie-btn--ghost {
  background: transparent;
  color: #fff;
  outline: 1px solid rgba(255,255,255,0.5);
}
.cookie-btn--ghost:hover { outline-color: #fff; }

.cookie-noscript {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #222; color: #fff; padding: 10px 14px; font-size: 13px;
}

/* --- Why Zlexy --- */
.why h2 { margin-bottom: 1rem; }

.why .why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

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

.why-card h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 .35rem;
  font-weight: 700;
}

.why-card p {
  margin: 0;
  color: #444;
  line-height: 1.55;
}

/* subtle divider */
.why-divider {
  border: 0;
  border-top: 1px solid #e6e6e6;
  margin: 1.25rem 0 1rem;
}

/* --- Comparison Table --- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden; /* keeps radius on all corners */
}

.compare-table th,
.compare-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  line-height: 1.45;
}

.compare-table th {
  background: #fafafa;
  font-weight: 600;
  text-align: left;
  color: #333;
}

.compare-table td {
  color: #444;
}

/* Highlight Zlexy column more strongly */
.compare-table th:last-child {
  background: var(--green);
  color: #fff;
  text-align: left;
}

.compare-table td:last-child {
  background: #f5fff8; /* very light green tint */
  font-weight: 500;
  border-left: 2px solid var(--green);
}

/* Alternate row shading for readability */
.compare-table tbody tr:nth-child(even) td {
  background: #fcfcfc;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .compare-table thead {
    display: none; /* hide table header on small screens */
  }
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td {
    display: block;
    width: 100%;
  }
  .compare-table tr {
    margin-bottom: 1rem;
    border-bottom: 2px solid #eee;
  }
  .compare-table td {
    border: none;
    padding: 0.5rem 0.75rem;
  }
  .compare-table td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: 0.2rem;
    color: #333;
  }
}


/* Closing line */
.why-closer {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 960px) {
  .why .why-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare dl > div { grid-template-columns: 130px 1fr; }
}

/* --- Form Spacing Tweaks (Freelancer Apply Form) --- */
.form-field {
  margin-bottom: 1.2rem;
}
.form-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

/* Side-by-side inputs (Full Name / Email) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Checkbox row alignment */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.checkbox-row label {
  margin: 0;
  line-height: 1.4;
}

/* CTA spacing */
form .cta {
  margin-top: 1.5rem;
}

/* --- Form Input Interactions --- */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="file"],
.form-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-field input:hover,
.form-field textarea:hover {
  border-color: #999;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 150, 80, 0.15);
  outline: none;
}

/* Checkbox accent (modern browsers) */
.checkbox-row input[type="checkbox"] {
  accent-color: var(--green);
}

/* --- File Upload Styling --- */
/* Hide native file input; we’ll trigger it via the label */
.form-field input[type="file"] {
  position: absolute;
  left: -9999px;
}

/* Make the label read like: "Upload CV (PDF/DOC) [Choose File]" */
.form-field label[for="cv"]::after {
  content: "Choose File";
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.45rem 0.9rem;
  background: var(--green);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.25s ease;
}
.form-field label[for="cv"]::after:hover {
  background: #00804d;
}

/* File name preview (sits next to the button) */
.file-name {
  display: inline-block;
  margin-left: 0.75rem;
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
  max-width: 50ch;          /* keep it from overflowing the form */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* fallback if JS didn’t run for any reason */
}

/* Responsive: stack the two-column grid on small screens */
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Ensure button consistency --- */
form .btn,
form .btn-cta {
  font-family: inherit; /* use site-wide Inter font */
  font-size: 0.95rem;
  font-weight: 600;
}

/* --- Get a Quote form layout & rhythm --- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;                /* horizontal gap between paired fields */
  margin-bottom: 1rem;      /* vertical gap between rows */
}

/* Labels in this page wrap inputs; give inner inputs full width */
.form-row label {
  display: block;
  font-weight: 500;
}
.form-row input,
.form-row select,
.form-row textarea,
label > input,
label > select,
label > textarea {
  width: 100%;
  margin-top: 0.35rem;
}

/* Textarea sizing */
textarea[name="notes"] {
  min-height: 120px;
  resize: vertical;
}

/* reCAPTCHA + actions spacing */
[data-netlify-recaptcha] { margin-top: 1rem; }
.form-actions { margin-top: 1rem; }

/* Responsive: stack pairs on mobile */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

/* --- Success alert card --- */
.alert.success {
  background: #f5fff8;                  /* subtle green tint */
  border: 1px solid #cfeede;
  border-left: 4px solid var(--green);  /* brand accent */
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.alert.success h3 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  line-height: 1.35;
}

.alert.success p {
  margin: 0 0 .5rem;
  color: #2c3e33;
}

.alert.success .success-points {
  margin: 0 0 .75rem 1rem;
  color: #2c3e33;
}

.alert.success .cta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Utility for simple hide/show via JS */
.is-hidden { display: none !important; }

/* --- Fix: keep consent checkbox + text on the same line --- */
.form-field.checkbox-row {
  display: flex;
  align-items: flex-start;   /* top-align long text */
  gap: 0.6rem;
  flex-wrap: nowrap;         /* don't let the checkbox wrap to its own line */
}

.form-field.checkbox-row input[type="checkbox"] {
  flex: 0 0 auto;            /* stay natural size */
  width: auto;               /* guard against global input { width:100% } */
  margin-top: 0.15rem;       /* optically align with first line of text */
}

.form-field.checkbox-row label {
  display: inline;           /* override any label { display:block } */
  margin: 0;
  line-height: 1.45;
  flex: 1 1 auto;            /* let the text wrap inside the remaining width */
  white-space: normal;       /* ensure long text wraps instead of pushing layout */
}

/* Fix: consent checkbox should not stretch or break line */
label > input[type="checkbox"] {
  width: auto !important;
  display: inline-block !important;
  margin: 0.15rem 0.5rem 0 0; /* aligns with first line of text */
  vertical-align: top;
}