/*
 * ROS Engineering component styles.
 *
 * GENERATED from ros-companion/markup/ROS_Engineering_Website-components.html
 * by build_plugin_assets.py. Byte-identical to that file's <style> block
 * except the three background-image declarations, which are indirected
 * through --ros-bg-image so Elementor can swap the photo, plus the form
 * embed block appended at the end. Do not hand-edit: change the master
 * file and re-run the extractor.
 */
:root {
  --beige-bg: #efe7d6;
  --beige-light: #f9f4e9;
  --bordeaux: #6c2a3a;
  --bordeaux-dark: #4a1b27;
  --bordeaux-light: #8c4356;
  --ink: #2a211e;
  --stone: #8e8270;
  --line: rgba(108, 42, 58, 0.18);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--beige-bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.ros-eyebrow {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
a {
  color: inherit;
}
.ros-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* TOPBAR */
.ros-topbar {
  background: var(--bordeaux-dark);
  color: #e7dfd1;
}
.ros-topbar .ros-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  gap: 20px;
  flex-wrap: wrap;
}
.ros-topbar-left {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.ros-topbar-left span,
.ros-topbar-left a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  white-space: nowrap;
  fill: currentColor;
}
.ros-topbar-left svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #d9b8a8;
}
.ros-topbar-social {
  display: flex;
  gap: 12px;
}
.ros-topbar-social a {
  color: #e7dfd1;
  display: flex;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.ros-topbar-social a:hover {
  opacity: 1;
}
.ros-topbar-social svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
@media (max-width: 760px) {
  .ros-topbar-left {
    display: none;
  }
}

/* NAV */
.ros-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 231, 214, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.ros-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.ros-logo {
  display: block;
  height: 54px;
}
.ros-logo img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 3px;
}
.ros-navlinks {
  display: flex;
  gap: 36px;
  font-size: 21px;
}
.ros-navlinks a {
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}
.ros-navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--bordeaux);
  transition: width 0.25s ease;
}
.ros-navlinks a:hover::after {
  width: 100%;
}
.ros-navcta {
  background: var(--bordeaux);
  color: var(--beige-light);
  padding: 10px 20px;
  border-radius: 2px;
  font-size: 20px;
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ros-navcta:hover {
  background: var(--bordeaux-dark);
  color: var(--beige-light);
}
@media (max-width: 760px) {
  .ros-navlinks {
    display: none;
  }
}

/* SECTION SHELL */
.ros-section {
  position: relative;
  padding: 96px 0;
}
.ros-section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.ros-section-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-top: 14px;
}

/* HERO — background photo */
.ros-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 130px;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  background-image:
    radial-gradient(
      ellipse 65% 55% at 50% 45%,
      rgba(42, 23, 29, 0.72) 0%,
      rgba(42, 23, 29, 0.42) 55%,
      rgba(42, 23, 29, 0.15) 100%
    ),
    var(--ros-bg-image, url("../images/hero.jpg"));
  background-size: cover;
  background-position: center 42%;
}
.ros-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, var(--beige-bg), rgba(239, 231, 214, 0));
  pointer-events: none;
}
.ros-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.ros-hero .ros-eyebrow {
  color: #d9b8a8;
  letter-spacing: 0.16em;
}
.ros-hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  max-width: 820px;
  margin: 18px auto 0;
  color: #f9f4e9;
}
.ros-hero h1 em {
  font-style: italic;
  color: #d9a5ae;
}
.ros-hero p.ros-lede {
  max-width: 560px;
  margin: 24px auto 0;
  font-size: 26px;
  line-height: 1.6;
  color: #e7dfd1;
}
.ros-hero-ctas {
  margin-top: 38px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.ros-btn-primary {
  background: var(--bordeaux);
  color: var(--beige-light);
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 22px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  display: inline-block;
}
.ros-btn-primary:hover {
  background: var(--bordeaux-dark);
  transform: translateY(-1px);
  color: var(--beige-light);
}
.ros-btn-ghost {
  border: 1px solid var(--bordeaux);
  color: var(--bordeaux);
  padding: 13px 26px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 22px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.ros-btn-ghost:hover {
  background: var(--bordeaux);
  color: var(--beige-light);
}
.ros-hero .ros-btn-ghost {
  border-color: #e7dfd1;
  color: #f9f4e9;
}
.ros-hero .ros-btn-ghost:hover {
  background: #f9f4e9;
  color: var(--bordeaux-dark);
}

/* ABOUT */
.ros-section--tint {
  background: var(--beige-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ros-about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
.ros-about-grid p {
  font-size: 24px;
  line-height: 1.65;
  color: #4a3f38;
  margin: 0 0 18px;
}
.ros-about-photo {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}
.ros-about-photo img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
}
.ros-about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(108, 42, 58, 0.06),
    rgba(74, 27, 39, 0.22)
  );
  mix-blend-mode: multiply;
}
.ros-stat-card {
  background: var(--beige-bg);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 2px;
}
.ros-stat-card + .ros-stat-card {
  margin-top: 16px;
}
.ros-stat-card .ros-stat-num {
  font-family: "Open Sans", sans-serif;
  font-size: 48px;
  color: var(--bordeaux);
}
.ros-stat-card .ros-stat-label {
  font-size: 20px;
  color: var(--stone);
  margin-top: 4px;
}
@media (max-width: 820px) {
  .ros-about-grid {
    grid-template-columns: 1fr;
  }
}

/* FIELD BANNER — signature visual divider */
.ros-field-banner {
  position: relative;
  height: 480px;
  overflow: hidden;
  background-image: var(--ros-bg-image, url("../images/field-banner.jpg"));
  background-size: cover;
  background-position: 60% center;
}
.ros-field-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(42, 23, 29, 0.88) 0%,
    rgba(42, 23, 29, 0.45) 42%,
    rgba(42, 23, 29, 0.05) 70%
  );
}
.ros-field-banner-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 36px;
}
.ros-field-banner .ros-eyebrow {
  color: #d9b8a8;
}
.ros-field-banner h2 {
  color: #f9f4e9;
  font-size: clamp(30px, 4.2vw, 44px);
  max-width: 700px;
  line-height: 1.2;
  margin-top: 10px;
}

