/* ===========================================================================
   base-dark.css — the shared foundation for Mana Earth Media v2 / v3 / v4.

   One rule governs everything here: the background is ALWAYS the same dark
   teal. No alternating light sections. Depth comes from translucent white
   surfaces layered over that single ground, the way vita-travel.webflow.io
   does it — never from changing the page colour.

   Palette is taken from the reference: #091B20 ground, #0A1E24 raised.
   Each variant adds its own layout CSS on top; nothing below is layout.
   =========================================================================== */

:root{
  /* the one background colour, and the only two solid surfaces above it */
  --bg:#091B20;
  --bg-2:#0A1E24;
  --bg-3:#0C242B;

  /* translucent surfaces — how depth is built on a single-colour page */
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.10);
  --glass-3:rgba(255,255,255,.16);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.20);

  /* text */
  --fg:#FFFFFF;
  --fg-2:rgba(255,255,255,.72);
  --fg-3:rgba(255,255,255,.52);

  /* accent — the baby blue carried over from the original site */
  /* Teal. #2FB7A4 was already the digital marketing page's lighter accent, so
     the whole site now shares one colour instead of two. Contrast on --bg is
     7.09:1 as text and 6.65:1 for #001E22 sitting on it, both clear of AA.
     The old #17788F only managed 3.46:1, which is why it is not the base. */
  --accent:#2FB7A4;
  --accent-2:#5FD3C4;
  --accent-deep:#1E9A95;

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1320px;
  --pad:clamp(20px,4vw,56px);

  /* the reference's signature: very round cards and pill buttons */
  --r-card:28px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.035em;line-height:1.02}
p{margin:0 0 1em}
/* Stops a single word being left alone on the last line, which showed up on
   several cards at phone width. Browsers without support simply ignore it, so
   the   bindings in the copy stay as the fallback. */
p,figcaption,li,.lead,.sub{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
.eyebrow{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 18px;font-weight:500;
}
.mut{color:var(--fg-2)}

/* ---- buttons: ONE appearance, used everywhere ----
   Previously there were three: .cta (square, uppercase, Outfit) in the header
   and hero, .btn/.btn-a (pill, sentence case, Inter) for submits and links,
   and the digital marketing page's own .cta. They are now a single rule. The
   square uppercase form wins because it is the original site's signature and
   the most prominent button on the page. */
.btn,.cta,
.forminator-ui.forminator-custom-form .forminator-button-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp,var(--font));font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:15px 30px;border-radius:2px;
  background:var(--accent);color:#001E22;border:1px solid var(--accent);
  text-decoration:none;cursor:pointer;backdrop-filter:none;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.btn:hover,.cta:hover,
