/*
   Website implementation code © 2026 SYMT Limited. All rights reserved.
   Client content, Optimi Global branding and supplied design assets remain
   the property of OptimiGlobal Limited and/or their respective owners.
   Website version: v2.12 — 21.09.2026
*/

/* ===================================================================
   OPTIMI GLOBAL — COMPONENTS
   =================================================================== */

/* ---------------------------------------------------------------
   Logo (image-based, not SVG — per brief)
   --------------------------------------------------------------- */
.logo{ display: inline-flex; align-items: center; }
.logo img{ height: 40px; width: auto; display: block; }
.logo--footer img{ height: 46px; }

/* ---------------------------------------------------------------
   Nav links
   --------------------------------------------------------------- */
.main-nav__links a{
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--c-black);
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}
.main-nav__links a:hover{ color: var(--c-teal-deep); }
.main-nav__links a.is-active{ color: var(--c-teal-deep); }
.main-nav__links a.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--c-teal-mid);
  border-radius: 2px;
}

.nav-toggle{
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  background: var(--c-white);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-black);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.nav-toggle span::before{ position: absolute; top: -6px; }
.nav-toggle span::after{ position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------
   Buttons — two distinct systems used by context:
   .btn--outline  = white fill, black border/text, pill
   .btn--solid    = dark (near-black teal-green) fill, white text, pill
   .btn--submit   = solid black, SHARP corners (contact form only)
   .btn--login    = solid black pill (header only)
   --------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.94rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--outline{
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-black);
}
.btn--outline:hover{
  background: var(--c-black);
  color: var(--c-white);
}

.btn--solid{
  background: var(--c-dark);
  color: var(--c-white);
  border-color: var(--c-dark);
}
.btn--solid:hover{ background: var(--c-dark-2); }

.btn--login{
  background: var(--c-black);
  color: var(--c-white);
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
}
.btn--login:hover{ background: var(--c-dark); }

.btn--submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black);
  color: var(--c-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.8rem;
  font-size: 0.94rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.btn--submit:hover{ background: var(--c-dark); }
.btn--submit:disabled{ opacity: 0.6; cursor: progress; }

.btn--sm{ padding: 0.6rem 1.2rem; font-size: 0.86rem; }

.accent{ color: var(--c-teal-mid); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero h1{ margin-bottom: var(--sp-4); }
.hero__lead{ max-width: 46ch; margin-bottom: var(--sp-6); }

/* ---------------------------------------------------------------
   Squircle pills ("We are...")
   --------------------------------------------------------------- */
.pill-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--sp-4);
}
@media (max-width: 720px){ .pill-row{ grid-template-columns: 1fr; } }

.pill{
  background: var(--c-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------
   Dark squircle cards (Specialist services / reason cards)
   --------------------------------------------------------------- */
.card-dark{
  background: var(--c-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.card-dark h3{ color: var(--c-white); }
.card-dark p{ color: var(--text-on-dark-muted); }

.card-dark__rule{
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.4);
}

/* ---------------------------------------------------------------
   Photo service cards — title ABOVE photo, then body copy
   --------------------------------------------------------------- */
.card-photo{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-align: center;
}
.card-photo h3{ font-size: 1.1rem; }

.card-photo__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3.4;
  background: var(--c-grey-100);
}
.card-photo__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.card-photo:hover .card-photo__media img{ transform: scale(1.04); }

.card-photo p{ color: var(--text-muted); font-size: 0.94rem; }

/* ---------------------------------------------------------------
   Sectors carousel
   --------------------------------------------------------------- */
.sector-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--c-grey-100);
}
.sector-card img{ width: 100%; height: 100%; object-fit: cover; }

.sector-card-label{
  margin-top: var(--sp-3);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-black);
}

.sector-thumb{
  width: 130px;
  height: 130px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-grey-100);
}
.sector-thumb--round{ border-radius: 50%; }
.sector-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.sector-thumb-label{
  margin-top: var(--sp-2);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--c-black);
}

.sector-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 60px;
  color: var(--c-mint-tint-2);
  flex-shrink: 0;
  border: none;
  background: transparent;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.sector-arrow:hover{ color: var(--c-teal-mid); transform: scale(1.08); }
.sector-arrow svg{ width: 30px; height: 30px; }

/* ---------------------------------------------------------------
   Product-register ribbon
   --------------------------------------------------------------- */
.ribbon-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--c-teal-mid);
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 1.3rem 0.7rem;
  border-radius: 16px 0 0 16px;
  box-shadow: -6px 0 18px rgba(15,38,34,0.16);
  transition: padding var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.ribbon-btn:hover{
  background: var(--c-teal-deep);
  padding-inline: 0.9rem;
}

/* ---------------------------------------------------------------
   Approach steps
   --------------------------------------------------------------- */
.approach-step{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  color: var(--c-black);
}
.approach-arrow{ color: var(--c-teal-mid); flex-shrink: 0; display: inline-flex; }
.approach-arrow svg{ width: 26px; height: 26px; }

/* ---------------------------------------------------------------
   CTA band
   --------------------------------------------------------------- */
.cta-band{ text-align: center; }
.cta-band h2{ margin-bottom: var(--sp-4); }
.cta-band p{
  max-width: 62ch;
  margin: 0 auto var(--sp-6);
  color: var(--text-muted);
}

.cta-heading-wrap{
  background: var(--bg-section-tint);
  text-align: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
}
.cta-heading-wrap h2{ max-width: 720px; margin-inline: auto; }

/* ---------------------------------------------------------------
   Segmented tabs
   --------------------------------------------------------------- */
.tabs{
  display: inline-flex;
  background: var(--c-grey-100);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.tabs button{
  border: none;
  background: transparent;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.tabs button.is-active{
  background: var(--c-white);
  color: var(--c-black);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------
   Team member card (About) — text LEFT, photo RIGHT
   --------------------------------------------------------------- */
.team-card{
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 640px){
  .team-card{ grid-template-columns: 1fr; }
  .team-card__photo{ order: -1; max-width: 220px; }
}

.team-photo{
  width: 100%;
  aspect-ratio: 1/1.15;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--c-dark);
  background: var(--c-grey-100);
}
.team-photo img{ width: 100%; height: 100%; object-fit: cover; }

.team-card h3{ margin-bottom: 0.15rem; }
.team-card .role{
  color: var(--c-red);
  font-weight: 700;
  font-size: var(--fs-small);
  margin-bottom: var(--sp-3);
  display: block;
}
.team-card p{ color: var(--text-muted); margin-bottom: var(--sp-3); }
.team-card p:last-child{ margin-bottom: 0; }

/* v2.9 — profile image can be intentionally withheld while preserving biography. */
.team-card.team-card--text-only{ grid-template-columns: 1fr; }

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */
.form-panel{
  background: var(--c-white);
  border: 1.5px solid var(--c-black);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.field{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--sp-4);
}
.field label{
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-black);
}
.field input,
.field select,
.field textarea{
  border: 1.5px solid var(--c-grey-400);
  border-radius: var(--radius-sm);
  padding: 0.72rem 0.85rem;
  background: var(--c-white);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--c-teal-deep);
  outline: none;
}
.field textarea{ resize: vertical; min-height: 110px; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: var(--c-red);
}
.field-error{
  font-size: var(--fs-micro);
  color: var(--c-red-dark);
  display: none;
}
.field.has-error .field-error{ display: block; }

.field-group{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur-med) var(--ease-standard), opacity var(--dur-med) var(--ease-standard), margin var(--dur-med) var(--ease-standard);
  margin-bottom: 0;
}
.field-group.is-visible{
  max-height: 600px;
  opacity: 1;
  margin-bottom: var(--sp-4);
}