/* SERVICES */
.ros-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ros-service-card {
  background: var(--beige-bg);
  padding: 40px 36px;
  transition: background 0.25s ease;
}
.ros-service-card:hover {
  background: var(--beige-light);
}
.ros-service-card .ros-idx {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: var(--stone);
}
.ros-service-card h3 {
  font-size: 32px;
  margin-top: 14px;
}
.ros-service-card p {
  font-size: 23px;
  line-height: 1.55;
  color: #4a3f38;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .ros-services-grid {
    grid-template-columns: 1fr;
  }
}

/* PORTFOLIO */
.ros-portfolio-empty {
  border: 1px dashed var(--bordeaux);
  border-radius: 2px;
  padding: 56px 40px;
  text-align: left;
  max-width: 640px;
}
.ros-portfolio-empty p {
  font-size: 23px;
  line-height: 1.6;
  color: #4a3f38;
  margin: 14px 0 0;
}

/* CONTACT */
.ros-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.ros-field {
  margin-bottom: 18px;
}
.ros-field label {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.ros-field input,
.ros-field textarea {
  width: 100%;
  background: var(--beige-light);
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 22px;
  color: var(--ink);
  border-radius: 2px;
}
.ros-field textarea {
  min-height: 110px;
  resize: vertical;
}
.ros-field input:focus,
.ros-field textarea:focus {
  outline: 2px solid var(--bordeaux);
  outline-offset: 1px;
}
.ros-contact-info .ros-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ros-contact-info .ros-row .ros-eyebrow {
  width: 120px;
  flex-shrink: 0;
}
.ros-insta-note {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--beige-light);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 21px;
  color: var(--stone);
}
@media (max-width: 820px) {
  .ros-contact-grid {
    grid-template-columns: 1fr;
  }
}

.ros-foot-social {
  display: flex;
  gap: 14px;
}
.ros-foot-social a {
  width: 38px;
  height: 38px;
  border-radius: 2px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bordeaux);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.ros-foot-social a:hover {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--beige-light);
}
.ros-foot-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Visible by default so a JS failure can never blank the page; the
     hidden start state is opted into by the inline <head> script. */
.ros-js .ros-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.ros-js .ros-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* The base sheet still carries the prototype's UNPREFIXED design tokens
     (--beige-bg, --line, ...) because the class rename never touched custom
     properties. Alias them to ros-* here — plus the handful the prototype only
     ever wrote as literals — so the merged components use one naming scheme.
     Adding custom properties changes no computed style on its own. */
:root {
  --ros-beige-bg: var(--beige-bg);
  --ros-beige-light: var(--beige-light);
  --ros-bordeaux: var(--bordeaux);
  --ros-bordeaux-dark: var(--bordeaux-dark);
  --ros-bordeaux-light: var(--bordeaux-light);
  --ros-ink: var(--ink);
  --ros-stone: var(--stone);
  --ros-line: var(--line);
  --ros-body: #4a3f38;
  --ros-sand: #d9b8a8;
  --ros-rose: #d9a5ae;
  --ros-cream: #e7dfd1;
  --ros-radius: 2px;
  --ros-font-heading: "Open Sans", sans-serif;
  --ros-font-body: "IBM Plex Sans", sans-serif;
  --ros-font-label: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
     COMPONENTS MERGED IN FROM THE SUB-PAGES
     Where a class existed on more than one page with a different look, each
     variant is kept as its OWN component rather than a modifier.
     ========================================================================== */

/* contact.html folded border/cursor into .btn-primary so <button> matches <a>.
     Both are already the defaults for <a>, so this is safe to share. */
.ros-btn-primary {
  border: none;
  cursor: pointer;
}

/* --- section shells: sub-pages used 88px where home used 96px --- */
.ros-section-compact {
  position: relative;
  padding: 88px 0;
}
.ros-section-head-compact {
  max-width: 640px;
  margin-bottom: 48px;
}
.ros-section-head-tight {
  max-width: 640px;
  margin-bottom: 32px;
}
.ros-section-head-compact h2,
.ros-section-head-tight h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-top: 14px;
  font-family: var(--ros-font-heading);
  font-weight: 600;
  color: var(--ros-ink);
}

/* --- nav: sub-pages mark the current page --- */
.ros-navlinks a.active::after {
  width: 100%;
}

/* --- PAGE HERO (all four sub-pages) --- */
.ros-page-hero {
  height: 420px;
  overflow: hidden;
  background-image:
    linear-gradient(
      100deg,
      rgba(42, 23, 29, 0.9) 0%,
      rgba(42, 23, 29, 0.7) 40%,
      rgba(42, 23, 29, 0.3) 75%,
      rgba(42, 23, 29, 0.1) 100%
    ),
    var(--ros-bg-image, url("../images/page-hero.jpg"));
  background-size: cover;
  background-position: 60% center;
}
.ros-page-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ros-page-hero .ros-eyebrow {
  color: var(--ros-sand);
}
.ros-page-hero h1 {
  color: var(--ros-beige-light);
  font-size: clamp(38px, 6vw, 64px);
  max-width: 700px;
  line-height: 1.05;
  margin-top: 14px;
  font-family: var(--ros-font-heading);
  font-weight: 600;
}