.forminator-ui.forminator-custom-form .forminator-button-submit:hover{
  background:var(--accent-2);border-color:var(--accent-2);color:#001E22;transform:none;
}
/* .btn-a is kept as an alias so existing markup does not have to change. */
.btn-a{background:var(--accent);border-color:var(--accent);color:#001E22}
.btn-a:hover{background:var(--accent-2);border-color:var(--accent-2);color:#001E22}
.btn-sm,header .cta{padding:11px 22px;font-size:12px}

/* ---- surfaces ---- */
.card{
  background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
}

/* ---- header ---- */
/* 16px padding, not 20px, so the logo below can grow from 34px to 48px while
   the header stays exactly 80px tall: 16 + 48 + 16. The row used to be 40px
   high because of the CTA button, so the old 34px logo was not even filling
   the space it already had. */
header{position:fixed;top:0;left:0;right:0;z-index:80;padding:16px 0;transition:.4s var(--ease)}
header.solid{padding:12px 0;background:rgba(9,27,32,.82);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
/* header layout: brand left, menu and Contact button together on the right
   (the centred elementis.co layout was tried on 2026-09-10 and reverted the
   same evening at the client's request). */
.nav{display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{width:48px;height:48px}
.brand b{font-weight:500;font-size:15px;letter-spacing:-.01em;line-height:1.15}
.brand span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);font-weight:400}
/* menu items: thin, light. Hover is option 6 from the 2026-09-10 comparison
   sheet: a translucent teal panel (15%) sweeps in behind the word from the
   left and out to the right, on elementis.co's .8s curve. No outline. */
.menu{display:flex;gap:6px}
.menu a{position:relative;font-size:14px;font-weight:400;letter-spacing:.01em;text-decoration:none;
  color:rgba(255,255,255,.82);padding:8px 12px;transition:color .3s var(--ease)}
.menu a::before,.fnav > a::before{content:"";position:absolute;inset:0;background:rgba(30,154,149,.15);pointer-events:none;
  transform:scaleX(0);transform-origin:right;transition:transform .8s cubic-bezier(.24,.43,.15,.97)}
.menu a:hover,.menu a:focus-visible,.frow .fnav > a:hover,.frow .fnav > a:focus-visible{color:#fff;outline:none}
.menu a:hover::before,.menu a:focus-visible::before,
.fnav > a:hover::before,.fnav > a:focus-visible::before{transform:scaleX(1);transform-origin:left}
/* the header's Contact button is the reference's outlined "Join Us ↗": thin
   border, no fill, arrow after the label; fills white on hover. Buttons
   elsewhere on the pages keep their solid style. */
header .cta{background:rgba(30,154,149,.15);color:#fff;border:1px solid rgba(255,255,255,.55);
  font-weight:500;letter-spacing:.06em;text-transform:none;font-size:13px;padding:9px 14px;border-radius:0}
header .cta::after{content:"\2197";font-size:12px;margin-left:2px;transition:transform .3s var(--ease)}
header .cta:hover,header .cta:focus-visible{background:#fff;color:var(--ink,#001E22);border-color:#fff}
header .cta:hover::after{transform:translate(1px,-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:1.5px;background:#fff;margin:5px 0}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:44px 0;color:var(--fg-3);font-size:14px}
/* service-area line: readable size and contrast on purpose. Google treats tiny or
   low-contrast keyword text as hidden text, so this stays a normal footer paragraph. */
.area{font-size:13px;line-height:1.65;color:var(--fg-3);max-width:880px;margin:0 0 22px}
.frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.frow a{margin-left:22px;text-decoration:none;color:var(--fg-3);transition:color .25s}
.frow a:hover{color:var(--accent)}
/* footer links mirror the header menu, then the social icons */
.fnav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.frow .fnav a{margin-left:0}
/* footer text links share the header menu hover (rules above): same box, same wipe, same curve */
.fnav > a{position:relative;padding:8px 12px;transition:color .3s var(--ease)}
.fsoc{display:inline-flex;gap:4px;margin-left:6px}

/* ---- social icons (header and footer) ----
   Outline glyphs drawn inline, so no icon font or extra request. The link
   carries the name; the SVG is aria-hidden. */
.soc{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--fg-2);transition:color .25s,background-color .25s}
/* sized here rather than on each inline <svg> so one rule moves them all */
.soc svg{width:21px;height:21px}
.soc:hover{color:var(--accent);background:var(--glass)}
.frow .soc{color:var(--fg-3)}
.frow .soc:hover{color:var(--accent)}
/* icons sit immediately right of the brand, so the auto margin that pushes the
   menu across moves from the brand to the icon group. :has() keeps any header
   without icons (the static marketing preview) laid out exactly as before. */
.hsoc{display:flex;align-items:center;gap:2px;margin:0 auto 0 12px}
.brand:has(+ .hsoc){margin-right:0}
/* 360-380px phones (most Androids): still ~8px short at 360, so close the
   small gaps and drop the brand name one size, only when icons are present. */
/* tablet (761 to 1100). "San Francisco Bay Area and Beyond" under the brand is
   longer than the old line: from 1000px it gets 200px so it sits on two rows and
   the six menu items tighten so the header stays on one row. From 761 to 999
   there is no room for it at all (with it the logo was being squeezed to 0px),
   so the line is hidden there like on phones, and the menu wraps as before.
   Added 2026-09-11. */
@media (min-width:761px) and (max-width:1100px){.brand picture{flex:none}.nav{gap:16px}
  .menu a{padding:8px 7px;font-size:13px;white-space:nowrap}
  /* each name stays whole; the list may take a second row. Without the wrap the
     nowrap pushed the Contact button to 911px inside a 900px viewport. */
  .menu{gap:0;flex-wrap:wrap;justify-content:flex-end}header .cta{white-space:nowrap}}
@media (min-width:1000px) and (max-width:1100px){.brand b{min-width:200px}.menu a,header .cta{white-space:nowrap}}
@media (min-width:761px) and (max-width:999px){.brand span{display:none}.brand b{white-space:nowrap}}
/* The review icons need real room. At 1101 the 761-1100 tightening rules stop
   applying while these would start showing, and the nav wrapped to 109px tall.
   They appear from 1200 up, where the row measured 61px with 192px to spare.
   Below that they are still in the footer and in Contact. Added 2026-09-15. */
@media (max-width:1199px){.hsoc .soc-rev{display:none}}
/* Four icons need more room than two. From 1200 up, where the review icons
   appear, the menu tightens and nothing in the header may wrap: "Digital
   Marketing", the Contact button and the brand sub-line were each breaking
   onto a second row. Added 2026-09-15. */
@media (min-width:1101px){
  .nav{gap:18px}
  .menu{gap:2px}
  .menu a{font-size:13px;padding:8px 9px;white-space:nowrap}
  header .cta{white-space:nowrap}
  .brand span{white-space:nowrap}
  .hsoc{gap:0;margin-left:8px}
}
@media (max-width:380px){header .nav:has(.hsoc){column-gap:6px}.hsoc{gap:0}.nav:has(.hsoc) .brand b{font-size:12px}}
@media (max-width:359px){.hsoc{display:none}.brand:has(+ .hsoc){margin-right:auto}}

/* ---- scroll reveal (site.js adds .in) ---- */
.rvjs .rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rvjs .rv.in{opacity:1;transform:none}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,14,17,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:5vw}
.lb.on{display:flex}
.lbin{width:min(1180px,100%);position:relative}
.lbframe{position:relative;aspect-ratio:16/9;background:#000;
  border-radius:18px;overflow:hidden}
.lbframe.photo{aspect-ratio:auto;background:none}
.lbframe iframe,.lbframe video,.lbframe img{width:100%;height:100%;border:0;display:block}
.lbframe.photo img{height:auto;max-height:82vh;width:auto;margin:0 auto;border-radius:14px}
.lbcap{display:flex;justify-content:space-between;gap:18px;margin-top:16px;flex-wrap:wrap;
  font-size:13px;color:var(--fg-3)}
.lbcap b{font-weight:500;color:#fff;font-size:16px}
.lbcap a{color:var(--accent);text-decoration:none}
.lbx{position:absolute;top:-50px;right:0;width:40px;height:40px;border-radius:50%;
  background:var(--glass-2);border:1px solid var(--line-2);color:#fff;cursor:pointer;
  font-size:15px;line-height:1;transition:.25s}
.lbx:hover{background:var(--glass-3);border-color:var(--accent);color:var(--accent)}

/* ---- forms ---- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-full{grid-column:1/-1}
/* White and semibold: at 52% white these read as hints rather than labels, and
   on the water-backed contact section they were the first thing to disappear. */
label{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-bottom:8px}
input,textarea{width:100%;padding:14px 16px;background:var(--glass);
  border:1px solid var(--line);border-radius:14px;color:#fff;font:inherit;font-size:16px}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--glass-2)}
.note{color:var(--accent);font-size:13px;margin-top:14px}

/* ---- testimonials marquee (shared across all three) ---- */
.tmarquee{overflow:hidden;position:relative;margin-top:20px}
.tmarquee::before,.tmarquee::after{content:"";position:absolute;top:0;bottom:0;
  width:10%;z-index:2;pointer-events:none}
.tmarquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tmarquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.trow{display:flex;gap:18px;width:max-content}
/* Deliberately slow — ~16px/s at desktop width, a quarter of the original's
   pace. Halved twice: once when the cards were still 7 lines, and again with
   the 2-line clamp below, because a shorter card crossing at the same px/s
   reads as faster than a tall one. `infinite` is what makes it never stop;
   the seamless wrap comes from site.js duplicating each row's list, so
   translateX(-50%) lands copy 2 exactly where copy 1 began. */
.trow-a{animation:tleft 256s linear infinite}
.trow-b{animation:tright 288s linear infinite;margin-top:18px}
@keyframes tleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tright{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tcard{flex:0 0 360px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;gap:13px}
.thead{display:flex;align-items:center;gap:12px}
.tav{width:42px;height:42px;border-radius:50%;flex:0 0 42px;display:grid;place-items:center;
  font-weight:500;font-size:16px;background:var(--accent);color:#04222A;text-transform:uppercase}
img.tav{object-fit:cover;background:var(--bg-3);border:1px solid var(--line)}
.tstars{color:var(--accent);font-size:13px;letter-spacing:2px}
/* Eight lines. Measured across all 29 reviews: at 2 lines every single one was
   cut; at 7, seven were readable in full; at 8, seventeen are. That one extra
   line is the knee in the curve, and 375px matches the 369px cards on the
   reference site almost exactly. The clamp adds its own ellipsis, so the ones
   still cut read as cut rather than as a sentence that stops. */
.tcard p{color:var(--fg-2);font-size:15px;line-height:1.62;margin:0;flex:1;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.tmeta{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;
  border-top:1px solid var(--line);padding-top:13px;font-size:13px}
.tmeta b{display:block;font-weight:500;color:#fff;font-size:15px}
.tmeta span span{color:var(--fg-3);font-size:12px}
.tsrc{color:var(--fg-3);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rvjs .rv{opacity:1;transform:none;transition:none}
  .trow-a,.trow-b{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media (max-width:860px){
  /* Sticky on phones too, but compact: the header used to be ~115px tall
     (16px padding, 48px logo, subline, 10px gap, link row) and was left
     position:absolute so it would scroll away. It now stays fixed at ~70px:
     8px padding, 28px logo, no subline, tighter link row. Because it sits over
     content while scrolling, it is always glass on phones rather than waiting
     for the .solid class that the scroll listener adds on desktop. */
  header,header.solid{position:fixed;padding:8px 0;background:rgba(9,27,32,.86);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)}
  /* anchor targets stop underneath the fixed header instead of behind it */
  section[id],[id="top"]{scroll-margin-top:76px}

  /* No hamburger. The five links sit on their own row under the brand, so
     they are always visible and there is no open/close state to get stuck in.
     Order is explicit because the menu comes before the button in the markup:
     brand and button share row one, the links wrap to row two. */
  .nav{flex-wrap:wrap;gap:0 12px}
  .brand{order:1;gap:9px}
  .brand img{width:28px;height:28px}
  .brand b{font-size:13px}
  .brand span{display:none}
  /* Row one holds brand, icons and button. Measured at 371px wide these needed
     336px against 331 available and pushed the button onto its own line, so
     the icons shrink to the 24px minimum touch size and the gaps between the
     three items tighten. Scoped with :has() so a header without icons keeps
     its original spacing. */
  .hsoc{order:1;margin-left:2px}
  .hsoc .soc{width:24px;height:24px}
  .hsoc .soc svg{width:15px;height:15px}
  .nav:has(.hsoc){column-gap:8px}
  header .cta{order:2;white-space:nowrap;font-size:10px;padding:6px 11px;letter-spacing:.08em}
  .menu{order:3;width:100%;position:static;flex-direction:row;
    justify-content:space-between;gap:0;margin-top:5px;padding:5px 0 0;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;border-top:1px solid var(--line)}
  /* scales down rather than wrapping or overflowing on a 320px screen */
  .menu{flex-wrap:wrap;row-gap:2px}
  .menu a{padding:4px 5px;border:0;font-size:clamp(10px,2.9vw,12px);
    letter-spacing:.02em;white-space:nowrap;color:var(--fg-2)}

  .form{grid-template-columns:1fr}
  .tcard{flex:0 0 300px}
}

/* ============================================================
   Forminator — "Lets Talk" (form 30489)

   Forminator ships its own stylesheet whose selectors carry an id
   AND an attribute (.forminator-ui#forminator-module-30489[data-design]),
   so almost every visual property below needs !important to win.

   Field ids contain a per-render hash (…_6a9bc2730da53) that changes
   on every page load, so nothing here may target an id. Classes only.
   ============================================================ */

.forminator-ui.forminator-custom-form{font-family:var(--font)!important}

/* row gutter, matched to the 16px of .form */
.forminator-ui.forminator-custom-form .forminator-row{margin-bottom:16px!important}
.forminator-ui.forminator-custom-form .forminator-row-last{margin-bottom:0!important}
.forminator-ui.forminator-custom-form .forminator-row.forminator-no-margin{margin-bottom:0!important}

/* Forminator gives the name field's first/last sub-columns a 30px bottom
   margin that no other column carries, so the gap under that row measured
   46px against 16px everywhere else. The rows are flex with wrap, so a
   row-gap restores the separation only when the two actually stack on a
   narrow screen, which is the only case the margin was needed for. */
/* Column spacing when the form stacks.

   Forminator's own breakpoint is 783px. Below it every column goes full width
   and its spacing is inconsistent: a plain row's columns carry 20px, while the
   name field's nested columns carry 0, because that row switches from flex to
   block and any row-gap stops applying. Measured on a phone this read as
   0px between first and last name, 20px between phone and email, and 16px
   between rows. Normalise every stacked column to the same 16px used between
   rows, then clear it again once the columns sit side by side. */
@media (max-width:782px){
  .forminator-ui.forminator-custom-form .forminator-col{margin-bottom:16px!important}
  .forminator-ui.forminator-custom-form .forminator-row > .forminator-col:last-child{
    margin-bottom:0!important;
  }
}
@media (min-width:783px){
  .forminator-ui.forminator-custom-form .forminator-row .forminator-row > .forminator-col{
    margin-bottom:0!important;
  }
}

/* labels: uppercase, white, semibold — same as the rest of the site */
.forminator-ui.forminator-custom-form .forminator-label{
  display:block!important;font-size:12px!important;font-weight:600!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;
  color:#fff!important;margin-bottom:8px!important;
}
.forminator-ui.forminator-custom-form .forminator-required{color:var(--accent)!important}

/* fields: the translucent glass surface used everywhere else */
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea{
  width:100%!important;padding:14px 16px!important;height:auto!important;
  background:var(--glass)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;color:#fff!important;
  font:inherit!important;font-size:16px!important;box-shadow:none!important;
}
.forminator-ui.forminator-custom-form .forminator-textarea{
  min-height:130px!important;resize:vertical!important;
}
.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder{
  color:var(--fg-3)!important;opacity:1!important;
}
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus{
  outline:none!important;border-color:var(--accent)!important;
  background:var(--glass-2)!important;
}

/* Chrome paints autofilled fields near-white with dark text, which is
   unreadable on this background and cannot be overridden by `background`.
   A large inset shadow repaints the field; the long transition stops the
   flash of yellow before it applies. */
.forminator-ui.forminator-custom-form input:-webkit-autofill,
.forminator-ui.forminator-custom-form input:-webkit-autofill:hover,
.forminator-ui.forminator-custom-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px #0C242B inset!important;
  caret-color:#fff!important;
  transition:background-color 9999s ease-out 0s!important;
}

/* submit: identical to .btn / .cta above. These carry !important only because
   Forminator's own stylesheet targets the button with an id-based selector. */
.forminator-ui.forminator-custom-form .forminator-button-submit{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:10px!important;
  font-family:var(--disp,var(--font))!important;font-weight:600!important;
  font-size:13px!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  padding:15px 30px!important;border-radius:2px!important;
  background:var(--accent)!important;border:1px solid var(--accent)!important;
  color:#001E22!important;cursor:pointer!important;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover{
  background:var(--accent-2)!important;border-color:var(--accent-2)!important;
  color:#001E22!important;transform:none!important;
}

/* validation and response messages, legible on the dark ground */
.forminator-ui.forminator-custom-form .forminator-error-message{
  color:#FFB4A8!important;font-size:13px!important;
  margin-top:6px!important;background:none!important;padding:0!important;
}
.forminator-ui.forminator-custom-form .forminator-input.forminator-has_error,
.forminator-ui.forminator-custom-form .forminator-textarea.forminator-has_error{
  border-color:#FFB4A8!important;
}
.forminator-ui .forminator-response-message{
  padding:14px 16px!important;border-radius:14px!important;font-size:14px!important;
  background:var(--glass)!important;border:1px solid var(--line)!important;
  color:#fff!important;margin-bottom:16px!important;
}
.forminator-ui .forminator-response-message.forminator-success{
  border-color:var(--accent)!important;color:var(--accent)!important;
}
.forminator-ui .forminator-response-message p{margin:0!important;color:inherit!important}

/* The slide-out drawer keeps the same two-across pairing as the builder
   (first/last, phone/email). The drawer form is 388px against 568px in the
   contact section, so the gutters come down from 15px to 8px to let two
   fields sit side by side — but everything vertical stays close to the
   section's own rhythm, because the drawer has room to spare and reads as
   crammed when it is squeezed. */
.cdrawer .forminator-ui.forminator-custom-form{margin-top:20px!important}
.cdrawer .forminator-ui.forminator-custom-form .forminator-row{
  margin-bottom:16px!important;margin-left:-8px!important;margin-right:-8px!important;
}
.cdrawer .forminator-ui.forminator-custom-form .forminator-row.forminator-no-margin{margin-bottom:0!important}
.cdrawer .forminator-ui.forminator-custom-form .forminator-col{
  padding-left:8px!important;padding-right:8px!important;
}
.cdrawer .forminator-ui.forminator-custom-form .forminator-label{
  font-size:11px!important;letter-spacing:.09em!important;margin-bottom:9px!important;
}
.cdrawer .forminator-ui.forminator-custom-form .forminator-input{
  padding:13px 15px!important;font-size:15px!important;border-radius:13px!important;
}
.cdrawer .forminator-ui.forminator-custom-form .forminator-textarea{
  min-height:118px!important;padding:13px 15px!important;border-radius:13px!important;
}
.cdrawer .forminator-ui.forminator-custom-form .forminator-row-last{margin-top:6px!important}
.cdrawer .forminator-ui.forminator-custom-form .forminator-error-message{
  font-size:12px!important;margin-top:5px!important;
}