.checkbox-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.6rem 1rem;
}
@media (max-width: 480px){ .checkbox-grid{ grid-template-columns: 1fr; } }
.checkbox-field{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
}
.checkbox-field input{
  width: 17px;
  height: 17px;
  accent-color: var(--c-teal-deep);
}

.form-note{
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

.form-status{
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  display: none;
}
.form-status.is-success{
  display: block;
  background: var(--c-mint-tint);
  color: var(--c-dark);
  border: 1px solid var(--c-teal-mid);
}
.form-status.is-error{
  display: block;
  background: #fbeceb;
  color: var(--c-red-dark);
  border: 1px solid var(--c-red);
}

/* Honeypot field — hidden from real users, catches basic bots */
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Contact info list (Contact page, left column) — plain text lines
   --------------------------------------------------------------- */
.contact-info{ margin-top: var(--sp-6); }
.contact-info h3{ font-size: 1.05rem; margin-bottom: var(--sp-2); }
.contact-info p{ color: var(--text-body); font-weight: 500; }
.contact-info a:hover{ color: var(--c-teal-deep); }

/* ---------------------------------------------------------------
   Footer details
   --------------------------------------------------------------- */
.footer-brand p{
  color: var(--text-on-dark-muted);
  margin-top: var(--sp-3);
  max-width: 34ch;
}
.footer-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.footer-links a{
  color: var(--text-on-dark);
  font-size: 0.92rem;
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer-links a:hover{ color: var(--c-teal-mid); }
.footer-links p{ color: var(--text-on-dark); font-size: 0.92rem; }

.footer-bottom{
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--fs-micro);
  color: var(--text-on-dark-muted);
  text-align: center;
}
.footer-bottom a{ color: var(--text-on-dark-muted); text-decoration: underline; }
.footer-bottom a:hover{ color: var(--c-white); }

/* ---------------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Skip link
   --------------------------------------------------------------- */
.skip-link{
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--c-black);
  color: var(--c-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 400;
}
.skip-link:focus{ left: var(--sp-4); top: var(--sp-4); }

/* ---------------------------------------------------------------
   Cookie consent banner
   --------------------------------------------------------------- */
.cookie-banner{
  background: var(--c-white);
  border: 1.5px solid var(--c-black);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-raised);
}
.cookie-banner p{
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.cookie-banner p a{ color: var(--c-black); text-decoration: underline; font-weight: 600; }

.cookie-banner__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.cookie-prefs{
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-hairline);
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
}
.cookie-prefs.is-visible{ display: flex; }

.cookie-prefs__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.cookie-prefs__row strong{ display: block; font-size: var(--fs-small); }
.cookie-prefs__row span{ font-size: var(--fs-micro); color: var(--text-muted); }

.switch{
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.switch input{ opacity: 0; width: 0; height: 0; }
.switch-track{
  position: absolute;
  inset: 0;
  background: var(--c-grey-200);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-standard);
}
.switch-track::before{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--c-white);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.switch input:checked + .switch-track{ background: var(--c-teal-deep); }
.switch input:checked + .switch-track::before{ transform: translateX(18px); }
.switch input:disabled + .switch-track{ opacity: 0.5; }

/* ---------------------------------------------------------------
   Modal (Privacy / Cookie policy)
   --------------------------------------------------------------- */
.modal-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.modal-close{
  background: var(--c-grey-100);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-black);
}
.modal-close:hover{ background: var(--c-grey-200); }