/* --- INTRO (diensten) --- */
.ros-intro p {
  font-size: 24px;
  line-height: 1.65;
  color: var(--ros-body);
  max-width: 760px;
  margin: 0;
  font-family: var(--ros-font-body);
}

/* --- SERVICES WITH PHOTO (diensten) — distinct from the plain home card --- */
.ros-services-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--ros-line);
  border: 1px solid var(--ros-line);
}
.ros-service-photo-card {
  background: var(--ros-beige-bg);
  padding: 28px 30px 34px;
  transition: background 0.25s ease;
}
.ros-service-photo-card:hover {
  background: var(--ros-beige-light);
}
.ros-service-photo {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: var(--ros-radius);
  margin-bottom: 22px;
  border: 1px solid var(--ros-line);
}
.ros-service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
}
.ros-service-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(108, 42, 58, 0.05),
    rgba(74, 27, 39, 0.22)
  );
  mix-blend-mode: multiply;
}
.ros-service-photo-card .ros-idx {
  font-family: var(--ros-font-label);
  font-size: 18px;
  color: var(--ros-stone);
}
.ros-service-photo-card h3 {
  font-size: 32px;
  margin-top: 14px;
  font-family: var(--ros-font-heading);
  font-weight: 600;
  color: var(--ros-ink);
}
.ros-service-photo-card p {
  font-size: 23px;
  line-height: 1.55;
  color: var(--ros-body);
  margin-top: 10px;
  font-family: var(--ros-font-body);
}

/* --- PROCESS (diensten) --- */
.ros-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--ros-line);
  border: 1px solid var(--ros-line);
}
.ros-process-card {
  background: var(--ros-beige-light);
  padding: 32px 26px;
}
.ros-process-card .ros-idx {
  font-family: var(--ros-font-label);
  font-size: 18px;
  color: var(--ros-stone);
}
.ros-process-card h3 {
  font-size: 22px;
  margin-top: 12px;
  font-family: var(--ros-font-heading);
  font-weight: 600;
  color: var(--ros-ink);
}
.ros-process-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ros-body);
  margin-top: 10px;
  font-family: var(--ros-font-body);
}

/* --- CTA BAND (diensten / over-ons / realisaties) --- */
.ros-cta-band {
  position: relative;
  background: var(--ros-bordeaux);
  color: var(--ros-beige-light);
  text-align: center;
  padding: 72px 0;
}
.ros-cta-band .ros-eyebrow {
  color: var(--ros-rose);
}
.ros-cta-band h2 {
  color: var(--ros-beige-light);
  font-size: clamp(30px, 4.2vw, 44px);
  margin-top: 12px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--ros-font-heading);
  font-weight: 600;
}
.ros-cta-band p {
  color: var(--ros-cream);
  margin-top: 14px;
  font-size: 26px;
  font-family: var(--ros-font-body);
}
/* SCOPED: the sub-pages redefined .btn-primary globally to this inverse style
     because the CTA band was the only button on those pages. Left global it
     would repaint the home hero buttons. */
.ros-cta-band .ros-btn-primary {
  display: inline-block;
  margin-top: 28px;
  background: var(--ros-beige-light);
  color: var(--ros-bordeaux-dark);
  padding: 14px 28px;
  border-radius: var(--ros-radius);
  text-decoration: none;
  font-size: 22px;
  font-family: var(--ros-font-label);
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.ros-cta-band .ros-btn-primary:hover {
  background: var(--ros-beige-light);
  color: var(--ros-bordeaux-dark);
  transform: translateY(-1px);
}

/* --- STORY + ITS OWN STAT CARD (over-ons) --- */
.ros-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
.ros-story-grid p {
  font-size: 24px;
  line-height: 1.65;
  color: var(--ros-body);
  margin: 0 0 18px;
  font-family: var(--ros-font-body);
}
.ros-story-stat-card {
  background: var(--ros-beige-light);
  border: 1px solid var(--ros-line);
  padding: 26px;
  border-radius: var(--ros-radius);
}
.ros-story-stat-card + .ros-story-stat-card {
  margin-top: 14px;
}
.ros-story-stat-card .ros-stat-num {
  font-family: var(--ros-font-heading);
  font-size: 48px;
  color: var(--ros-bordeaux);
}
.ros-story-stat-card .ros-stat-label {
  font-size: 20px;
  color: var(--ros-stone);
  margin-top: 4px;
  font-family: var(--ros-font-body);
}

/* --- VALUES (over-ons) --- */
.ros-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ros-line);
  border: 1px solid var(--ros-line);
}
.ros-value-card {
  background: var(--ros-beige-light);
  padding: 36px 30px;
}
.ros-value-card .ros-idx {
  font-family: var(--ros-font-label);
  font-size: 18px;
  color: var(--ros-stone);
}
.ros-value-card h3 {
  font-size: 32px;
  margin-top: 12px;
  font-family: var(--ros-font-heading);
  font-weight: 600;
  color: var(--ros-ink);
}
.ros-value-card p {
  font-size: 23px;
  line-height: 1.55;
  color: var(--ros-body);
  margin-top: 10px;
  font-family: var(--ros-font-body);
}

