/* ==========================================================================
   Sofoco — site stylesheet
   Plain CSS. No build step, no preprocessor. Edit this file directly.

   Contents
     1.  Brand tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Buttons, links, eyebrows
     5.  Header & logo
     6.  Hero
     7.  Who we are
     8.  Why BricsCAD
     9.  Four pillars
     10. CTA banner
     11. Testimonials
     12. Clients
     13. Footer
     14. Case studies
     15. Contact form
     16. Utilities

   Breakpoints match the original build: 640px, 768px, 1024px.
   ========================================================================== */


/* 1. Brand tokens ========================================================= */

:root {
  --sofoco-blue:       #303F9F;  /* primary brand blue, buttons and headings */
  --sofoco-blue-deep:  #1269CA;  /* logo mark, footer bar, button hover */
  --sofoco-ink:        #1a1a1c;  /* near-black panels */
  --sofoco-green:      #00C282;  /* accent, eyebrows on dark, links */
  --sofoco-cyan:       #00C5D1;  /* secondary accent, footer headings */

  --text:              #333333;
  --text-muted:        #555555;
  --text-soft:         #666666;
  --text-grey:         #7f7f7f;
  --text-faint:        #9a9a9a;

  --surface:           #ffffff;
  --surface-alt:       #f5f5f5;
  --hairline:          rgba(0, 0, 0, 0.1);

  --page-max:          1200px;
  --page-pad:          1.25rem;   /* 2rem from 768px up */

  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}


/* 2. Reset & base ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* Images carry width/height attributes to reserve space and avoid layout
   shift; height:auto keeps them scaling by aspect ratio rather than locking
   to the attribute value. */
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
}

::selection {
  background: var(--sofoco-blue);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--sofoco-green);
  outline-offset: 3px;
}


/* 3. Layout primitives ==================================================== */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* Standard vertical rhythm for the homepage bands. */
.section {
  padding-block: 5rem;
}

.section--alt  { background: var(--surface-alt); }
.section--tint { background: var(--surface); }

.section__head {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

/* Two-column split used by "Why BricsCAD" and "Clients". */
.split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.prose > * + * { margin-top: 1.25rem; }

.prose {
  color: var(--text-muted);
}

.prose a {
  color: var(--sofoco-green);
  text-decoration: underline;
}

@media (min-width: 768px) {
  :root { --page-pad: 2rem; }
  .section { padding-block: 7rem; }
  .split   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 4. Buttons, links, eyebrows ============================================= */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sofoco-blue);
}

/* Accent variants — the tracking differs per section in the original. */
.eyebrow--green { color: var(--sofoco-green); letter-spacing: 0.24em; }
.eyebrow--cyan  { color: var(--sofoco-cyan);  letter-spacing: 0.28em; }
.eyebrow--hero  { color: var(--sofoco-green); letter-spacing: 0.3em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--sofoco-blue);
  color: #fff;
}
.btn--primary:hover { background: var(--sofoco-blue-deep); }

.btn--light {
  background: #fff;
  color: var(--sofoco-blue);
}
.btn--light:hover {
  background: var(--sofoco-green);
  color: #fff;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--sofoco-blue);
  transition: color 0.15s ease;
}
.read-more:hover { color: var(--sofoco-green); }

.section-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .section-title { font-size: 2.25rem; line-height: 2.5rem; }
}


/* 5. Header & logo ======================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}

.site-header__bar {
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: space-between;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

.nav-link {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;   /* multi-word labels must never break mid-item */
  transition: color 0.15s ease;
}
.nav-link:hover { color: var(--sofoco-blue); }

.icon-btn {
  color: var(--sofoco-blue);
  transition: color 0.15s ease;
  display: grid;
  place-items: center;
}
.icon-btn:hover { color: var(--sofoco-green); }

.nav-toggle { color: var(--sofoco-blue); }

.site-nav-mobile {
  display: none;
  padding: 1rem 1.25rem;
  background: #fff;
  border-top: 1px solid var(--hairline);
}

.site-nav-mobile[data-open="true"] { display: block; }

.site-nav-mobile a {
  display: block;
  padding-block: 0.75rem;
  line-height: 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
}

