/* =========================================================================
   ASD ECOSYSTEM — Homepage concept (Hero + About)
   Design system extracted 1:1 from the live ASD Blue / ASD Red sites
   (classes hp1-*). Every token below is a real value taken from
   asd-blue.webflow.shared.css — nothing here is invented.
   ========================================================================= */

/* ---------- Fonts (the actual files served by the ASD sites) ------------- */
@font-face{font-family:Barlow;src:url("assets/Barlow-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/Barlow-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/Barlow-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/BarlowCondensed-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/BarlowCondensed-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Conthrax;src:url("assets/Conthrax-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Neutral core — the group site is light, as agreed */
  --ink:#1C1C1E;          /* headings, logo, nav */
  --ink-soft:#4A4A4C;     /* body copy */
  --muted:#808184;        /* eyebrows, meta */
  --hairline:#E8E8E7;     /* borders */
  --paper:#FFFFFF;
  --paper-alt:#FAFAFA;

  /* The three companies — used ONLY as small accents */
  --blue:#1583C5;   --blue-deep:#00507F;
  --red:#CA2026;
  --green:#3F6B53;
  /* tints of the same greens/blues for use over dark photography */
  --green-on-dark:#4FB083;
  --blue-on-dark:#2E9BDC;
  --red-on-dark:#E0353B;

  /* Type */
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:Barlow,Arial,sans-serif;
  --font-label:Conthrax,"Arial Narrow",Arial,sans-serif;

  /* Layout */
  --container:1440px;
  --pad:clamp(20px,5vw,72px);
  --section-y:clamp(88px,13vw,176px);
  --radius-card:18px;
  --radius-figure:22px;
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* ---------- Shared primitives (mirrors hp1-*) --------------------------- */
.eco-container{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eco-section{padding-top:var(--section-y);padding-bottom:var(--section-y)}

.eco-heading{
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.eco-eyebrow{
  display:inline-block;
  color:var(--muted);
  font-family:var(--font-label);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eco-text-lead{font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--ink-soft)}
.eco-text-body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink-soft)}

/* Buttons — hp1-btn geometry, neutral for the group */
.eco-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:16px 32px;
  border-radius:999px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  white-space:nowrap;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s;
}
.eco-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.eco-btn-label{font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.eco-btn-label.is-sm{font-size:10px}

/* --- The one signature the group site adds: the tri-rule ---------------
   Three 26px segments in Blue / Red / Green. It is the only place the
   three colours appear before the "Our Ecosystem" section, and it is what
   marks a page as belonging to the group rather than to one company. ---- */
.eco-tri-rule{display:flex;gap:6px;margin-bottom:22px}
.eco-tri-rule span{display:block;width:26px;height:2px;border-radius:2px}
.eco-tri-rule span:nth-child(1){background:var(--blue)}
.eco-tri-rule span:nth-child(2){background:var(--red)}
.eco-tri-rule span:nth-child(3){background:var(--green)}
.eco-tri-rule.is-on-dark span:nth-child(1){background:var(--blue-on-dark)}
.eco-tri-rule.is-on-dark span:nth-child(2){background:var(--red-on-dark)}
.eco-tri-rule.is-on-dark span:nth-child(3){background:var(--green-on-dark)}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.hero :focus-visible{outline-color:#fff}

/* =========================================================================
   HEADER — transparent over the full-bleed hero, solid white once scrolled
   ========================================================================= */
.eco-header{
  --hdr-fg:#fff;--hdr-bg:#0B0B0C;--hdr-line:#ffffff59;
  position:fixed;top:0;left:0;right:0;z-index:99;
  background:#0000;border-bottom:1px solid #0000;
  transition:background-color .35s ease,border-color .35s ease;
}
.is-scrolled .eco-header{
  --hdr-fg:var(--ink);--hdr-bg:#fff;--hdr-line:var(--ink);
  background:var(--paper);border-bottom-color:var(--hairline);
}
.eco-header_inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  max-width:var(--container);height:clamp(68px,7vw,88px);
  margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);
}
.eco-header_logo-link{display:flex;align-items:center;flex:none}
.eco-header_logo-svg{
  width:auto;height:clamp(20px,2.2vw,26px);
  color:var(--hdr-fg);transition:color .35s ease;
}
.eco-header_right{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.eco-header_nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.eco-nav-link{
  font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hdr-fg);
  padding-bottom:2px;border-bottom:1px solid #0000;
  transition:color .35s ease,border-color .2s ease;
}
.eco-nav-link:hover{border-bottom-color:var(--hdr-fg)}
.eco-header_cta{
  min-height:0;padding:11px 24px;
  color:var(--hdr-fg);border-color:var(--hdr-line);
  transition:color .35s ease,background-color .25s ease,border-color .35s ease;
}
.eco-header_cta:hover{background:var(--hdr-fg);border-color:var(--hdr-fg);color:var(--hdr-bg)}

/* =========================================================================
   01 — HERO
   Three companies in one frame. The panels are diagonal slices of the same
   stage: the clip-paths and the SVG edge lines both work in percentages of
   that stage, so the seams stay locked together at any viewport size.
   Everything is graded to black and white at rest; pointing at one company
   — on the panel or on its label below — returns colour to that one only.
   ========================================================================= */
.hero{
  position:relative;display:flex;flex-direction:column;
  height:min(100vh,1040px);height:min(100svh,1040px);min-height:600px;
  background:#0B0B0C;overflow:hidden;
}
.hero_stage{position:relative;flex:1 1 auto;min-height:0}

.hero_panel{position:absolute;top:0;bottom:0;display:block;overflow:hidden;background:#0B0B0C}
.hero_panel img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  filter:grayscale(1) brightness(.68) contrast(1.05);
  transition:filter .7s cubic-bezier(.16,.7,.3,1),transform 1.2s cubic-bezier(.16,.7,.3,1);
}
/* keeps every panel cinematic whether it is colourised or not */
.hero_panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0b0b0c73 0%,#0b0b0c14 38%,#0b0b0cdb 100%);
}
/* the two seams sit at 38%→30% and 70%→62% of the stage width */
.hero_panel.is-systems {left:0;   width:38%;clip-path:polygon(0 0,100% 0,78.95% 100%,0 100%)}
.hero_panel.is-security{left:30%; width:40%;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}
.hero_panel.is-av      {left:62%; width:38%;clip-path:polygon(21.05% 0,100% 0,100% 100%,0 100%)}
.hero_panel.is-systems  img{object-position:46% center}
.hero_panel.is-security img{object-position:74% center}
.hero_panel.is-av       img{object-position:52% center}