/* --- NOTE BOXES: three distinct boxes across the pages --- */
.ros-intro-note {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ros-body);
  margin: 0 0 48px;
  padding: 20px 22px;
  background: var(--ros-beige-light);
  border: 1px solid var(--ros-line);
  border-radius: var(--ros-radius);
  font-family: var(--ros-font-body);
}
.ros-region-note {
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--ros-beige-light);
  border: 1px solid var(--ros-line);
  border-radius: var(--ros-radius);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ros-body);
  font-family: var(--ros-font-body);
}

/* --- ACCORDION (realisaties), native <details> --- */
.ros-accordion {
  border-top: 1px solid var(--ros-line);
}
.ros-acc-item {
  border-bottom: 1px solid var(--ros-line);
}
.ros-acc-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 4px;
  transition: background 0.2s ease;
}
.ros-acc-item summary::-webkit-details-marker {
  display: none;
}
.ros-acc-item summary:hover {
  background: var(--ros-beige-light);
}
.ros-acc-tag {
  font-family: var(--ros-font-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ros-bordeaux);
  border: 1px solid var(--ros-bordeaux);
  border-radius: var(--ros-radius);
  padding: 4px 10px;
  flex-shrink: 0;
}
.ros-acc-title {
  font-size: 23px;
  font-weight: 600;
  flex: 1;
}
.ros-acc-meta {
  font-size: 14px;
  color: var(--ros-stone);
  font-family: var(--ros-font-label);
  flex-shrink: 0;
  white-space: nowrap;
}
.ros-acc-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--ros-bordeaux);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ros-bordeaux);
  font-size: 18px;
  transition: transform 0.25s ease;
}
.ros-acc-item[open] .ros-acc-icon {
  transform: rotate(45deg);
}
.ros-acc-body {
  padding: 0 4px 32px;
  max-width: 760px;
}
.ros-acc-body p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ros-body);
  margin: 0 0 14px;
  font-family: var(--ros-font-body);
}
.ros-acc-body .ros-acc-specs {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ros-acc-body .ros-acc-specs div {
  font-size: 14px;
  color: var(--ros-stone);
}
.ros-acc-body .ros-acc-specs strong {
  display: block;
  color: var(--ros-ink);
  font-size: 16px;
  font-weight: 600;
}

/* --- CONTACT PAGE VARIANTS (roomier than the home versions) --- */
.ros-contact-field {
  margin-bottom: 18px;
}
.ros-contact-field label {
  display: block;
  font-family: var(--ros-font-label);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ros-stone);
  margin-bottom: 10px;
}
.ros-contact-field input,
.ros-contact-field textarea {
  width: 100%;
  background: var(--ros-beige-light);
  border: 1px solid var(--ros-line);
  padding: 14px 16px;
  font-family: var(--ros-font-body);
  font-size: 22px;
  color: var(--ros-ink);
  border-radius: var(--ros-radius);
}
.ros-contact-field textarea {
  min-height: 150px;
  resize: vertical;
}
.ros-contact-field input:focus,
.ros-contact-field textarea:focus {
  outline: 2px solid var(--ros-bordeaux);
  outline-offset: 1px;
}
.ros-page-contact-info .ros-row {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ros-line);
}
.ros-page-contact-info .ros-row .ros-eyebrow {
  width: 140px;
  flex-shrink: 0;
}
.ros-page-contact-info .ros-row div:last-child {
  font-size: 17px;
  line-height: 1.6;
}

/* --- SUB-PAGE FOOTER: a genuinely different component from the home footer.
     `footer.wrap` out-specified `.wrap` there, so its 48/32/60 padding applied
     (home's bare `footer` lost, computing to 0 32px). --- */