.modal-body h3{ font-size: 1rem; margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.modal-body h3:first-child{ margin-top: 0; }
.modal-body p, .modal-body li{ color: var(--text-muted); font-size: var(--fs-small); margin-bottom: var(--sp-3); }
.modal-body ul{ padding-left: 1.2rem; list-style: disc; }

body.modal-open{ overflow: hidden; }

/* ===================================================================
   MASTER TEMPLATE ALIGNMENT — 10.09.2026
   Refinements agreed against the approved homepage master image.
   =================================================================== */

/* ---------------------------------------------------------------
   Header: larger brand mark, navigation grouped to the right.
   --------------------------------------------------------------- */
.site-header{
  background: var(--c-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-inner{
  justify-content: flex-start;
  gap: 1.6rem;
  padding-block: 0.5rem;
}
.header-inner > .logo{
  flex: 0 0 auto;
}
.logo img{
  height: 74px;
}
.main-nav{
  margin-left: auto;
}
.main-nav__links{
  gap: clamp(1.15rem, 2.1vw, 2.25rem);
}
.header-cta{
  margin-left: 0.2rem;
}
.mobile-product-register{
  display: none;
}

/* ---------------------------------------------------------------
   Buttons: compact rounded rectangles rather than pills.
   --------------------------------------------------------------- */
.btn{
  border-radius: 7px;
  padding: 0.74rem 1.45rem;
}
.btn--login{
  border-radius: 7px;
  padding: 0.62rem 1.35rem;
}
.btn--sm{
  border-radius: 6px;
}

/* ---------------------------------------------------------------
   HERO CAROUSEL IMAGES
   Home, Services, Sectors, Standards and Products each run their own
   independent hero-carousel with real photos (About uses a single
   static hero photo, no carousel, since only one image exists for it).

   To swap or add a slide on any of these pages:
   1. duplicate a .hero-slide block in that page's HTML;
   2. give it the next data-hero number;
   3. add a matching CSS rule below scoped to that page, e.g.
      body[data-page="services"] .hero-slide[data-hero="4"]{
        background-image: [URL to the new hero image file];
      }

   Hero navigation dots are generated automatically by main.js.
   --------------------------------------------------------------- */
body[data-page="home"] .hero--photo{
  background-image: none;
  background-position: initial;
  min-height: 430px;
  padding: 0;
  display: block;
  overflow: hidden;
}
body[data-page="home"] .hero--photo::before{
  content: none;
}
body[data-page="home"] .hero-slides{
  position: relative;
  min-height: 430px;
}
body[data-page="home"] .hero-slide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  min-height: 430px;
  padding-block: 3.6rem 3rem;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(2.5%);
  transition:
    opacity 900ms var(--ease-standard),
    transform 900ms var(--ease-standard),
    visibility 0s linear 900ms;
}
body[data-page="home"] .hero-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.82) 34%,
    rgba(255,255,255,0.34) 62%,
    rgba(255,255,255,0.05) 100%);
}
body[data-page="home"] .hero-slide.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
  z-index: 1;
}
body[data-page="home"] .hero-slide .container{
  position: relative;
  z-index: 2;
  width: 100%;
}
body[data-page="home"] .hero-slide__content{
  max-width: 640px;
}
body[data-page="home"] .hero-slide[data-hero="1"]{
  background-image: url("img/hero-home-1.jpg");
}
body[data-page="home"] .hero-slide[data-hero="2"]{
  background-image: url("img/hero-home-2.jpg");
}
body[data-page="home"] .hero-slide[data-hero="3"]{
  background-image: url("img/hero-home-3.jpg");
}
body[data-page="home"] .hero__lead{
  margin-bottom: 1.9rem;
}
body[data-page="home"] .hero-dots{
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0.95rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin: 0;
}
body[data-page="home"] .hero-dot{
  width: 9px;
  height: 9px;
  min-width: 9px;
  padding: 0;
  border: 1px solid rgba(17,23,22,0.20);
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1px 4px rgba(15,38,34,0.18);
  transition:
    transform var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
body[data-page="home"] .hero-dot:hover{
  transform: scale(1.22);
}
body[data-page="home"] .hero-dot.is-active{
  background: var(--c-red);
  border-color: var(--c-red);
}
body[data-page="home"] .hero-dot:focus-visible{
  outline-offset: 4px;
}

/* ---------------------------------------------------------------
   PRODUCT REGISTER SIDE TAB

   The tab is fixed to the browser's right edge, so it remains at the
   same vertical height while the user scrolls. Its visible left edge is
   rounded and the edge touching the browser is square.

   INITIAL LAUNCH OPTION:
   The visible tab was removed in v2.7 per snag-list approval.
   The class is retained as dormant rollback scaffolding only.
   --------------------------------------------------------------- */
.product-ribbon{
  display: none;
  position: fixed;
  top: 150px;
  right: 0;
  z-index: 55;
  transform: rotate(180deg);
  border-radius: 0 16px 16px 0;
}
body[data-page="products"] .product-ribbon{
  display: none;
}

/* ---------------------------------------------------------------
   Homepage vertical rhythm and section dividers.
   --------------------------------------------------------------- */
body[data-page="home"] .section{
  padding-block: 4rem;
}
body[data-page="home"] .section--tight{
  padding-block: 2.8rem;
}
body[data-page="home"] .section-head{
  margin-bottom: 2.25rem;
}
body[data-page="home"] .home-standards{
  border-top: 10px solid var(--c-mint-tint);
}

/* ---------------------------------------------------------------
   "We are..." connected tabs: rounded tops, square bottoms, sitting
   directly on the transition into the white section below.
   --------------------------------------------------------------- */
body[data-page="home"] .we-are-section{
  padding-top: 2.6rem;
  padding-bottom: 0;
}
body[data-page="home"] .we-are-section .section-head{
  margin-bottom: 1.4rem !important;
}
body[data-page="home"] .pill-row{
  max-width: 980px;
  margin-inline: auto;
  gap: 2px;
}
body[data-page="home"] .pill{
  border-radius: 20px 20px 0 0;
  padding: 1.3rem 1.25rem 1.45rem;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Specialist services: close-set, equal-height rounded cards.
   --------------------------------------------------------------- */
body[data-page="home"] .home-specialist{
  padding-top: 3.4rem;
  padding-bottom: 3.2rem;
}
body[data-page="home"] .specialist-grid{
  max-width: 1000px;
  margin-inline: auto;
  gap: 3px;
}
body[data-page="home"] .specialist-grid .card-dark{
  min-height: 270px;
  border-radius: 26px;
  padding: 2rem 1.65rem;
  justify-content: flex-start;
  gap: 1rem;
}
body[data-page="home"] .specialist-grid .card-dark p{
  line-height: 1.42;
}

/* ---------------------------------------------------------------
   Six-sector carousel. Desktop shows 3, tablet 2, mobile 1.
   The track moves smoothly by one sector at a time.
   --------------------------------------------------------------- */
body[data-page="home"] .sector-carousel{
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  gap: 1.35rem;
  align-items: center;
  outline: none;
}
body[data-page="home"] .sector-carousel:focus-visible{
  outline: 2px solid var(--c-teal-mid);
  outline-offset: 8px;
  border-radius: 12px;
}
body[data-page="home"] .sector-viewport{
  min-width: 0;
  overflow: hidden;
  padding: 0.15rem;
}
body[data-page="home"] .sector-track{
  --sector-gap: clamp(1.2rem, 2.6vw, 2.2rem);
  display: flex;
  gap: var(--sector-gap);
  min-width: 0;
  transform: translate3d(0,0,0);
  transition: transform 650ms var(--ease-standard);
  will-change: transform;
}
body[data-page="home"] .sector-slide{
  flex: 0 0 calc(
    (100% - (var(--sector-visible, 3) - 1) * var(--sector-gap))
    / var(--sector-visible, 3)
  );
  min-width: 0;
}
body[data-page="home"] .sector-card{
  border-radius: 30px;
  aspect-ratio: 1 / 1;
}
body[data-page="home"] .sector-card-label{
  margin-top: 0.8rem;
  font-size: 1.08rem;
  line-height: 1.16;
}
body[data-page="home"] .sector-arrow{
  width: 64px;
  height: 88px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-page="home"] .sector-arrow img{
  width: 52px;
  height: 52px;
  opacity: 0.98;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}
body[data-page="home"] .sector-arrow:hover:not(:disabled) img{
  transform: scale(1.09);
  opacity: 1;
}
body[data-page="home"] .sector-arrow:disabled{
  opacity: 0.28;
  cursor: default;
}
body[data-page="home"] .sector-arrow:disabled:hover{
  transform: none;
}

/* ---------------------------------------------------------------
   Standards / product categories and final CTA.
   --------------------------------------------------------------- */
body[data-page="home"] .home-standards .grid-2,
body[data-page="home"] .home-standards.container{
  align-items: start;
}
body[data-page="home"] .cta-heading-wrap{
  padding: 3rem var(--sp-5) 2.55rem;
}
body[data-page="home"] .cta-band{
  max-width: 920px;
}

/* ---------------------------------------------------------------
   Footer: preserve the current logo size, but use the same tighter
   vertical rhythm for Contact details and Useful links.
   Copyright / cookie / privacy links are intentionally preserved.
   --------------------------------------------------------------- */
.footer-wrap{
  padding-top: 1.5rem;
}
.site-footer{
  padding-block: 2rem 1.25rem;
}
.logo--footer img{
  height: 70px;
}
.footer-grid{
  grid-template-columns: 1.15fr 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
}
.footer-heading{
  margin-bottom: 0.34rem;
}
.footer-links{
  display: grid;
  row-gap: 0.04rem;
}
.footer-links--useful{
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
.footer-links p,
.footer-links a{
  line-height: 1.24;
  margin: 0;
}
.footer-bottom{
  margin-top: 1.3rem;
  padding-top: 0.8rem;
}

/* ---------------------------------------------------------------
   Responsive refinements.
   --------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 900px){
  .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px){
  .logo img{ height: 62px; }
  .logo--footer img{ height: 64px; }
  .main-nav__links{ inset: 86px var(--sp-4) auto var(--sp-4); }
  .mobile-product-register{ display: block; }
  .product-ribbon{ display: none; }

  body[data-page="home"] .sector-carousel{
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    gap: 0.9rem;
    max-width: 820px;
  }
  body[data-page="home"] .sector-arrow{
    width: 54px;
    height: 80px;
  }
  body[data-page="home"] .sector-arrow img{
    width: 44px;
    height: 44px;
  }
  body[data-page="home"] .specialist-grid .card-dark{
    padding-inline: 1.15rem;
    min-height: 245px;
  }
}

@media (max-width: 760px){
  body[data-page="home"] .pill-row{
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  body[data-page="home"] .we-are-section{
    padding-bottom: 1.5rem;
  }
  body[data-page="home"] .pill{
    border-radius: 12px;
    min-height: auto;
    padding: 1rem 1.2rem;
  }
  body[data-page="home"] .specialist-grid{
    gap: 0.7rem;
  }
  body[data-page="home"] .specialist-grid .card-dark{
    min-height: 0;
  }
}

@media (max-width: 640px){
  .header-inner{ gap: 0.75rem; }
  .logo img{ height: 54px; }
  .logo--footer img{ height: 60px; }
  .header-cta{ margin-left: 0; }
  .btn--login{ padding: 0.55rem 0.9rem; }

  body[data-page="home"] .hero--photo,
  body[data-page="home"] .hero-slides,
  body[data-page="home"] .hero-slide{
    min-height: 400px;
  }
  body[data-page="home"] .hero-slide{
    padding-block: 3rem 2.8rem;
    background-position: 58% center;
  }
  body[data-page="home"] .hero-slide::before{
    background: linear-gradient(100deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.87) 56%,
      rgba(255,255,255,0.36) 100%);
  }
  body[data-page="home"] .section{
    padding-block: 3.1rem;
  }
  body[data-page="home"] .section--tight{
    padding-block: 2.25rem;
  }
  body[data-page="home"] .sector-carousel{
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 0.55rem;
  }
  body[data-page="home"] .sector-arrow{
    width: 44px;
    height: 70px;
  }
  body[data-page="home"] .sector-arrow img{
    width: 38px;
    height: 38px;
  }

  .site-footer{
    padding-block: 1.8rem 1.2rem;
  }
  .footer-grid{
    gap: 1.35rem;
  }
  .footer-bottom{
    margin-top: 1.15rem;
  }
}

@media (max-width: 520px){
  .footer-links--useful{
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   CONTACT FORM REFINEMENTS — multi-select sector field and safe grid sizing
   =================================================================== */
.form-grid > .field{
  min-width: 0;
}
.field input,
.field select,
.field textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.field--sector{
  min-width: 0;
}
.multi-select{
  position: relative;
  width: 100%;
  min-width: 0;
}
.multi-select__control{
  min-height: 47px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.38rem 0.34rem 0.7rem;
  border: 1.5px solid var(--c-grey-400);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.multi-select.is-open .multi-select__control,
.multi-select:focus-within .multi-select__control{
  border-color: var(--c-teal-deep);
}
.multi-select__chips{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.multi-select__placeholder{
  color: var(--c-grey-600);
  padding-block: 0.18rem;
}
.multi-select__chip{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
  padding: 0.24rem 0.34rem 0.24rem 0.52rem;
  border-radius: 6px;
  background: var(--c-mint-tint);
  color: var(--c-dark);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.25;
}
.multi-select__chip-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-select__remove{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--c-dark);
  font-size: 1rem;
  line-height: 1;
}
.multi-select__remove:hover{
  background: rgba(23,52,49,0.10);
}
.multi-select__toggle{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--c-black);
  font-size: 1rem;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.multi-select__toggle:hover{
  background: var(--c-grey-50);
}
.multi-select.is-open .multi-select__toggle{
  transform: rotate(180deg);
}
.multi-select__menu{
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.12rem;
  max-height: 290px;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1.5px solid var(--c-grey-400);
  border-radius: 8px;
  background: var(--c-white);
  box-shadow: var(--shadow-raised);
}
.multi-select__menu[hidden]{
  display: none;
}
.multi-select__menu .checkbox-field{
  min-height: 38px;
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  cursor: pointer;
}
.multi-select__menu .checkbox-field:hover{
  background: var(--c-mint-tint);
}
.multi-select__menu .checkbox-field input{
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

@media (max-width: 540px){
  .multi-select__menu{
    position: static;
    margin-top: 0.35rem;
    box-shadow: var(--shadow-card);
  }
}

/* ===================================================================
   V2 ADDITIONS — 12.09.2026
   Alternating-row page template (Sectors/Products/Standards),
   accordions (numbered sector list + icon-card fire-performance),
   smooth multi-select menu, hero-carousel duplicate-slide support,
   reCAPTCHA placeholder, GDPR consent checkbox.
   All motion in this block follows "slow and smooth, no jumps".
   =================================================================== */

/* ---------------------------------------------------------------
   Alternating photo/text rows (Sectors, Products & Materials)
   --------------------------------------------------------------- */
.alt-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-8);
}
.alt-row.is-reversed{ direction: rtl; }
.alt-row.is-reversed > *{ direction: ltr; }
.alt-row__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3.1;
  border: 1.5px solid var(--c-dark);
}
.alt-row__media img{ width: 100%; height: 100%; object-fit: cover; }
.alt-row__text h2{ margin-bottom: var(--sp-4); }
.alt-row__text p{ color: var(--text-muted); margin-bottom: var(--sp-3); }
.alt-row__text p:last-child{ margin-bottom: 0; }
.alt-row__num{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-teal-deep);
  margin-bottom: var(--sp-2);
  display: block;
}

@media (max-width: 820px){
  .alt-row, .alt-row.is-reversed{
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--sp-5);
  }
}