.hero[data-active] .hero_panel img{filter:grayscale(1) brightness(.3) contrast(1.05)}
.hero[data-active] .hero_panel.is-on img{
  filter:grayscale(0) brightness(1) contrast(1.02) saturate(1.08);transform:scale(1);
}
.hero[data-active] .hero_panel.is-on::after{
  background:linear-gradient(180deg,#0b0b0c59 0%,#0b0b0c00 38%,#0b0b0cc7 100%);
}

/* --- the glowing seams ------------------------------------------------- */
.hero_edges{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.hero_edge{opacity:.45;transition:opacity .5s ease}
.hero_edge.is-glow{opacity:.12}
.hero[data-active] .hero_edge{opacity:.2}
.hero[data-active] .hero_edge.is-glow{opacity:.04}
.hero[data-active] .hero_edge.is-on{opacity:1}
.hero[data-active] .hero_edge.is-on.is-glow{opacity:.4}

/* --- the copy ----------------------------------------------------------- */
.hero_copy{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;align-items:center;
}
.hero_copy::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#000000e8 0%,#0000007a 34%,#0000 62%);
}
.hero_copy .eco-container{position:relative;width:100%}
.hero_heading{
  color:#fff;font-size:clamp(36px,5.8vw,88px);line-height:.95;
  letter-spacing:-.015em;margin-bottom:clamp(18px,2.2vw,28px);
}
.hero_lead{
  max-width:34ch;margin-bottom:clamp(26px,3vw,40px);
  color:#ffffffd9;font-family:var(--font-body);
  font-size:clamp(15px,1.25vw,18px);line-height:1.55;
}
.hero_cta{
  pointer-events:auto;display:inline-flex;align-items:center;gap:16px;
  min-height:58px;padding:0 10px 0 30px;
  color:#fff;background:#ffffff0f;border:1px solid #ffffff59;border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .25s,border-color .25s,color .25s;
}
.hero_cta:hover{background:#fff;border-color:#fff;color:#0B0B0C}
.hero_cta_chev{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid currentColor;border-radius:50%;opacity:.65;
}

/* --- the company bar ---------------------------------------------------- */
.hero_bar{
  position:relative;z-index:5;flex:none;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#0B0B0C;border-top:1px solid #ffffff1a;
}
.hero_bar_item{
  --brand:var(--muted);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:clamp(18px,2.2vw,28px) 18px;
  transition:opacity .35s ease,background-color .35s ease;
}
.hero_bar_item.is-systems {--brand:var(--blue-on-dark)}
.hero_bar_item.is-security{--brand:var(--red-on-dark)}
.hero_bar_item.is-av      {--brand:var(--green-on-dark)}
.hero_bar_item + .hero_bar_item::before{
  content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:#ffffff14;
}
.hero_bar_name{
  text-align:center;color:#ffffffb3;
  font-family:var(--font-label);font-size:clamp(9px,.78vw,11px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.7;
  transition:color .35s ease;
}
.hero_bar_rule{
  display:block;width:min(100%,240px);height:1px;opacity:.66;
  background:linear-gradient(90deg,#0000,var(--brand) 22%,var(--brand) 78%,#0000);
  box-shadow:0 0 10px #0000;
  transition:opacity .35s ease,box-shadow .35s ease;
}
.hero_bar_mark{height:17px;width:auto;color:var(--brand);opacity:.82;transition:opacity .35s ease}
.hero_bar_chev{display:none;color:var(--brand)}

.hero[data-active] .hero_bar_item{opacity:.4}
.hero[data-active] .hero_bar_item.is-on{opacity:1;background:#ffffff0a}
.hero_bar_item.is-on .hero_bar_name{color:#fff}
.hero_bar_item.is-on .hero_bar_rule{opacity:1;box-shadow:0 0 16px var(--brand)}
.hero_bar_item.is-on .hero_bar_mark{opacity:1}

/* --- entrance ----------------------------------------------------------- */
html.js .hero_copy .eco-container > *{opacity:0;transform:translateY(18px)}
.hero_copy .eco-container > *{transition:opacity .9s cubic-bezier(.16,.7,.3,1),transform .9s cubic-bezier(.16,.7,.3,1)}
html.js.is-ready .hero_copy .eco-container > *{opacity:1;transform:none}
html.js .hero_heading{transition-delay:.05s}
html.js .hero_lead{transition-delay:.16s}
html.js .hero_cta{transition-delay:.26s}

/* touch: there is no pointer to follow, so show the three in colour */
@media (hover:none){
  .hero_panel img{filter:grayscale(0) brightness(.6) contrast(1.02)}
  .hero[data-active] .hero_panel img{filter:grayscale(0) brightness(.6) contrast(1.02)}
}

/* --- mobile: the stacked cards the client already saw ------------------- */
@media (max-width:767px){
  .hero{height:auto;min-height:0;padding-bottom:28px}
  /* the stage keeps its height from the copy inside it; the first panel
     sits behind as a single darkened backdrop */
  .hero_stage{position:relative;flex:none}
  /* the three-way split stays — it is the signature of the page — but it is
     only a backdrop here: there is no pointer to follow on a phone */
  .hero_panel img{filter:grayscale(1) brightness(.46) contrast(1.06);transform:none}
  .hero_edge{opacity:.75}
  .hero_edge.is-glow{opacity:.2}
  .hero_copy{
    position:relative;display:block;
    padding:clamp(104px,28vw,150px) 0 clamp(72px,18vw,110px);
  }
  .hero_copy::before{background:linear-gradient(180deg,#0b0b0cd9,#0b0b0cb3)}
  .hero_bar{
    position:relative;display:flex;flex-direction:column;gap:12px;
    background:#0000;border-top:0;padding:clamp(26px,7vw,36px) var(--pad) 0;
  }
  .hero_bar_item{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:16px;row-gap:10px;
    padding:15px 18px;border:1px solid var(--brand);border-radius:8px;
    background:#0b0b0cb3;opacity:1;
  }
  .hero_bar_item + .hero_bar_item::before{display:none}
  .hero_bar_name{grid-column:1;grid-row:1;text-align:left;color:#fff;font-size:11px;line-height:1.45}
  .hero_bar_rule{display:none}
  .hero_bar_mark{grid-column:1;grid-row:2;justify-self:end;height:15px;opacity:1}
  .hero_bar_chev{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center}
  .hero[data-active] .hero_bar_item{opacity:1}
}

/* =========================================================================
   02 — ABOUT ASD
   Same construction as hp1-about: text column + sticky figure.
   ========================================================================= */
.eco-about{padding-top:clamp(88px,13vw,180px);padding-bottom:clamp(64px,9vw,132px)}
.eco-about_body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(28px,5vw,72px)}
.eco-about_content{flex:380px;min-width:280px;display:flex;flex-direction:column}
.eco-about_eyebrow-row{margin-bottom:18px}
.eco-about_heading{font-size:clamp(23px,3.8vw,57px);max-width:20ch;margin-bottom:clamp(24px,2.6vw,32px)}
.eco-about_lead{max-width:46ch;margin-bottom:20px;font-size:18px}
.eco-about_text{max-width:52ch}

.eco-about_media{flex:0 420px;min-width:260px;align-self:flex-start;position:sticky;top:104px;margin-top:clamp(42px,calc(14px + 3.6vw),58px)}
.eco-about_figure{margin:0;position:relative}
.eco-about_image{width:100%;height:clamp(360px,44vw,560px);object-fit:cover;object-position:60% center;border-radius:var(--radius-figure)}

/* Three differentiators — hairline list, hp1 card language without the box */
.eco-points{
  display:flex;flex-wrap:wrap;gap:0;
  margin-top:clamp(56px,7vw,104px);
  border-top:1px solid var(--hairline);
}
.eco-point{
  flex:1 1 280px;min-width:240px;
  padding:28px 48px 32px 0;
  border-bottom:1px solid var(--hairline);
}
.eco-point_label{
  display:block;margin-bottom:8px;
  font-family:var(--font-label);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.eco-point p{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:32ch}

/* =========================================================================
   Scroll reveal — the same restrained motion used on Blue / Red
   ========================================================================= */
html.js .reveal{opacity:0;transform:translateY(18px)}
.reveal{transition:opacity .8s cubic-bezier(.16,.7,.3,1),transform .8s cubic-bezier(.16,.7,.3,1)}
html.js .reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:991px){
  .eco-about_media{position:static;margin-top:0}
}
@media (max-width:767px){
  .eco-header_nav{display:none}
  /* in a column flex container flex-basis sizes the height, and
     align-items:flex-start stops the children filling the width */
  .eco-about_body{flex-direction:column;align-items:stretch}
  .eco-about_content,.eco-about_media{flex:0 0 auto;width:100%;min-width:0}
  .eco-point{padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* =========================================================================
   Shared section head (eyebrow → heading → lead)
   ========================================================================= */
.eco-section_head{max-width:920px;margin-bottom:clamp(40px,5vw,72px)}
.eco-section_head .eco-eyebrow{display:block;margin-bottom:18px}
.eco-section_heading{font-size:clamp(22px,3.2vw,47px);max-width:22ch}
.eco-section_lead{max-width:56ch;margin-top:clamp(20px,2.4vw,28px)}

/* =========================================================================
   03 — OUR ECOSYSTEM
   The one section where the three companies appear in full. Each card is
   keyed by a --brand token so the colour touches only the mark, the name,
   the top edge and the link.
   ========================================================================= */
.eco-ecosystem{background:var(--paper-alt)}
.eco-companies{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:clamp(20px,2.6vw,36px);align-items:stretch;
}
.eco-company{
  --brand:var(--muted);
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--hairline);border-top:2px solid var(--brand);
  border-radius:var(--radius-card);
  padding:clamp(28px,3vw,40px);
  transition:box-shadow .3s cubic-bezier(.16,.7,.3,1),transform .3s cubic-bezier(.16,.7,.3,1);
}
.eco-company:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px #1c1c1e4d}
.eco-company.is-blue{--brand:var(--blue)}
.eco-company.is-red{--brand:var(--red)}
.eco-company.is-green{--brand:var(--green)}
.eco-company_mark{align-self:flex-start;height:22px;width:auto;color:var(--brand)}
.eco-company_name{
  display:block;margin-top:22px;color:var(--brand);
  font-family:var(--font-label);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.eco-company_title{
  margin:10px 0 12px;color:var(--ink);
  font-family:var(--font-display);font-size:clamp(23px,2.4vw,30px);
  font-weight:600;line-height:1.02;text-transform:uppercase;
}
.eco-company_desc{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-bottom:24px}
.eco-company_list{display:flex;flex-direction:column;margin-bottom:28px}
.eco-company_list li{
  padding:10px 0;border-top:1px solid var(--hairline);
  font-size:14px;line-height:1.4;color:var(--ink-soft);
}
.eco-company_link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--hairline);
  color:var(--brand);
  font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.04em;
}
.eco-company_link span{transition:transform .2s}
.eco-company_link:hover span{transform:translateX(4px)}

.eco-companies_note{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px clamp(20px,4vw,56px);
  margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--hairline);
}
.eco-companies_note-label{
  flex:0 0 auto;color:var(--muted);
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.eco-companies_note p{flex:1 1 420px;max-width:78ch;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* =========================================================================
   04 — WHO WE SERVE
   One supporting photograph and a typographic four-column list, so the page
   does not run two image-card grids back to back.
   ========================================================================= */
.eco-serve_figure{margin:0;overflow:hidden;border-radius:var(--radius-figure)}
.eco-serve_figure img{
  width:100%;height:clamp(240px,26vw,380px);object-fit:cover;object-position:center 62%;
}
.eco-serve_group{margin-top:clamp(40px,4.5vw,64px)}
.eco-serve_label{
  display:block;margin-bottom:16px;color:var(--muted);
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.eco-serve_list{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--hairline);
}
.eco-serve_item{
  flex:1 1 240px;min-width:220px;
  padding:26px 40px 30px 0;border-bottom:1px solid var(--hairline);
}
.eco-serve_name{
  display:block;margin-bottom:10px;color:var(--ink);
  font-family:var(--font-display);font-size:clamp(19px,1.7vw,23px);
  font-weight:600;line-height:1.05;text-transform:uppercase;
}
.eco-serve_item p{font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:34ch}

/* =========================================================================
   05 — OUR PROCESS
   The one dark band on the page, same component as the Blue / Red sites.
   ========================================================================= */
.eco-process{
  position:relative;overflow:hidden;background:var(--ink);
  padding-top:clamp(88px,11vw,144px);padding-bottom:clamp(88px,11vw,144px);
}
.eco-process_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.eco-process_scrim{
  position:absolute;inset:0;
  background-image:linear-gradient(90deg,#0b0b0ced,#0b0b0cc7 55%,#0b0b0c96);
}
.eco-process_inner{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(36px,5vw,88px);
}
.eco-process_content{flex:1 1 420px;min-width:280px}
.eco-process_content .eco-eyebrow{display:block;margin-bottom:18px}
.eco-eyebrow.is-on-dark{color:#ffffff94}
.eco-process_heading{
  color:#fff;font-size:clamp(22px,3.2vw,47px);max-width:20ch;
  margin-bottom:clamp(20px,2.4vw,28px);
}
.eco-process_lead{color:#ffffffcc;max-width:48ch}
.eco-steps{flex:1 1 340px;min-width:260px;display:flex;flex-direction:column;gap:12px}
.eco-step{
  display:flex;align-items:center;gap:20px;
  padding:16px 26px;border:1px solid #ffffff2b;border-radius:14px;
  background:#ffffff12;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.eco-step_num{
  min-width:24px;color:#ffffff8f;
  font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.08em;
}
.eco-step_label{
  color:#fff;font-family:var(--font-display);font-size:clamp(18px,1.8vw,24px);
  font-weight:600;line-height:1;text-transform:uppercase;
}

/* =========================================================================
   06 — CONTACT
   ========================================================================= */
.eco-contact_body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(40px,5vw,88px)}
.eco-contact_main{flex:1 1 520px;min-width:300px}
.eco-contact_main .eco-eyebrow{display:block;margin-bottom:18px}
.eco-contact_heading{font-size:clamp(23px,3.4vw,50px);max-width:16ch;margin-bottom:20px}
.eco-contact_lead{max-width:46ch;margin-bottom:clamp(28px,3vw,40px)}

.eco-form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 20px;max-width:660px}
.eco-field{display:flex;flex-direction:column;gap:8px}
.eco-field.is-full{grid-column:1/-1}
.eco-field label{
  color:var(--muted);
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.eco-field input,.eco-field select,.eco-field textarea{
  width:100%;padding:13px 14px;
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:10px;
  transition:border-color .2s;
}
.eco-field textarea{resize:vertical;min-height:96px}
.eco-field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23808184' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.eco-field input:focus,.eco-field select:focus,.eco-field textarea:focus{border-color:var(--ink);outline:none}
.eco-field input::placeholder,.eco-field textarea::placeholder{color:#b3b3b4}
.eco-form_foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:4px}
.eco-form_note{font-size:13px;color:var(--muted)}
.eco-form_done{
  grid-column:1/-1;margin-top:4px;padding-top:16px;
  border-top:1px solid var(--hairline);font-size:15px;color:var(--ink);
}

.eco-contact_aside{flex:0 1 360px;min-width:260px}
.eco-contact_aside .eco-eyebrow{display:block;margin-bottom:18px}
.eco-direct{display:flex;flex-direction:column}
.eco-direct_item{--brand:var(--muted)}
.eco-direct_item.is-blue{--brand:var(--blue)}
.eco-direct_item.is-red{--brand:var(--red)}
.eco-direct_item.is-green{--brand:var(--green)}
.eco-direct_item a{
  display:grid;gap:5px;padding:20px 0 20px 20px;
  border-top:1px solid var(--hairline);border-left:2px solid var(--brand);
  transition:padding-left .2s ease,background-color .2s ease;
}
.eco-direct_item:last-child a{border-bottom:1px solid var(--hairline)}
.eco-direct_item a:hover{padding-left:28px;background:var(--paper-alt)}
.eco-direct_name{
  color:var(--brand);
  font-family:var(--font-label);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.eco-direct_disc{
  color:var(--ink);font-family:var(--font-display);font-size:20px;
  font-weight:600;line-height:1.05;text-transform:uppercase;
}
.eco-direct_url{font-size:13px;color:var(--muted)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.eco-footer{border-top:1px solid var(--hairline);padding-top:30px;padding-bottom:30px}
.eco-footer_inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(24px,4vw,56px)}
.eco-footer_logo{display:flex;align-items:center}
.eco-footer_logo-svg{height:18px;width:auto;color:var(--ink)}
.eco-footer_contact{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:13px;color:var(--ink-soft)}
.eco-footer_links{display:flex;gap:20px;font-size:13px;color:var(--ink-soft)}
.eco-footer_links a:hover{color:var(--ink);text-decoration:underline}
.eco-footer_copy{margin-left:auto;font-size:12px;color:var(--muted)}

/* =========================================================================
   Responsive for the new sections
   ========================================================================= */

@media (max-width:767px){
  .eco-serve_item{padding-right:0}
  .eco-form{grid-template-columns:1fr}
  .eco-footer_copy{margin-left:0;flex-basis:100%}
  .eco-company_link{font-size:9px}
}