.ros-page-footer {
  padding: 48px 32px 60px;
  border-top: 1px solid var(--ros-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ros-page-footer .ros-logo {
  display: block;
  line-height: 0;
}
.ros-page-footer .ros-logo img {
  height: 34px;
  width: auto;
  display: block;
  border-radius: 3px;
}

/* The home-variant footer component was dropped, and the meta rule that came
     with it was scoped to that footer. On the sub-pages the equivalent rule hung
     off the bare `footer` tag and so styled BOTH footers; unscoped here, the
     surviving footer keeps its 13px meta line instead of falling back to 16px. */
.ros-foot-meta {
  font-size: 13px;
  color: var(--stone);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
     RESPONSIVE LAYER
     Appended after the original rules. Everything here is either inside a
     max-width media query or provably a no-op above 1024px, so the desktop
     rendering stays identical to the source prototype.
     ========================================================================== */

:root {
  --ros-nav-h: 76px;
}

/* Scoped below desktop so the >1024px computed styles stay byte-identical to
     the source (verified: the only desktop delta this caused was img max-width
     none -> 100%, with no rendered effect). */
@media (max-width: 1024px) {
  img {
    max-width: 100%;
  }
}
html {
  -webkit-text-size-adjust: 100%;
}
/* `clip`, not `hidden`: overflow:hidden on html/body would make it a scroll
     container and break the sticky header. */
html,
body {
  overflow-x: clip;
}

/* Same computed value as the original at desktop; the variable only changes
     once the nav shrinks on small screens. */
.ros-hero {
  min-height: calc(100vh - var(--ros-nav-h));
}
@supports (height: 100svh) {
  /* svh === vh on desktop, so no visual change there; on mobile it stops the
       hero jumping as the browser chrome shows/hides. */
  .ros-hero {
    min-height: calc(100svh - var(--ros-nav-h));
  }
}

/* The two headings that shipped with inline white-space:nowrap. */
.ros-nowrap-desktop {
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .ros-nowrap-desktop {
    white-space: normal;
  }
}

/* ---- off-canvas nav: fully inert above the nav breakpoint ---- */
.ros-nav-toggle,
.ros-nav-overlay,
.ros-mobile-nav {
  display: none;
}

@media (max-width: 900px) {
  .ros-navlinks,
  .ros-navcta {
    display: none;
  }

  .ros-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    margin-right: -9px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .ros-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition:
      transform 0.25s ease,
      opacity 0.2s ease;
  }
  .ros-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .ros-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .ros-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .ros-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(42, 23, 29, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
  }
  .ros-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .ros-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(360px, 86vw);
    padding: 18px 24px 32px;
    background: var(--beige-light);
    box-shadow: -8px 0 28px rgba(42, 23, 29, 0.28);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.3s ease,
      visibility 0.3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ros-mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .ros-mobile-nav-close {
    align-self: flex-end;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    padding: 2px 6px;
  }
  .ros-mobile-nav-links {
    display: flex;
    flex-direction: column;
  }
  .ros-mobile-nav-links a {
    display: block;
    padding: 14px 2px;
    font-size: 20px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .ros-mobile-nav .ros-btn-primary {
    display: block;
    margin-top: 20px;
    text-align: center;
  }
  .ros-mobile-nav-meta {
    margin-top: auto;
    padding-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--stone);
  }
  .ros-mobile-nav-meta a {
    text-decoration: none;
  }
  body.ros-nav-open {
    overflow: hidden;
  }
}

/* ---- tablet ---- */
@media (max-width: 1024px) {
  .ros-topbar .ros-wrap {
    height: auto;
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .ros-section {
    padding: 72px 0;
  }
  .ros-section-head {
    margin-bottom: 44px;
  }
  .ros-lede {
    font-size: clamp(17px, 2.4vw, 26px);
  }
  .ros-about-grid p {
    font-size: clamp(17px, 2.2vw, 24px);
  }
  .ros-stat-card .ros-stat-num {
    font-size: clamp(34px, 5vw, 48px);
  }
  .ros-service-card h3 {
    font-size: clamp(22px, 3.2vw, 32px);
  }
  .ros-service-card p {
    font-size: clamp(16px, 2vw, 23px);
  }
  .ros-portfolio-empty p {
    font-size: clamp(16px, 2vw, 23px);
  }
  .ros-btn-primary,
  .ros-btn-ghost {
    font-size: clamp(17px, 2.2vw, 22px);
  }

  /* Long Dutch compounds ("Bandendrukwisselsystemen") have a min-content
       width wider than a narrow phone column. Grid/flex children default to
       min-width:auto, so that min-content floors the track and pushes the card
       past the viewport edge (silently clipped by overflow-x). Let the tracks
       shrink, and let the words themselves break. */
  .ros-services-grid > *,
  .ros-about-grid > *,
  .ros-contact-grid > *,
  .ros-hero-inner > * {
    min-width: 0;
  }
  .ros-hero h1,
  .ros-lede,
  .ros-section-head h2,
  .ros-field-banner h2,
  .ros-service-card h3,
  .ros-service-card p,
  .ros-about-grid p,
  .ros-portfolio-empty p,
  .ros-stat-label,
  .ros-foot-meta,
  .ros-contact-info,
  .ros-mobile-nav-links a {
    overflow-wrap: break-word;
  }
  /* Hyphenation only on headings: that is where the unbreakable compounds
       sit ("Bandendrukwisselsystemen" is wider than a 320px column at h3
       size), and applying it to body copy hyphenates nearly every line. */
  .ros-hero h1,
  .ros-section-head h2,
  .ros-field-banner h2,
  .ros-service-card h3 {
    hyphens: auto;
  }

  /* .ros-hero-inner centres its children (align-items:center), which makes
       them shrink-to-fit — their width comes from min-content. `break-word`
       does NOT reduce min-content, so a long compound still forced the lede
       wider than the viewport; `anywhere` does reduce it. */
  .ros-hero-inner > * {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 900px) {
  .ros-hero {
    padding: 96px 0 80px;
  }
  .ros-service-card {
    padding: 28px 24px;
  }
  .ros-field-banner {
    height: auto;
    min-height: 420px;
  }
}

@media (max-width: 820px) {
  /* minmax(0,1fr) rather than 1fr: a bare 1fr track still refuses to shrink
       below its content's min-content width. */
  .ros-about-grid,
  .ros-contact-grid {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .ros-services-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ros-section {
    padding: 56px 0;
  }
  .ros-section-head {
    margin-bottom: 32px;
  }
  .ros-portfolio-empty {
    padding: 32px 22px;
  }
}

@media (max-width: 560px) {
  :root {
    --ros-nav-h: 64px;
  }
  .ros-wrap {
    padding: 0 20px;
  }
  .ros-nav {
    height: 64px;
  }
  .ros-logo {
    height: 44px;
  }
  .ros-section {
    padding: 44px 0;
  }
  .ros-hero {
    padding: 72px 0 64px;
  }
  .ros-hero-ctas {
    margin-top: 28px;
    gap: 12px;
  }
  .ros-eyebrow {
    font-size: 15px;
  }
  .ros-stat-card {
    padding: 22px;
  }
  .ros-about-photo img {
    height: 200px;
  }
  .ros-field-banner {
    min-height: 340px;
  }
  .ros-field-banner-inner {
    padding-bottom: 28px;
  }
  .ros-field label {
    font-size: 15px;
  }
  .ros-field input,
  .ros-field textarea {
    font-size: 17px;
  }
}

@media (max-width: 400px) {
  .ros-hero-ctas {
    flex-direction: column;
    align-self: stretch;
  }
  .ros-hero-ctas .ros-btn-primary,
  .ros-hero-ctas .ros-btn-ghost {
    display: block;
    text-align: center;
  }
  .ros-contact-info .ros-row {
    flex-direction: column;
    gap: 4px;
  }
  .ros-contact-info .ros-row .ros-eyebrow {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ros-js .ros-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ros-nav-overlay,
  .ros-mobile-nav,
  .ros-nav-toggle span {
    transition: none;
  }
}

/* ---------- responsive layer for the merged-in components ---------- */
@media (max-width: 1024px) {
  .ros-section-compact {
    padding: 72px 0;
  }
  .ros-section-head-compact {
    margin-bottom: 40px;
  }
  .ros-section-head-tight {
    margin-bottom: 28px;
  }
  .ros-intro p,
  .ros-story-grid p {
    font-size: clamp(17px, 2.2vw, 24px);
  }
  .ros-service-photo-card h3,
  .ros-value-card h3 {
    font-size: clamp(22px, 3.2vw, 32px);
  }
  .ros-service-photo-card p,
  .ros-value-card p {
    font-size: clamp(16px, 2vw, 23px);
  }
  .ros-cta-band p {
    font-size: clamp(17px, 2.4vw, 26px);
  }
  .ros-cta-band .ros-btn-primary {
    font-size: clamp(17px, 2.2vw, 22px);
  }
  .ros-story-stat-card .ros-stat-num {
    font-size: clamp(34px, 5vw, 48px);
  }
  .ros-acc-title {
    font-size: clamp(18px, 2.4vw, 23px);
  }
  /* long-compound guard, same as the home build */
  .ros-services-photo-grid > *,
  .ros-process-grid > *,
  .ros-values-grid > *,
  .ros-story-grid > * {
    min-width: 0;
  }
  .ros-page-hero h1,
  .ros-intro p,
  .ros-story-grid p,
  .ros-cta-band h2,
  .ros-service-photo-card h3,
  .ros-service-photo-card p,
  .ros-value-card h3,
  .ros-value-card p,
  .ros-process-card h3,
  .ros-process-card p,
  .ros-acc-title,
  .ros-acc-body p,
  .ros-intro-note,
  .ros-region-note {
    overflow-wrap: break-word;
  }
  .ros-page-hero h1,
  .ros-cta-band h2,
  .ros-service-photo-card h3,
  .ros-value-card h3,
  .ros-process-card h3 {
    hyphens: auto;
  }
}

@media (max-width: 900px) {
  .ros-page-hero {
    height: auto;
    min-height: 420px;
  }
  .ros-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ros-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ros-service-photo-card {
    padding: 24px 22px 28px;
  }
}

@media (max-width: 820px) {
  .ros-story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 700px) {
  .ros-section-compact {
    padding: 56px 0;
  }
  .ros-services-photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ros-process-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ros-values-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ros-cta-band {
    padding: 56px 0;
  }
  .ros-intro-note {
    margin-bottom: 32px;
  }
  .ros-page-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  /* Original hid .acc-meta outright; keep the content and drop it to its own
       line instead so nothing is lost on mobile. */
  .ros-acc-item summary {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 20px 4px;
  }
  .ros-acc-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ros-acc-icon {
    order: 2;
  }
  .ros-acc-meta {
    order: 3;
    flex: 1 0 100%;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .ros-section-compact {
    padding: 44px 0;
  }
  .ros-page-hero {
    min-height: 340px;
  }
  /* Full shorthand, not just the inline padding: at this breakpoint the base
       `.ros-wrap{padding:0 20px}` rule ties on specificity and comes later, so
       a `padding-left/right`-only rule here would leave the footer with zero
       vertical padding. (The sub-page original dodged this because
       `footer.wrap` out-specified `.wrap`.) */
  .ros-page-footer {
    padding: 36px 20px 44px;
  }
  .ros-cta-band {
    padding: 44px 0;
  }
  .ros-service-photo {
    height: 200px;
    margin-bottom: 16px;
  }
  .ros-value-card,
  .ros-process-card {
    padding: 24px 20px;
  }
  .ros-story-stat-card {
    padding: 22px;
  }
  .ros-intro-note,
  .ros-region-note {
    padding: 16px 18px;
    font-size: 15.5px;
  }
  .ros-acc-body .ros-acc-specs {
    gap: 16px;
  }
  .ros-contact-field input,
  .ros-contact-field textarea {
    font-size: 17px;
    padding: 12px 14px;
  }
  .ros-contact-field label {
    font-size: 15px;
  }
}

@media (max-width: 400px) {
  .ros-page-contact-info .ros-row {
    flex-direction: column;
    gap: 4px;
  }
  .ros-page-contact-info .ros-row .ros-eyebrow {
    width: auto;
  }
}

/* ==========================================================================
   WIDGET AFFORDANCES — appended by build_plugin_assets.py, not in the master.
   The static prototype had no linked topbar items, so nothing there removed the
   browser's default underline. The Topbar widget exposes a Link control (used
   by the tel:/mailto: defaults), so linked items need the same treatment the
   social links already get — otherwise they render underlined, unlike the
   approved design.
   ========================================================================== */

.ros-topbar-left a {
  color: inherit;
  text-decoration: none;
}
.ros-topbar-left a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   DYNAMIC CARD-GRID TRACKS — appended, not in the master.
   The grids paint their hairlines as a 2px gap over a tinted background, so a
   row with fewer cards than columns shows an empty bordered cell. The widget
   emits data-cols (card count, capped at the grid's natural columns) and these
   rules narrow the track count to match, letting a short row span full width.
   Gated by min-width so the responsive layer's own column counts still win
   below each breakpoint; the attribute selector outranks the base rule.
   ========================================================================== */

@media (min-width: 901px) {
  .ros-services-grid[data-cols="1"],
  .ros-services-photo-grid[data-cols="1"],
  .ros-process-grid[data-cols="1"],
  .ros-values-grid[data-cols="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .ros-process-grid[data-cols="2"],
  .ros-values-grid[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ros-process-grid[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Between the grid breakpoints the two-column layouts would still strand a
   lone card next to an empty cell. */
@media (min-width: 701px) and (max-width: 900px) {
  .ros-services-grid[data-cols="1"],
  .ros-services-photo-grid[data-cols="1"],
  .ros-process-grid[data-cols="1"],
  .ros-values-grid[data-cols="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   FORM EMBED — appended by build_plugin_assets.py, not part of the master file.
   The contact widgets embed a third-party form, whose markup the .ros-field
   selectors above cannot reach. These rules restate the same declarations
   against the embedded form. No existing class or rule is modified.

   SPECIFICITY NOTE: WPForms ships rules like
       div.wpforms-container-full .wpforms-form input[type=text]   -> (0,3,2)
   so the generic selectors below, at (0,2,1), lose to it. The WPForms section
   therefore mirrors that shape with our wrapper in front, reaching (0,4,2).
   WPForms' own inline <style id="wpforms-css-vars-N"> only declares custom
   properties under an #id; we override the resulting *properties* directly
   rather than the variables, so that ID specificity never comes into play and
   no !important is needed.
   ========================================================================== */

/* ---- generic: Contact Form 7, Forminator, plain markup ---- */

.ros-contact-form-embed label,
.ros-page-contact-form-embed label {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.ros-contact-form-embed label {
  margin-bottom: 8px;
}
.ros-page-contact-form-embed label {
  margin-bottom: 10px;
}

.ros-contact-form-embed input[type="text"],
.ros-contact-form-embed input[type="email"],
.ros-contact-form-embed input[type="tel"],
.ros-contact-form-embed input[type="url"],
.ros-contact-form-embed input[type="number"],
.ros-contact-form-embed select,
.ros-contact-form-embed textarea,
.ros-page-contact-form-embed input[type="text"],
.ros-page-contact-form-embed input[type="email"],
.ros-page-contact-form-embed input[type="tel"],
.ros-page-contact-form-embed input[type="url"],
.ros-page-contact-form-embed input[type="number"],
.ros-page-contact-form-embed select,
.ros-page-contact-form-embed textarea {
  width: 100%;
  background: var(--beige-light);
  border: 1px solid var(--line);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 22px;
  color: var(--ink);
  border-radius: 2px;
}
.ros-contact-form-embed input,
.ros-contact-form-embed select,
.ros-contact-form-embed textarea {
  padding: 12px 14px;
}
.ros-page-contact-form-embed input,
.ros-page-contact-form-embed select,
.ros-page-contact-form-embed textarea {
  padding: 14px 16px;
}
.ros-contact-form-embed textarea {
  min-height: 110px;
  resize: vertical;
}
.ros-page-contact-form-embed textarea {
  min-height: 150px;
  resize: vertical;
}

.ros-contact-form-embed input:focus,
.ros-contact-form-embed textarea:focus,
.ros-contact-form-embed select:focus,
.ros-page-contact-form-embed input:focus,
.ros-page-contact-form-embed textarea:focus,
.ros-page-contact-form-embed select:focus {
  outline: 2px solid var(--bordeaux);
  outline-offset: 1px;
}

.ros-contact-form-embed button,
.ros-contact-form-embed input[type="submit"],
.ros-page-contact-form-embed button,
.ros-page-contact-form-embed input[type="submit"] {
  background: var(--bordeaux);
  color: var(--beige-light);
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  display: inline-block;
  width: auto;
}
.ros-contact-form-embed button:hover,
.ros-contact-form-embed input[type="submit"]:hover,
.ros-page-contact-form-embed button:hover,
.ros-page-contact-form-embed input[type="submit"]:hover {
  background: var(--bordeaux-dark);
  transform: translateY(-1px);
}

/* ---- WPForms (classic and modern render) ---- */

/* Strip the plugin's own container chrome: the section already provides it. */
.ros-contact-form-embed div.wpforms-container,
.ros-page-contact-form-embed div.wpforms-container {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* WPForms spaces fields with padding driven by a CSS variable; the design
   spaces them with a flat 18px margin instead. */
.ros-contact-form-embed div.wpforms-container .wpforms-form .wpforms-field,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field {
  padding: 0;
  margin: 0 0 18px;
  clear: both;
}

.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-label,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-label {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-label {
  margin: 0 0 8px;
}
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-label {
  margin: 0 0 10px;
}

/* Sub-labels and the required asterisk pick up the palette. */
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-sublabel,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-sublabel {
  font-family: "IBM Plex Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: var(--stone);
}
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-required-label,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-required-label {
  color: var(--bordeaux);
}

/* Inputs. `height:auto` is required because modern render sets an explicit
   height from --wpforms-field-size-input-height, which would fight our padding. */
.ros-contact-form-embed div.wpforms-container .wpforms-form input[type="text"],
.ros-contact-form-embed div.wpforms-container .wpforms-form input[type="email"],
.ros-contact-form-embed div.wpforms-container .wpforms-form input[type="tel"],
.ros-contact-form-embed div.wpforms-container .wpforms-form input[type="url"],
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="number"],
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="password"],
.ros-contact-form-embed div.wpforms-container .wpforms-form select,
.ros-contact-form-embed div.wpforms-container .wpforms-form textarea,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="text"],
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="email"],
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="tel"],
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="url"],
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="number"],
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input[type="password"],
.ros-page-contact-form-embed div.wpforms-container .wpforms-form select,
.ros-page-contact-form-embed div.wpforms-container .wpforms-form textarea {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--beige-light);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: none;
}

.ros-contact-form-embed div.wpforms-container .wpforms-form input,
.ros-contact-form-embed div.wpforms-container .wpforms-form select,
.ros-contact-form-embed div.wpforms-container .wpforms-form textarea {
  padding: 12px 14px;
}
.ros-page-contact-form-embed div.wpforms-container .wpforms-form input,
.ros-page-contact-form-embed div.wpforms-container .wpforms-form select,
.ros-page-contact-form-embed div.wpforms-container .wpforms-form textarea {
  padding: 14px 16px;
}

.ros-contact-form-embed div.wpforms-container .wpforms-form textarea {
  min-height: 110px;
  resize: vertical;
}
.ros-page-contact-form-embed div.wpforms-container .wpforms-form textarea {
  min-height: 150px;
  resize: vertical;
}

/* WPForms' width classes cap the field; the design runs them full width. */
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-small,
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-medium,
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-large,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-small,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-medium,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-field-large {
  max-width: 100%;
  width: 100%;
}

.ros-contact-form-embed div.wpforms-container .wpforms-form input:focus,
.ros-contact-form-embed div.wpforms-container .wpforms-form select:focus,
.ros-contact-form-embed div.wpforms-container .wpforms-form textarea:focus,
.ros-page-contact-form-embed div.wpforms-container .wpforms-form input:focus,
.ros-page-contact-form-embed div.wpforms-container .wpforms-form select:focus,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  textarea:focus {
  outline: 2px solid var(--bordeaux);
  outline-offset: 1px;
  border-color: var(--line);
  box-shadow: none;
}

.ros-contact-form-embed div.wpforms-container .wpforms-form ::placeholder,
.ros-page-contact-form-embed div.wpforms-container .wpforms-form ::placeholder {
  color: var(--stone);
  opacity: 1;
}

/* Submit. */
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-submit-container,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  .wpforms-submit-container {
  padding: 0;
  margin: 0;
}

.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  button[type="submit"],
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  button[type="submit"] {
  background-color: var(--bordeaux) !important;
  color: var(--beige-light);
  padding: 14px 26px;
  height: auto;
  width: auto;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  box-shadow: none;
}
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  button[type="submit"]:hover,
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  button[type="submit"]:focus,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  button[type="submit"]:hover,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  button[type="submit"]:focus {
  background: var(--bordeaux-dark);
  color: var(--beige-light);
  transform: translateY(-1px);
}

/* Validation messages, in the palette rather than WPForms' default red. */
.ros-contact-form-embed div.wpforms-container .wpforms-form label.wpforms-error,
.ros-contact-form-embed div.wpforms-container .wpforms-form em.wpforms-error,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  label.wpforms-error,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  em.wpforms-error {
  display: block;
  margin-top: 6px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bordeaux);
}
.ros-contact-form-embed div.wpforms-container .wpforms-form input.wpforms-error,
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-form
  textarea.wpforms-error,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  input.wpforms-error,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-form
  textarea.wpforms-error {
  border-color: var(--bordeaux);
}

.ros-contact-form-embed
  div.wpforms-container
  .wpforms-confirmation-container-full,
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-confirmation-container-full {
  background: var(--beige-light);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--body);
  font-family: "IBM Plex Sans", sans-serif;
}

/* WPForms' anti-spam decoy field is a real, visible field in the markup that is
   only marked aria-hidden. Belt-and-braces in case its own stylesheet is
   deferred; harmless where :has() is unsupported. */
.ros-contact-form-embed
  div.wpforms-container
  .wpforms-field:has(> label[aria-hidden="true"]),
.ros-page-contact-form-embed
  div.wpforms-container
  .wpforms-field:has(> label[aria-hidden="true"]) {
  display: none !important;
}

@media (max-width: 560px) {
  .ros-contact-form-embed input,
  .ros-contact-form-embed select,
  .ros-contact-form-embed textarea,
  .ros-page-contact-form-embed input,
  .ros-page-contact-form-embed select,
  .ros-page-contact-form-embed textarea {
    font-size: 17px;
    padding: 12px 14px;
  }
  .ros-contact-form-embed label,
  .ros-page-contact-form-embed label {
    font-size: 15px;
  }

  .ros-contact-form-embed div.wpforms-container .wpforms-form input,
  .ros-contact-form-embed div.wpforms-container .wpforms-form select,
  .ros-contact-form-embed div.wpforms-container .wpforms-form textarea,
  .ros-page-contact-form-embed div.wpforms-container .wpforms-form input,
  .ros-page-contact-form-embed div.wpforms-container .wpforms-form select,
  .ros-page-contact-form-embed div.wpforms-container .wpforms-form textarea {
    font-size: 17px;
    padding: 12px 14px;
  }
  .ros-contact-form-embed
    div.wpforms-container
    .wpforms-form
    .wpforms-field-label,
  .ros-page-contact-form-embed
    div.wpforms-container
    .wpforms-form
    .wpforms-field-label {
    font-size: 15px;
  }
  .ros-contact-form-embed
    div.wpforms-container
    .wpforms-form
    button[type="submit"],
  .ros-page-contact-form-embed
    div.wpforms-container
    .wpforms-form
    button[type="submit"] {
    font-size: 18px;
    padding: 12px 22px;
  }
}