.alt-row-divider{
  display: flex;
  justify-content: center;
  padding-block: var(--sp-3);
  color: var(--c-mint-tint-2);
}
.alt-row-divider svg{ width: 34px; height: 34px; }

.alt-section{ position: relative; }
.alt-section--tint{ background: var(--bg-section-tint); }

/* ---------------------------------------------------------------
   Circular sector thumbnails (Standards page)
   --------------------------------------------------------------- */
.thumb-row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--sp-5);
  max-width: 900px;
  margin-inline: auto;
}
.thumb-row__item{ text-align: center; }
.thumb-row__circle{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.thumb-row__circle img{ width: 100%; height: 100%; object-fit: cover; }
.thumb-row__item p{ font-weight: 700; font-size: 0.92rem; }

@media (max-width: 720px){
  .thumb-row{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); }
}
@media (max-width: 460px){
  .thumb-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------------------------------------------------------------
   Numbered accordion (Standards — "Standards by sector")
   Single-open. Smooth height transition, no jump.
   --------------------------------------------------------------- */
.numbered-accordion{
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.acc-row{
  background: var(--bg-section-tint);
  border-bottom: 1.5px solid var(--c-white);
}
.acc-row:last-child{ border-bottom: none; }

.acc-row__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1.1rem 1.5rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-black);
  transition: background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard);
}
.acc-row__trigger .acc-icon{
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--dur-med) var(--ease-standard);
}
.acc-row.is-open .acc-row__trigger{
  background: var(--c-teal-mid);
  color: var(--c-white);
}