/* The full menu needs ~1090px to sit comfortably beside the logo (7 items,
   one of them "BricsCAD Training"). Below that the burger menu is used
   instead — otherwise the labels collide with the logo. If you shorten or
   remove a menu item, this can come back down towards 1024px. */
@media (min-width: 1150px) {
  .site-nav    { display: flex; }
  .nav-toggle,
  .site-nav-mobile { display: none !important; }
}

/* Logo lockup — square mark plus stacked wordmark. */
.logo-link { text-decoration: none; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;        /* never let the nav squeeze the lockup */
}

.logo__words { white-space: nowrap; }

.logo__mark {
  position: relative;
  display: grid;
  place-items: end;
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.375rem;
  background: var(--sofoco-blue-deep);
  flex-shrink: 0;
}

.logo__dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background: #fff;
}

.logo__mark-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  color: #fff;
}

.logo__words {
  line-height: 1.05;
  color: var(--sofoco-blue);
}

.logo__name {
  display: block;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.logo__tag {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.logo--light .logo__words { color: #fff; }


/* 6. Hero ================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--sofoco-ink);
  color: #fff;
}

.hero__media,
.band__media {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.hero__inner {
  position: relative;
  display: flex;
  min-height: 78vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 6rem;
  text-align: center;
}

.hero__title {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.hero__lede {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Above 768px the font-size utility also resets line-height to 1. */
@media (min-width: 768px)  { .hero__title { font-size: 3.75rem; line-height: 1; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.5rem;  line-height: 1; } }


/* 7. Who we are =========================================================== */

.who__inner {
  max-width: 48rem;
  text-align: center;
}

.who__body {
  margin-top: 2rem;
  text-align: left;
}

@media (min-width: 768px) {
  .who__body { text-align: center; }
}


/* 8. Why BricsCAD ========================================================= */

.why__media { order: 2; }
.why__copy  { order: 1; }

.feature-list {
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}

.feature-list > li + li { margin-top: 1.5rem; }

.feature {
  display: flex;
  gap: 1rem;
}

.feature__tick {
  margin-top: 0.125rem;
  display: grid;
  place-items: center;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--sofoco-green);
  color: #fff;
}

.feature__title {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.feature__desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .why__media { order: 1; }
  .why__copy  { order: 2; }
}


/* 9. Four pillars ========================================================= */

.pillars {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}

.pillar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
}

.pillar__n {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.pillar__title {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.pillar__icon {
  margin-top: 1.5rem;
  display: block;
  height: 2.5rem;   /* wrapper is 40px around a 36px glyph */
  width: 2.5rem;
}

.pillar__link {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.pillar__link:hover { opacity: 0.7; }

@media (min-width: 640px)  { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* 10. CTA banner ========================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding: 4rem 1.25rem;
  color: #fff;
}

.cta__scrim {
  position: absolute;
  inset: 0;
  background: rgb(48 63 159 / 0.4);
}

.cta__inner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2rem;
}

.cta__title {
  margin-top: 1rem;
  font-size: 1.875rem;
  line-height: 1.25;
}

.cta__body {
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.8);
}

.cta .btn { margin-top: 1.5rem; }

@media (min-width: 768px) {
  .cta        { padding-block: 6rem; }
  .cta__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__title { font-size: 2.25rem; line-height: 2.5rem; }
  .cta__aside { justify-self: end; }
}


/* 11. Testimonials ======================================================== */

.testimonials {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
  color: #fff;
}

.testimonials__inner { position: relative; }

.testimonial-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}

.testimonial {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgb(26 26 28 / 0.9);
}

.testimonial__avatar {
  display: grid;
  place-items: center;
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--sofoco-blue);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.testimonial__quote {
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.8);
}

.testimonial__name {
  margin-top: 1rem;
  font-weight: 600;
}

.testimonial__role {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sofoco-green);
}

@media (min-width: 768px) {
  .testimonials     { padding-block: 7rem; }
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 12. Clients ============================================================= */

.clients__body {
  margin-top: 1.5rem;
  max-width: 28rem;
  line-height: 1.625;
  color: var(--text-soft);
}

.clients__cta { margin-top: 2rem; }

.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.client-logo {
  display: grid;
  place-items: center;
  height: 6rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--hairline);
  background: var(--surface-alt);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.25rem;
  color: var(--text-faint);
  filter: grayscale(1);
  transition: filter 0.15s ease, color 0.15s ease;
}