.acc-row__panel{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 520ms var(--ease-standard), opacity 420ms var(--ease-standard);
}
.acc-row.is-open .acc-row__panel{
  opacity: 1;
  /* max-height is set inline (in px) by JS to the real content height,
     which is what makes the open/close glide smoothly with no jump */
}
.acc-row__panel-inner{
  padding: var(--sp-6) 1.5rem var(--sp-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.acc-row__panel-inner h4{ font-size: 0.98rem; margin-bottom: var(--sp-1); }
.acc-row__panel-inner p{ color: var(--text-muted); font-size: 0.92rem; margin-bottom: var(--sp-3); }
@media (max-width: 720px){
  .acc-row__panel-inner{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Icon-card accordion (Standards — "Standards by fire performance")
   Single-open. Smooth height transition, no jump.
   --------------------------------------------------------------- */
.icon-acc-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2px;
}
@media (max-width: 900px){
  .icon-acc-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .icon-acc-row{ grid-template-columns: 1fr; }
}

.icon-card{
  background: var(--c-white);
  border: 1.5px solid var(--c-dark);
  padding: var(--sp-5);
  transition: border-color var(--dur-med) var(--ease-standard);
}
.icon-card.is-open{
  border-color: var(--c-teal-mid);
  border-width: 2px;
}
.icon-card__icon{ width: 34px; height: 34px; margin-bottom: var(--sp-3); color: var(--c-dark); }
.icon-card.is-open .icon-card__icon{ color: var(--c-teal-mid); }
.icon-card h3{ font-size: 1.02rem; margin-bottom: var(--sp-3); }
.icon-card__trigger{
  background: none;
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--c-black);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.icon-card.is-open .icon-card__trigger{ color: var(--c-teal-deep); }

.icon-acc-panel{
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--bg-section-tint);
  transition: max-height 520ms var(--ease-standard), opacity 420ms var(--ease-standard);
}
.icon-acc-panel.is-open{ opacity: 1; }
.icon-acc-panel-inner{
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.icon-acc-panel-inner p{ color: var(--text-muted); font-size: 0.92rem; margin-bottom: var(--sp-3); }
@media (max-width: 720px){
  .icon-acc-panel-inner{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Smooth multi-select menu (replace instant hidden/display toggle)
   --------------------------------------------------------------- */
.multi-select__menu{
  transition: max-height 420ms var(--ease-standard), opacity 320ms var(--ease-standard), padding 420ms var(--ease-standard);
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.multi-select__menu[hidden]{
  display: grid; /* keep laid out so the transition can play */
}
.multi-select.is-open .multi-select__menu{
  max-height: 340px;
  opacity: 1;
}

/* ---------------------------------------------------------------
   Fire-performance / reaction-to-fire icons (line-art, inherit color)
   --------------------------------------------------------------- */
.icon-card__icon svg{ width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------
   reCAPTCHA placeholder box + GDPR consent checkbox
   --------------------------------------------------------------- */
.consent-field{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-body);
}
.consent-field input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--c-teal-deep);
}

.recaptcha-box{
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 100%;
}
.recaptcha-box .g-recaptcha{
  min-height: 78px;
  max-width: 100%;
}
.recaptcha-box .recaptcha-note{
  font-size: var(--fs-micro);
  margin-top: var(--sp-2);
}
.recaptcha-error{
  min-height: 0;
  margin-top: .45rem;
  color: var(--c-red-dark);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.recaptcha-error:empty{ display:none; }

/* ---------------------------------------------------------------
   Page hero photo — reused for every non-Home/non-Contact page
   --------------------------------------------------------------- */
.hero--page-photo{
  background-size: cover;
  background-position: center;
  min-height: 360px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero--page-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.8) 34%,
    rgba(255,255,255,0.28) 62%,
    rgba(255,255,255,0.05) 100%);
}
.hero--page-photo .container{ position: relative; z-index: 1; }

/* Smooth, consistent reveal timing across every animated element site-wide */
.reveal{ transition-duration: 640ms; }

/* ---------------------------------------------------------------
   Services "reason cards" — two joined columns. Each column reads
   as one continuous shape: top card rounded-top/square-bottom on
   white, flowing straight into a square-top/rounded-bottom card on
   mint below, with zero gap between them (only the background
   colour change separates the two halves).
   --------------------------------------------------------------- */
.reason-grid{ gap: var(--sp-5); }
.reason-grid .card-dark{
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-top: 0;
}
.reason-grid.is-top .card-dark{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.reason-row-wrap{ padding-block: 0; }
.reason-row-wrap.is-top{ padding-bottom: 0; }
.reason-row-wrap.is-bottom{ padding-top: 0; }

.consent-field.has-error{ color: var(--c-red-dark); }
.consent-field.has-error input{ outline: 2px solid var(--c-red); outline-offset: 2px; }
.recaptcha-box.has-error{ border-color: var(--c-red); background: #fbeceb; padding: .75rem; }

/* ---------------------------------------------------------------
   Generic hero-slide content width (pages other than Home use the
   same hero-carousel component with their own background images)
   --------------------------------------------------------------- */
.hero-slide__content{ max-width: 700px; }

/* Services — 3 real slides */
body[data-page="services"] .hero-slide[data-hero="1"]{ background-image: url("img/hero-services-1.jpg"); }
body[data-page="services"] .hero-slide[data-hero="2"]{ background-image: url("img/hero-services-2.jpg"); }
body[data-page="services"] .hero-slide[data-hero="3"]{ background-image: url("img/hero-services-3.jpg"); }

/* Sectors — 4 real slides */
body[data-page="sectors"] .hero-slide[data-hero="1"]{ background-image: url("img/hero-sectors-1.jpg"); }
body[data-page="sectors"] .hero-slide[data-hero="2"]{ background-image: url("img/hero-sectors-2.jpg"); }
body[data-page="sectors"] .hero-slide[data-hero="3"]{ background-image: url("img/hero-sectors-3.jpg"); }
body[data-page="sectors"] .hero-slide[data-hero="4"]{ background-image: url("img/hero-sectors-4.jpg"); }

/* Standards — 3 real slides */
body[data-page="standards"] .hero-slide[data-hero="1"]{ background-image: url("img/hero-standards-1.jpg"); }
body[data-page="standards"] .hero-slide[data-hero="2"]{ background-image: url("img/hero-standards-2.jpg"); }
body[data-page="standards"] .hero-slide[data-hero="3"]{ background-image: url("img/hero-standards-3.jpg"); }

/* Products — 3 real slides */
body[data-page="products"] .hero-slide[data-hero="1"]{ background-image: url("img/hero-products-1.jpg"); }
body[data-page="products"] .hero-slide[data-hero="2"]{ background-image: url("img/hero-products-2.jpg"); }
body[data-page="products"] .hero-slide[data-hero="3"]{ background-image: url("img/hero-products-3.jpg"); }


/* ===================================================================
   SYMT-ADDED CONFIGURABLE ENHANCEMENTS — v2.7 — 18.09.2026
   -------------------------------------------------------------------
   This final block is deliberately isolated so the supplied/reference
   design can be recovered by changing the feature values below rather
   than rewriting the base CSS.

   DEFAULT v2.7 SETTINGS:
     Home navigation:              ON
     SYMT enhanced photo hero:     ON
     Supplied/original hero:       OFF
     Contact form square bottom:   ON
   =================================================================== */
:root{
  --symt-show-home-nav: inline-flex;
  --symt-show-login-nav: none; /* OFF until authentication is connected */
  --symt-show-enhanced-hero: block;
  --symt-show-original-hero: none;

  --symt-hero-height-desktop: 430px;
  --symt-hero-height-mobile: 400px;
  --symt-hero-fade-duration: 1200ms;

  --symt-section-space-desktop: 4.25rem;
  --symt-section-space-tablet: 3.5rem;
  --symt-section-space-mobile: 2.75rem;
  --symt-mobile-sector-arrow-column: 38px;
  --symt-mobile-sector-arrow-button: 38px;
  --symt-mobile-sector-arrow-icon: 31px;

  --symt-services-row-gap: 1.5rem;
  --symt-cta-separation-desktop: 44px;
  --symt-cta-separation-mobile: 30px;

  --symt-contact-form-bottom-radius: 0px;
  --symt-show-recaptcha: block; /* v2.11: visible Google reCAPTCHA v2 checkbox */

  /* Reference-matched pale mint. Change back to #e4f2f0 if required. */
  --c-mint-tint: #e3f2f0;
}

/* Feature toggles */
.symt-home-nav{ display: var(--symt-show-home-nav); }
.symt-login-nav{ display: var(--symt-show-login-nav); }
body .symt-original-hero{ display: var(--symt-show-original-hero) !important; }
.symt-enhanced-hero{ display: var(--symt-show-enhanced-hero); }

/* -------------------------------------------------------------------
   Reusable enhanced hero: fixed copy, rotating/cross-fading backgrounds
   ------------------------------------------------------------------- */
.symt-enhanced-hero{
  position: relative;
  min-height: var(--symt-hero-height-desktop);
  padding: 0;
  overflow: hidden;
  background: var(--c-grey-50);
}
.symt-hero__backgrounds,
.symt-hero__background,
.symt-hero__shade{
  position: absolute;
  inset: 0;
}
.symt-hero__background{
  background-size: cover;
  background-position: var(--symt-bg-position, center center);
  opacity: 0;
  transform: scale(1.012);
  transition: opacity var(--symt-hero-fade-duration) var(--ease-standard),
              transform var(--symt-hero-fade-duration) var(--ease-standard);
  will-change: opacity;
}
.symt-hero__background.is-active{
  opacity: 1;
  transform: scale(1);
}
.symt-hero__shade{
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.82) 36%,
    rgba(255,255,255,0.34) 64%,
    rgba(255,255,255,0.06) 100%);
}
.symt-hero__content-wrap{
  position: relative;
  z-index: 2;
  min-height: var(--symt-hero-height-desktop);
  display: flex;
  align-items: center;
  padding-block: 3.6rem 3rem;
}
.symt-hero__content{ max-width: 700px; }
.symt-enhanced-hero .hero__lead{ margin-top: var(--sp-4); margin-bottom: 1.9rem; }
.symt-enhanced-hero .symt-hero__dots{
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0.95rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin: 0;
}
.symt-enhanced-hero .hero-dot{
  width: 9px;
  height: 9px;
  min-width: 9px;
  padding: 0;
  border: 1px solid rgba(17,23,22,0.20);
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1px 4px rgba(15,38,34,0.18);
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.symt-enhanced-hero .hero-dot:hover{ transform: scale(1.22); }
.symt-enhanced-hero .hero-dot.is-active{ background: var(--c-red); border-color: var(--c-red); }
.symt-enhanced-hero .hero-dot:focus-visible{ outline-offset: 4px; }

/* -------------------------------------------------------------------
   Major-section rhythm: one consistent spacing system site-wide.
   Custom joined/compact components retain their own internal spacing.
   ------------------------------------------------------------------- */
main > .section:not(.reason-row-wrap){
  padding-top: var(--symt-section-space-desktop);
  padding-bottom: var(--symt-section-space-desktop);
}
main > .section.section--flush-top:not(.reason-row-wrap){ padding-top: 0; }
main > .section.section--flush-bottom:not(.reason-row-wrap){ padding-bottom: 0; }

/* -------------------------------------------------------------------
   Home — sector carousel must never become its own scroll container.
   The viewport owns clipping; JS owns translation/swipe.
   ------------------------------------------------------------------- */
body[data-page="home"] .sector-viewport{ overflow: hidden; }
body[data-page="home"] .sector-track{
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

/* -------------------------------------------------------------------
   Services — four intro panels and image alignment.
   ------------------------------------------------------------------- */
body[data-page="services"] .reason-grid .card-dark{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body[data-page="services"] .reason-row-wrap.is-top{
  padding-top: var(--symt-section-space-desktop);
  padding-bottom: 0;
  background: var(--c-white);
}
body[data-page="services"] .reason-row-wrap.is-bottom{
  padding-top: var(--symt-services-row-gap);
  padding-bottom: var(--symt-services-row-gap);
  background: var(--bg-section-tint);
}
body[data-page="services"] .card-photo h3{
  min-height: 3.75em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body[data-page="services"] .services-approach-section{
  padding-top: 5.6rem;
  padding-bottom: 5.6rem;
  background: var(--bg-section-tint);
}
body[data-page="services"] .services-approach-section .section-head{
  margin-bottom: 2rem;
}
body[data-page="services"] .services-approach-section .approach-row{
  gap: 1.2rem;
}
body[data-page="services"] .services-approach-section .approach-step{
  font-size: 1.35rem;
}
body[data-page="services"] .services-approach-section .approach-arrow img{
  width: 31px;
  height: 31px;
}

/* -------------------------------------------------------------------
   Standards — sector image selectors and closed-by-default accordions.
   ------------------------------------------------------------------- */
body[data-page="standards"] .thumb-row__item{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.35rem;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  border-radius: var(--radius-md);
  transition: background var(--dur-med) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
body[data-page="standards"] .thumb-row__item:hover{ transform: translateY(-2px); }
body[data-page="standards"] .thumb-row__circle{
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--dur-med) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
}
body[data-page="standards"] .thumb-row__item.is-active{
  background: rgba(95,171,157,0.10);
}
body[data-page="standards"] .thumb-row__item.is-active .thumb-row__circle{
  outline-color: var(--c-teal-mid);
  box-shadow: 0 0 0 1px rgba(95,171,157,0.18);
}
body[data-page="standards"] .thumb-row__item.is-active p{
  color: var(--c-teal-deep);
}
body[data-page="standards"] .icon-card{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: pointer;
}
body[data-page="standards"] .icon-card.is-open{
  background: rgba(95,171,157,0.055);
}

/* -------------------------------------------------------------------
   Sectors / Products — distinct white separator before final CTA.
   ------------------------------------------------------------------- */
body[data-page="sectors"] .cta-heading-wrap,
body[data-page="products"] .cta-heading-wrap{
  border-top: var(--symt-cta-separation-desktop) solid var(--c-white);
}

/* -------------------------------------------------------------------
   Contact — SYMT default is curved top / square bottom. Set the variable
   to var(--radius-lg) to restore the supplied fully-rounded panel.
   ------------------------------------------------------------------- */
body[data-page="contact"] .form-panel{
  border-radius: var(--radius-lg) var(--radius-lg)
                 var(--symt-contact-form-bottom-radius)
                 var(--symt-contact-form-bottom-radius);
}

/* Footer version metadata — intentionally tiny and unobtrusive. */
.site-version{
  display: inline-block;
  margin-inline: 0.28rem 0.18rem;
  font-size: 0.66rem;
  line-height: 1;
  opacity: 0.62;
  white-space: nowrap;
  vertical-align: baseline;
}

/* -------------------------------------------------------------------
   v2.7 — section-heading semantics and separation between adjacent
   major sections that share the same background colour.
   ------------------------------------------------------------------- */
.symt-category-section-title{
  margin: 0;
  text-align: center;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.symt-major-section-separator{
  height: 2.75rem;
  background: var(--c-white);
}

@media (max-width: 900px){
  .symt-home-nav{ width: 100%; }
  body[data-page="services"] .reason-row-wrap.is-top{
    padding-top: var(--symt-section-space-tablet);
  }
  .symt-major-section-separator{ height: 2.25rem; }
  main > .section:not(.reason-row-wrap){
    padding-top: var(--symt-section-space-tablet);
    padding-bottom: var(--symt-section-space-tablet);
  }
  main > .section.section--flush-top:not(.reason-row-wrap){ padding-top: 0; }
  main > .section.section--flush-bottom:not(.reason-row-wrap){ padding-bottom: 0; }
}

@media (max-width: 640px){
  body[data-page="services"] .reason-row-wrap.is-top{
    padding-top: var(--symt-section-space-mobile);
  }
  .symt-major-section-separator{ height: 1.875rem; }

  .symt-enhanced-hero{ min-height: var(--symt-hero-height-mobile); }
  .symt-hero__content-wrap{
    min-height: var(--symt-hero-height-mobile);
    padding-block: 3rem 2.8rem;
  }
  .symt-hero__background{
    background-position: var(--symt-bg-position-mobile, var(--symt-bg-position, center center));
  }
  .symt-hero__shade{
    background: linear-gradient(100deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.91) 52%,
      rgba(255,255,255,0.58) 76%,
      rgba(255,255,255,0.30) 100%);
  }

  main > .section:not(.reason-row-wrap){
    padding-top: var(--symt-section-space-mobile);
    padding-bottom: var(--symt-section-space-mobile);
  }
  main > .section.section--flush-top:not(.reason-row-wrap){ padding-top: 0; }
  main > .section.section--flush-bottom:not(.reason-row-wrap){ padding-bottom: 0; }

  /* Home mobile refinements retained under the single SYMT block. */
  body[data-page="home"] .sector-carousel{
    grid-template-columns:
      var(--symt-mobile-sector-arrow-column)
      minmax(0, 1fr)
      var(--symt-mobile-sector-arrow-column);
    gap: 0.35rem;
  }
  body[data-page="home"] .sector-arrow{
    width: var(--symt-mobile-sector-arrow-button);
    height: 62px;
  }
  body[data-page="home"] .sector-arrow img{
    width: var(--symt-mobile-sector-arrow-icon);
    height: var(--symt-mobile-sector-arrow-icon);
  }
  body[data-page="home"] .specialist-grid .card-dark{
    min-height: 0;
    height: auto;
  }
  body[data-page="home"] .home-standards .grid-2 > * + *{
    margin-top: 0.4rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--c-mint-tint-2);
  }

  body[data-page="services"] .card-photo h3{ min-height: 0; }
  body[data-page="services"] .services-approach-section{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  body[data-page="services"] .services-approach-section .approach-step{
    font-size: 1.1rem;
  }
  body[data-page="services"] .reason-row-wrap.is-bottom{
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }

  body[data-page="sectors"] .cta-heading-wrap,
  body[data-page="products"] .cta-heading-wrap{
    border-top-width: var(--symt-cta-separation-mobile);
  }
}

@media (max-width: 420px){
  .btn--login{
    padding-inline: 0.72rem;
    font-size: 0.84rem;
  }
}


/* ===================================================================
   PRODUCTION HARDENING — retained in v2.7 (introduced v2.5) — 18.09.2026
   Accessibility, progressive enhancement, SEO-facing interaction polish,
   target sizing, modal/form usability and restrained motion.
   =================================================================== */

/* Accessible brand accent for text. Keep the lighter teal for decoration. */
.accent,
.main-nav__links a:hover,
.main-nav__links a.is-active,
.contact-info a:hover,
.footer-links a:hover,
body[data-page="standards"] .thumb-row__item.is-active p,
.icon-card.is-open .icon-card__trigger{
  color: var(--c-teal-text);
}
.main-nav__links a.is-active::after{ background: var(--c-teal-text); }

/* Login is deliberately hidden until a real authentication destination exists. */
.symt-login-nav{ display: var(--symt-show-login-nav); }

/* Progressive enhancement: content is visible unless JS actively prepares it. */
.reveal{ opacity:1; transform:none; }
.reveal.reveal-pending{
  opacity:0;
  transform:translateY(14px);
}
.reveal.reveal-pending.is-visible{ opacity:1; transform:none; }

/* Hero controls: visible dot remains compact, click/touch target is >= 32px. */
.hero-dots{ gap:0.15rem; }
.hero-dot,
body[data-page="home"] .hero-dot,
.symt-enhanced-hero .hero-dot{
  position:relative;
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.hero-dot::before,
body[data-page="home"] .hero-dot::before,
.symt-enhanced-hero .hero-dot::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:9px; height:9px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(17,23,22,.28);
  border-radius:50%;
  background:var(--c-white);
  box-shadow:0 1px 4px rgba(15,38,34,.18);
  transition:transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.hero-dot:hover::before{ transform:translate(-50%,-50%) scale(1.22); }
.hero-dot.is-active::before,
body[data-page="home"] .hero-dot.is-active::before,
.symt-enhanced-hero .hero-dot.is-active::before{
  background:var(--c-red);
  border-color:var(--c-red);
}
.hero-toggle{
  min-width:32px;
  min-height:32px;
  border:0;
  border-radius:6px;
  background:rgba(255,255,255,.92);
  color:var(--c-black);
  font-size:.72rem;
  font-weight:700;
  padding:.3rem .48rem;
  box-shadow:0 1px 4px rgba(15,38,34,.16);
}
.hero-toggle:hover{ background:var(--c-white); }

/* Do not suggest clickability with image zoom on static service cards. */
.card-photo:hover .card-photo__media img{ transform:none; }

/* Active technical panels use an AA-compliant dark teal with white text. */
.acc-row.is-open .acc-row__trigger{
  background:var(--c-teal-text);
  color:var(--c-white);
}
body[data-page="standards"] .thumb-row__item.is-active .thumb-row__circle{
  outline-color:var(--c-teal-text);
}
body[data-page="standards"] .icon-card.is-open{
  border-color:var(--c-teal-text);
}

/* Standards selector images: clean, predictable square crop. */
body[data-page="standards"] .thumb-row__circle{
  aspect-ratio:1/1;
  border-radius:14px;
  background:var(--c-grey-100);
}
body[data-page="standards"] .thumb-row__circle img{
  width:100%; height:100%;
  object-fit:cover;
}

/* Form accessibility and clear required/error states. */
.required-mark{ color:var(--c-red-dark); font-weight:700; }
.field [aria-invalid="true"]{ border-color:var(--c-red-dark); box-shadow:0 0 0 1px var(--c-red-dark); }
.field-error[role="alert"]{ margin-top:.15rem; }
.form-status[role="status"]{ scroll-margin-top:100px; }
.consent-error{ display:none; color:var(--c-red-dark); font-size:var(--fs-micro); margin:-.25rem 0 var(--sp-4) 1.55rem; }
.consent-field.has-error + .consent-error{ display:block; }

/* Modal usability: keep focus indication clear and content readable at zoom. */
.modal-panel{ overscroll-behavior:contain; }
.modal-close{ min-width:44px; min-height:44px; }

/* Mobile navigation: minimum comfortable tap target. */
@media (max-width:900px){
  .main-nav__links a{ min-height:44px; display:flex; align-items:center; }
  .nav-toggle{ width:44px; height:44px; }
}

/* Small footer version only — no extra label word. */
.site-version{ font-size:.64rem; opacity:.58; }

/* Technical-content maintenance note. */
.standards-review-note{
  max-width:760px;
  margin:var(--sp-5) auto 0;
  text-align:center;
  font-size:var(--fs-small);
  color:var(--text-muted);
}

/* Legal pages / launch notes */
.legal-content{ max-width:820px; margin-inline:auto; }
.legal-content h2{ margin-top:var(--sp-7); margin-bottom:var(--sp-3); }
.legal-content h3{ margin-top:var(--sp-6); margin-bottom:var(--sp-2); }
.legal-content p,.legal-content li{ color:var(--text-muted); margin-bottom:var(--sp-3); }
.legal-content ul{ list-style:disc; padding-left:1.3rem; }

/* At high zoom/narrow screens, avoid clipping long navigation/footer content. */
@media (max-width:420px){
  .footer-bottom{ overflow-wrap:anywhere; }
  .symt-enhanced-hero .symt-hero__dots{ bottom:.55rem; }
}

/* v2.7 focus override for form controls: do not let generic :focus suppress keyboard focus. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.multi-select__toggle:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}

/* Preserve visual typography if the original/reference hero is toggled back on. */
.hero-heading{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  letter-spacing:-0.02em;
  color:var(--c-black);
  margin-bottom:var(--sp-4);
}
body[data-page="contact"] .recaptcha-box{ display:var(--symt-show-recaptcha); }

/* ===================================================================
   v2.7 — 18.09.2026 snag-list implementation
   =================================================================== */

/* Supplied linear SVG logo: crisp at all densities, never squash its ratio. */
.logo img{
  width:132px;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.logo--footer img{
  width:138px;
  height:auto;
  max-height:none;
}
.footer-brand{ min-width:0; }

/* Accessible section drop-down navigation for Sectors / Standards / Products. */
.nav-has-submenu{ position:relative; }
.nav-link-row{ display:flex; align-items:center; gap:.18rem; }
.nav-submenu-toggle{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--c-grey-600);
  border-radius:5px;
  padding:0;
  line-height:1;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.nav-submenu-toggle:hover{ background:var(--c-grey-50); color:var(--c-teal-text); }
.nav-submenu-toggle span{ transform:translateY(-1px); font-size:1rem; }
.nav-has-submenu.is-submenu-open .nav-submenu-toggle span{ transform:rotate(180deg); }
.nav-submenu{
  position:absolute;
  z-index:85;
  top:calc(100% + .55rem);
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  width:max-content;
  min-width:230px;
  max-width:330px;
  padding:.55rem;
  background:var(--c-white);
  border:1px solid var(--border-hairline);
  border-radius:12px;
  box-shadow:var(--shadow-raised);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), visibility var(--dur-fast) var(--ease-standard);
}
.nav-submenu--wide{ min-width:330px; max-width:380px; }
.nav-submenu li + li{ margin-top:.05rem; }
.main-nav__links .nav-submenu a{
  display:block;
  padding:.62rem .72rem;
  border-radius:7px;
  font-size:.82rem;
  line-height:1.25;
  white-space:normal;
}
.main-nav__links .nav-submenu a:hover,
.main-nav__links .nav-submenu a:focus-visible{
  background:var(--c-mint-tint);
  color:var(--c-teal-text);
}
.main-nav__links .nav-submenu a.is-section-active{
  color:var(--c-teal-text);
  background:var(--c-mint-tint);
  font-weight:700;
}
.nav-has-submenu:hover > .nav-submenu,
.nav-has-submenu:focus-within > .nav-submenu,
.nav-has-submenu.is-submenu-open > .nav-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Anchor destinations clear the sticky header and visibly confirm context. */
section[id], h3[id]{ scroll-margin-top:110px; }
section[id]:target > .container > .section-head h2,
h3[id]:target{ color:var(--c-teal-text); }

/* Mobile hero: retain readable copy while revealing more of the image. */
@media (max-width:640px){
  .symt-hero__shade{
    background:linear-gradient(100deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.82) 43%,
      rgba(255,255,255,.36) 72%,
      rgba(255,255,255,.08) 100%);
  }
}

/* Fire-performance accordion: on phones, each answer follows its own heading. */
@media (max-width:540px){
  .icon-card[data-icon-index="1"]{ order:1; }
  .icon-acc-panel[data-icon-index="1"]{ order:2; }
  .icon-card[data-icon-index="2"]{ order:3; }
  .icon-acc-panel[data-icon-index="2"]{ order:4; }
  .icon-card[data-icon-index="3"]{ order:5; }
  .icon-acc-panel[data-icon-index="3"]{ order:6; }
  .icon-card[data-icon-index="4"]{ order:7; }
  .icon-acc-panel[data-icon-index="4"]{ order:8; }
}

/* Thank-you confirmation page. */
.thank-you-hero{ min-height:55vh; display:flex; align-items:center; }
.thank-you-panel{ max-width:760px; margin-inline:auto; text-align:center; }
.thank-you-panel .eyebrow{ color:var(--c-teal-text); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-micro); margin-bottom:var(--sp-3); }
.thank-you-panel .lead{ margin:var(--sp-5) auto; max-width:58ch; }
.thank-you-panel > p:not(.lead):not(.eyebrow){ color:var(--text-muted); }
.thank-you-actions{ display:flex; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }

@media (max-width:900px){
  .logo img{ width:110px; height:auto; }
  .logo--footer img{ width:130px; height:auto; }
  .main-nav__links{ overflow-y:auto; max-height:calc(100vh - 105px); }
  .nav-has-submenu{ width:100%; }
  .nav-link-row{ width:100%; }
  .nav-link-row > a{ flex:1; }
  .nav-submenu-toggle{ width:44px; height:44px; flex:0 0 44px; }
  .nav-submenu{
    position:static;
    width:100%;
    min-width:0;
    max-width:none;
    transform:none;
    display:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    border-left:2px solid var(--c-mint-tint-2);
    border-radius:0;
    margin:.1rem 0 .35rem .75rem;
    padding:.1rem 0 .1rem .45rem;
  }
  .nav-has-submenu:hover > .nav-submenu,
  .nav-has-submenu:focus-within > .nav-submenu{ display:none; }
  .nav-has-submenu.is-submenu-open > .nav-submenu{ display:block; transform:none; }
  .main-nav__links .nav-submenu a{ min-height:40px; padding:.52rem .65rem; font-size:.8rem; }
}


/* v2.7 medium-desktop navigation safeguard */
@media (min-width: 901px) and (max-width: 1120px){
  .logo img{width:115px;height:auto;}
  .main-nav__links{gap:.7rem;}
  .nav-submenu-toggle{width:22px;height:22px;}
}

/* ===================================================================
   v2.8 — 20.09.2026
   Branded cookie panel + licensed-image credit treatment.
   =================================================================== */

/* Cookie consent: Optimi Global bottom-sheet treatment.
   Curved top corners, square lower corners, compact brand mark. */
.cookie-banner{
  bottom: 0;
  max-width: 680px;
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
  padding: 1.25rem 1.35rem 1.15rem;
  overflow: hidden;
}
.cookie-banner::before{
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #2f6be6 0%, #54c7b8 46%, #e61d2b 100%);
}
.cookie-banner__brand{
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .1rem 0 .8rem;
}
.cookie-banner__brand img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}
.cookie-banner__brand strong{
  display: block;
  color: var(--c-black);
  font-size: 1rem;
  line-height: 1.15;
}
.cookie-banner__brand span{
  display: block;
  margin-top: .1rem;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  line-height: 1.2;
}
.cookie-banner p{ margin-bottom: .9rem; }

/* Licensed-image attribution overlay.  Visible on hover/focus for desktop,
   and persistently available on touch/mobile where hover does not exist. */
.credit-image{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  outline: none;
}
.credit-image > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-credit{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 30%;
  display: flex;
  align-items: center;
  padding: .75rem .9rem;
  background: rgba(19, 105, 89, .94);
  color: #fff;
  font-size: .72rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard);
  pointer-events: none;
}
.credit-image:hover .image-credit,
.credit-image:focus .image-credit,
.credit-image:focus-within .image-credit{
  opacity: 1;
  transform: translateY(0);
}

/* Standards selector cards use the same accessible overlay treatment. */
body[data-page="standards"] .thumb-row__circle{
  position: relative;
  overflow: hidden;
}
body[data-page="standards"] .thumb-row__circle .image-credit--compact{
  min-height: 42%;
  padding: .35rem .42rem;
  font-size: .52rem;
  line-height: 1.18;
}
body[data-page="standards"] .thumb-row__item:hover .image-credit,
body[data-page="standards"] .thumb-row__item:focus-visible .image-credit,
body[data-page="standards"] .thumb-row__item.is-active .image-credit:focus{
  opacity: 1;
  transform: translateY(0);
}

/* Background-hero credits. Kept visually discreet but available whenever
   a supplied/licensed image is active. */
.hero-image-credit{
  position: absolute;
  right: 1rem;
  bottom: 2.7rem;
  z-index: 8;
  max-width: min(560px, calc(100% - 2rem));
  padding: .38rem .62rem;
  border-radius: .45rem;
  background: rgba(19, 105, 89, .92);
  color: #fff;
  font-size: .66rem;
  line-height: 1.25;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.hero-image-credit a{
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

@media (max-width: 640px){
  .cookie-banner{
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    border-left: 0;
    border-right: 0;
    padding: 1.05rem 1rem .95rem;
  }
  .cookie-banner__actions{
    display: grid;
    grid-template-columns: 1fr;
  }
  .cookie-banner__actions .btn{ width: 100%; }
  .image-credit{
    opacity: 1;
    transform: none;
    min-height: 0;
    padding: .5rem .6rem;
    font-size: .63rem;
  }
  body[data-page="standards"] .thumb-row__circle .image-credit--compact{
    opacity: 0;
    transform: translateY(100%);
  }
  body[data-page="standards"] .thumb-row__item:focus .image-credit,
  body[data-page="standards"] .thumb-row__item.is-active .image-credit{
    opacity: 1;
    transform: translateY(0);
  }
  .hero-image-credit{
    right: .65rem;
    left: .65rem;
    bottom: 2.4rem;
    max-width: none;
    font-size: .6rem;
  }
}

/* Screen-reader-only helper used for image-credit descriptions. */
.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}