.client-logo:hover {
  filter: grayscale(0);
  color: var(--sofoco-blue);
}


/* 13. Footer ============================================================== */

.site-footer {
  background: var(--sofoco-ink);
  color: #fff;
}

.site-footer__main { padding-block: 4rem; }

.site-footer__title {
  margin-top: 0.75rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.site-footer__lede {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer__cols {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}

.site-footer__heading {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sofoco-cyan);
}

.site-footer__list {
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__list > li + li { margin-top: 0.5rem; }

.site-footer__list a {
  color: var(--sofoco-green);
  text-decoration: none;
}
.site-footer__list a:hover { text-decoration: underline; }

.site-footer__text {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer__col .read-more {
  margin-top: 1rem;
  color: var(--sofoco-green);
}
.site-footer__col .read-more:hover { color: #fff; }

.site-footer__bar { background: var(--sofoco-blue-deep); }

.site-footer__bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__bar-inner a { text-decoration: none; }
.site-footer__bar-inner a:hover { color: #fff; }

@media (min-width: 768px) {
  .site-footer__title     { font-size: 3rem; line-height: 1; }
  .site-footer__cols      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__bar-inner { flex-direction: row; }
}


/* 14. Case studies ======================================================== */

.breadcrumbs {
  border-bottom: 1px solid var(--hairline);
  background: #fff;
  padding-block: 1rem;
}

.breadcrumbs__current {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}

.breadcrumbs__trail {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  color: var(--sofoco-green);
}

.breadcrumbs__crumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumbs__crumb a { text-decoration: none; }
.breadcrumbs__crumb a:hover { text-decoration: underline; }

.case { padding-block: 3rem; }

.case__meta {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-grey);
}

.case__title {
  margin-top: 1rem;
  font-size: 1.875rem;
  line-height: 1.25;
}

.case__layout {
  display: grid;
  gap: 2.5rem;
}

/* Only the detailed layout has a gap between the title and the grid. */
.case__layout--sidebar { margin-top: 2.5rem; }

.case__gallery > * + * { margin-top: 1rem; }

/* Simple case-study layout: copy under the title, Info panel under that. */
.case__intro { margin-top: 1.5rem; }
.case__aside { margin-top: 2rem; }

.case__figure { position: relative; }

.case__figure img {
  width: 100%;
  border: 1px solid var(--hairline);
}

.case__figure-link {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--sofoco-blue);
}

.case-info {
  border: 1px solid var(--hairline);
  background: var(--surface-alt);
  padding: 1.5rem;
}

.case-info__title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sofoco-blue);
}

.case-info__list {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.case-info__list > div + div { margin-top: 0.75rem; }

.case-info__list dt { font-weight: 600; color: var(--text); }
.case-info__list dd { margin: 0; color: var(--text-soft); }

.project-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-block: 2rem;
}

.project-nav a,
.project-nav span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.project-nav a:hover { color: var(--sofoco-blue); }
.project-nav span    { opacity: 0.35; }

@media (min-width: 768px) {
  .case__title            { font-size: 2.25rem; line-height: 2.5rem; }
  .case__layout--split    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__layout--sidebar  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case__layout--sidebar .case__body { grid-column: span 2 / span 2; }
  .case__title--wide      { max-width: 56rem; }
}

/* Carousel — horizontal scroll of half-width figures. */
.carousel {
  position: relative;
  margin-top: 3rem;
}

.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease;
}

.carousel__slide {
  position: relative;
  width: calc(50% - 0.5rem);
  flex-shrink: 0;
}

.carousel__slide img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.carousel__caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  max-width: 14rem;
  padding: 1.25rem;
  background: rgb(255 255 255 / 0.95);
  box-shadow: var(--shadow-lg);
}

.carousel__caption-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sofoco-blue);
}

.carousel__caption-title {
  margin-top: 0.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sofoco-ink);
}

.carousel__caption-body {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--text-soft);
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--sofoco-blue);
  transition: opacity 0.15s ease;
}

.carousel__btn--prev { left: -0.75rem; }
.carousel__btn--next { right: -0.75rem; }

.carousel__btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

@media (min-width: 768px) {
  .carousel__slide img  { height: 440px; }
  .carousel__btn--prev  { left: -1.25rem; }
  .carousel__btn--next  { right: -1.25rem; }
}


/* 15. Contact form ======================================================== */

/* The contact page splits copy from form; the form gets the wider share. */
@media (min-width: 768px) {
  .split--form {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    align-items: start;
  }
}

.contact__intro {
  margin-top: 1.5rem;
  max-width: 32rem;
  line-height: 1.625;
  color: var(--text-soft);
}

.contact__details {
  margin-top: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.contact__details > div + div { margin-top: 1rem; }

.contact__details dt {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sofoco-blue);
}

.contact__details dd {
  margin: 0.375rem 0 0;
  color: var(--text-soft);
}

.contact__details a {
  color: var(--sofoco-green);
  text-decoration: none;
}
.contact__details a:hover { text-decoration: underline; }

.form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid var(--hairline);
  background: var(--surface-alt);
  padding: 1.75rem;
}

.form__row {
  display: grid;
  gap: 1.25rem;
}

.form__field {
  display: block;
  min-width: 0;
}

.form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}

.form__label em {
  font-style: normal;
  color: var(--sofoco-green);
}

.form input,
.form select,
.form textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-family: inherit;
  /* Keep this at 1rem — iOS Safari zooms the page in when a focused field is
     smaller than 16px. */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Native arrow is removed by appearance:none, so draw one. */
.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23303F9F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.form textarea { resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--sofoco-blue);
  box-shadow: 0 0 0 3px rgb(48 63 159 / 0.15);
}

/* Only flag invalid fields once the field has been interacted with. */
.form input:user-invalid,
.form textarea:user-invalid {
  border-color: #c0392b;
}

.form__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.form__submit[disabled] {
  opacity: 0.55;
  cursor: default;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.form__status:empty { display: none; }

.form__status[data-state="error"] { color: #c0392b; }
.form__status[data-state="sent"]  { color: #0b7a55; font-weight: 600; }

@media (min-width: 640px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 16. BricsCAD training page ============================================== */

.training-hero {
  background: var(--sofoco-blue);
  color: #fff;
  padding-block: 5rem;
}

.training-hero__inner { max-width: 52rem; }

.training-hero .eyebrow { color: var(--sofoco-green); }

.training-hero h1 {
  max-width: 46rem;
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 1.1;
}

.training-hero p:not(.eyebrow) {
  max-width: 42rem;
  margin-top: 1.5rem;
  color: rgb(255 255 255 / 0.82);
  font-size: 1.125rem;
  line-height: 1.625;
}

.training-hero .btn { margin-top: 2rem; }

/* This page has more content blocks than the homepage, so use a tighter
   rhythm to keep the article flowing rather than creating large white gaps. */
.training-section { padding-block: 3.75rem; }

.training-intro {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: 62rem;
}

.training-intro .prose { font-size: 1.125rem; line-height: 1.75; }

.training-callout {
  border-left: 4px solid var(--sofoco-green);
  background: var(--surface-alt);
  padding: 1.5rem;
}

.training-callout p + p { margin-top: 0.75rem; color: var(--text-muted); }

.training-content { max-width: 52rem; }

.training-copy { margin-top: 2rem; line-height: 1.75; }

.training-options {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.training-option {
  border-top: 4px solid var(--sofoco-green);
  background: var(--surface-alt);
  padding: 2rem;
}

.training-option h3 { color: var(--sofoco-blue); font-size: 1.25rem; }
.training-option p { margin-top: 1rem; color: var(--text-muted); line-height: 1.625; }

.training-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.training-list li {
  position: relative;
  padding: 1rem 1rem 1rem 3rem;
  background: #fff;
  color: var(--text-muted);
}

.training-list li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  color: var(--sofoco-green);
  font-weight: 800;
}

@media (min-width: 768px) {
  .training-hero { padding-block: 7rem; }
  .training-hero h1 { font-size: 3.25rem; }
  .training-section { padding-block: 5rem; }
  .training-intro { grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); }
  .training-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 17. Utilities =========================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}