/* ==========================================================================
   Trans-Digi Global — home page
   Colours, spacing and type scale sampled directly from the approved design.
   ========================================================================== */

:root{
  /* brand */
  --td-green:      #29a244;   /* primary CTA / accent            */
  --td-green-600:  #1e8a37;   /* CTA hover                        */
  --td-card:       #1a4b1c;   /* "Why work with us" cards         */
  --td-forest:     #133415;   /* partners band                    */
  --td-deep:       #083320;   /* testimonial band                 */
  --td-ink:        #0f1a14;   /* top bar + footer                 */
  --td-mist:       #f6f8f5;   /* trust strip                      */

  /* text */
  --td-heading:    #0e1512;
  --td-body:       #5a615c;
  --td-line:       #e6eae6;

  /* layout */
  --td-container:  1745px;
  --td-radius:     16px;
  --td-radius-sm:  12px;
}

/* ---------- base ---------- */
html{ scroll-behavior:smooth; }

body{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--td-heading);
  background:#fff;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }

a{ text-decoration:none; }

:focus-visible{
  outline:3px solid var(--td-green);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; top:.5rem; left:.5rem; z-index:1080;
  background:var(--td-green); color:#fff; padding:.6rem 1rem; border-radius:8px;
}

.container-td{
  width:100%;
  max-width:var(--td-container);
  margin-inline:auto;
  padding-inline:24px;
}

.section{ padding:90px 0; }

/* ---------- shared type ---------- */
.section-title{
  font-size:clamp(1.75rem, 2.6vw, 2.75rem);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:400;
  color:var(--td-heading);
  margin:0 0 .5rem;
}

.eyebrow{
  color:var(--td-green);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.eyebrow--light{ color:rgba(255,255,255,.82); }

.text-muted-td{ color:var(--td-body); }
.small-copy{ font-size:.9375rem; line-height:1.75; }

.link-td{
  color:var(--td-green);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.link-td:hover{ color:var(--td-green-600); }
.link-td i{ transition:transform .2s ease; }
.link-td:hover i{ transform:translateX(4px); }

/* ---------- buttons ---------- */
.btn-td{
  --bs-btn-focus-box-shadow:none;
  background:var(--td-green);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:.72rem 1.35rem;
  font-weight:500;
  font-size:.9375rem;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  transition:background .2s ease, transform .2s ease;
}
.btn-td:hover,
.btn-td:focus{ background:var(--td-green-600); color:#fff; }
.btn-td:active{ transform:translateY(1px); }

.btn-td-light{
  background:#fff;
  color:var(--td-heading);
  border:0;
  border-radius:8px;
  padding:.72rem 1.35rem;
  font-weight:500;
  font-size:.9375rem;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  transition:background .2s ease;
}
.btn-td-light:hover{ background:#eef1ee; color:var(--td-heading); }

.btn-lg-td{ padding:.9rem 1.6rem; }

/* ==========================================================================
   Top bar + header
   ========================================================================== */
.topbar{ height:28px; background:var(--td-ink); }

.site-header{
  position:sticky; top:0; z-index:1030;
  background:#fff;
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(14,21,18,.09); }

.brand-logo{ height:52px; width:auto; }

.site-header .nav-link{
  color:var(--td-heading);
  font-size:.9375rem;
  font-weight:500;
  padding:1.55rem .6rem;
  white-space:nowrap;
}
@media (min-width:1400px){
  .site-header .nav-link{ padding-inline:.85rem; }
}
.site-header .nav-link:hover,
.site-header .nav-link:focus{ color:var(--td-green); }

.navbar-toggler{ font-size:1.6rem; color:var(--td-heading); padding:.25rem .5rem; }

@media (max-width:1199.98px){
  /* Bootstrap 5.3 sets the width via `.offcanvas.offcanvas-end`, so a plain
     `.offcanvas` rule loses on specificity and the panel goes full-width.  */
  .site-header .offcanvas.offcanvas-end{ width:300px; max-width:85vw; }
  .site-header .nav-link{ padding:.7rem 0; }
  .brand-logo{ height:42px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:84px 0 40px;
  background:var(--td-ink);
}
.hero__bg{
  position:absolute; inset:0;
  background:url("../img/hero-bg.jpg") center/cover no-repeat;
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,18,10,.88) 0%, rgba(6,18,10,.70) 45%, rgba(6,18,10,.35) 100%);
}
.hero__inner{ position:relative; z-index:2; }

.hero__title{
  font-size:clamp(2.1rem, 3.1vw, 3.4rem);
  line-height:1.14;
  letter-spacing:-.02em;
  color:#fff;
  margin-bottom:1.5rem;
}

.hero__lead{
  color:rgba(255,255,255,.82);
  max-width:34rem;
  margin-bottom:2rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__visual{ margin-top:2.5rem; }
.hero__products{ display:block; width:100%; }

@media (min-width:992px){
  .hero{ padding:140px 0 44px; }
  .hero__copy{ padding-block:2rem; }
  .hero__visual{ margin-top:0; }
  .hero__products{ width:126%; max-width:none; margin-left:-26%; }
}

/* fact strip */
.hero__facts{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin:3rem 0 0;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--td-radius-sm);
  overflow:hidden;
  backdrop-filter:blur(6px);
}
.hero__fact{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.15rem 1.4rem;
  background:rgba(9,24,15,.42);
}
.hero__fact i{ font-size:1.75rem; color:var(--td-green); flex:none; }
.hero__fact-title{ display:block; color:#fff; font-weight:600; font-size:.9375rem; line-height:1.35; }
.hero__fact-sub{ display:block; color:rgba(255,255,255,.72); font-size:.875rem; }

@media (min-width:576px){ .hero__facts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .hero__facts{ grid-template-columns:repeat(4,1fr); } }

/* ==========================================================================
   How can we help
   ========================================================================== */
.help__row + .help__row{ margin-top:1.5rem; }

.help__card{ padding-block:.5rem; }
.help__title{
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:.75rem;
}
.help__card p{ color:var(--td-body); font-size:.9375rem; margin-bottom:1rem; }

.help__media{
  display:block;
  border-radius:var(--td-radius-sm);
  overflow:hidden;
}
.help__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.help__media:hover img{ transform:scale(1.04); }
.ratio-wide{ aspect-ratio:595/237; }

@media (max-width:991.98px){
  .ratio-wide{ aspect-ratio:16/9; }
}

/* ==========================================================================
   Proven track record
   ========================================================================== */
.track{ position:relative; padding-bottom:0; background:#fff; }

.track__band{
  position:absolute; top:0; left:0; right:0;
  height:320px;
  background:url("../img/track-bg.jpg") center/cover no-repeat;
}
.track__band::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(10,26,20,.62);
}
@media (min-width:992px){ .track__band{ height:430px; } }

.track__head{ padding:78px 0 44px; }
.track__sub{ color:rgba(255,255,255,.8); font-size:.9375rem; }

.track__card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:408/594;
}
.track__card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.track__card:hover img{ transform:scale(1.05); }
.track__card figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:1.4rem 1.25rem;
  color:#fff;
  font-weight:500;
  text-align:center;
  background:linear-gradient(180deg, rgba(8,20,14,0) 0%, rgba(8,20,14,.85) 70%);
}

@media (max-width:575.98px){
  .track__card{ aspect-ratio:3/4; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-wrap{ padding:50px 0 0; background:#fff; }

.trust{
  background:var(--td-mist);
  border-radius:14px;
  padding:44px 40px;
}
.trust__icon{ font-size:1.9rem; color:var(--td-green); display:block; margin-bottom:1.35rem; }
.trust__title{ font-size:1rem; font-weight:600; margin-bottom:.5rem; }
.trust__text{ font-size:.875rem; color:var(--td-body); margin-bottom:0; line-height:1.6; }

@media (max-width:575.98px){ .trust{ padding:32px 24px; } }

/* ==========================================================================
   Why work with us
   ========================================================================== */
.why{ padding-top:80px; }

.why__card{
  height:100%;
  background:var(--td-card);
  border-radius:var(--td-radius);
  padding:34px 30px;
  color:#fff;
  transition:transform .25s ease;
}
.why__card:hover{ transform:translateY(-4px); }
.why__card i{ font-size:2.1rem; display:block; margin-bottom:2.75rem; }
.why__card h3{ font-size:1.25rem; font-weight:600; margin-bottom:.6rem; }
.why__card p{ font-size:.875rem; color:rgba(255,255,255,.82); margin-bottom:0; line-height:1.6; }

/* ==========================================================================
   Awards
   ========================================================================== */
.awards{
  position:relative;
  padding:80px 0;
  background:url("../images/awards-bg.jpg") center/cover no-repeat;
  background-color:#1a2620;
}
.awards::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(12,24,18,.72) 0%, rgba(12,24,18,.55) 50%, rgba(12,24,18,.72) 100%);
}

.awards__title{
  font-size:clamp(2rem, 2.8vw, 2.9rem);
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
  margin-bottom:0;
}

.award{
  height:100%;
  background:#fff;
  border-radius:14px;
  padding:34px 26px;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.award__media{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.75rem;
}
.award__media img{ max-height:150px; width:auto; }
.award__name{ font-size:1.125rem; font-weight:600; margin-bottom:1.5rem; }
.award__text{ font-size:.9375rem; color:var(--td-body); margin-bottom:0; }

.award--doc{ padding:0; overflow:hidden; }
.award--doc img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* ==========================================================================
   Solutions / application tabs
   ========================================================================== */
.solutions{ position:relative; overflow:hidden; padding-bottom:70px; }

.solutions__watermark{
  position:absolute;
  top:38%; right:-40px;
  width:520px;
  opacity:.55;
  pointer-events:none;
  display:none;
}
@media (min-width:1200px){ .solutions__watermark{ display:block; } }

.app-tabs{
  gap:2.25rem;
  border-bottom:1px solid var(--td-line);
  flex-wrap:wrap;
}
.app-tabs .nav-link{
  border:0;
  background:none;
  color:var(--td-body);
  font-size:.9375rem;
  font-weight:500;
  padding:.75rem .25rem 1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.app-tabs .nav-link:hover{ color:var(--td-heading); }
.app-tabs .nav-link.active{ color:var(--td-green); border-bottom-color:var(--td-green); }

.solutions__photo{
  border-radius:var(--td-radius);
  overflow:hidden;
  aspect-ratio:699/486;
}
.solutions__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.badge-rec{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--td-green);
  color:#fff;
  border-radius:7px;
  padding:.5rem 1rem;
  font-size:.875rem;
  font-weight:500;
  margin-bottom:1.1rem;
}

.solutions__name{
  font-size:clamp(1.5rem, 2vw, 1.9rem);
  font-weight:600;
  letter-spacing:-.015em;
  margin-bottom:.75rem;
}

.solutions__range{ display:block; max-width:480px; margin:1.75rem 0; }

.spec-list li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  font-size:.9375rem;
  margin-bottom:.9rem;
}
.spec-list i{ color:var(--td-green); font-size:1.05rem; line-height:1.5; flex:none; }
.spec-list--tight li{ margin-bottom:.55rem; }

/* ==========================================================================
   Audience panels
   ========================================================================== */
.panels__title{
  font-size:clamp(1.5rem, 2.1vw, 2rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:1.5rem;
}
.panels .spec-list{ margin-bottom:1.75rem; }

.panels__media{
  border-radius:var(--td-radius);
  overflow:hidden;
  aspect-ratio:418/385;
}
.panels__media img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:575.98px){
  .panels__media{ aspect-ratio:16/10; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ position:relative; padding-bottom:90px; background:#fff; }

.testimonials__band{
  position:absolute; top:0; left:0; right:0;
  height:100%;
  max-height:455px;
  background:var(--td-deep);
}
.testimonials__head{ padding:66px 0 40px; }
.testimonials__sub{ color:rgba(255,255,255,.78); font-size:.9375rem; max-width:44rem; }

.carousel-td{ position:relative; }
.carousel-td__viewport{ overflow:hidden; }
.carousel-td__track{
  display:flex;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  margin-inline:-12px;
}
.carousel-td__slide{
  flex:0 0 100%;
  max-width:100%;
  padding-inline:12px;
}
@media (min-width:768px){ .carousel-td__slide{ flex-basis:50%; max-width:50%; } }
@media (min-width:992px){ .carousel-td__slide{ flex-basis:33.3333%; max-width:33.3333%; } }

.quote{
  height:100%;
  background:#fff;
  border-radius:var(--td-radius);
  padding:34px 32px;
  box-shadow:0 14px 40px rgba(8,26,18,.10);
  display:flex;
  flex-direction:column;
}
.quote__mark{ font-size:2.4rem; color:var(--td-green); line-height:1; margin-bottom:.5rem; }
.quote blockquote{ font-size:.9375rem; color:#2f3a33; margin-bottom:1.75rem; }
.quote figcaption{ margin-top:auto; }
.quote__logo{ height:44px; width:auto; display:block; margin-bottom:1rem; }
.quote__name{ display:block; font-weight:700; font-size:1.0625rem; }
.quote__role{ display:block; font-size:.8125rem; color:var(--td-body); }

.carousel-td__dots{
  display:flex;
  justify-content:center;
  gap:.75rem;
  margin-top:2.5rem;
}
.carousel-td__dots button{
  width:10px; height:10px;
  border-radius:50%;
  border:0;
  padding:0;
  background:#c9d2cc;
  transition:background .2s ease, transform .2s ease;
}
.carousel-td__dots button[aria-selected="true"]{ background:var(--td-ink); transform:scale(1.15); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__media{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:780/579;
}
.faq__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.accordion-td .accordion-item{
  border:1px solid var(--td-line);
  border-radius:12px !important;
  margin-bottom:14px;
  overflow:hidden;
  background:#fff;
}
.accordion-td .accordion-button{
  font-size:1.0625rem;
  font-weight:600;
  color:var(--td-heading);
  background:#fff;
  padding:1.15rem 1.4rem;
  box-shadow:none;
}
.accordion-td .accordion-button:not(.collapsed){ background:#fbfcfb; color:var(--td-heading); }
.accordion-td .accordion-button:focus{ box-shadow:none; }
.accordion-td .accordion-button .q{ text-decoration:underline; margin-right:.35rem; }
.accordion-td .accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e1512' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-size:1rem;
  width:1rem; height:1rem;
}
.accordion-td .accordion-body{
  padding:0 1.4rem 1.5rem;
  color:var(--td-body);
  font-size:.9375rem;
}
.accordion-td .accordion-body a{ color:var(--td-body); text-decoration:underline; }
.accordion-td .accordion-body a:hover{ color:var(--td-green); }

/* ==========================================================================
   Partners
   ========================================================================== */
/* White band so the partner logos show in their own colours. The dark green
   version needed mix-blend-mode to lift the darker marks, which washed every
   logo towards white and lost the brand colours entirely. */
.partners{ background:#fff; padding:44px 0 56px; border-top:1px solid var(--td-line); }
.partners__title{ color:var(--td-heading); font-size:1.375rem; font-weight:600; margin-bottom:2.25rem; }
.partners__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  /* A generous gap on a wide screen; the media queries below pull it in
     rather than letting 72px ofspace squeeze the logos on a phone. */
  gap:1.5rem 4.5rem;
}
.partners__list img{
  height:64px; width:auto;
  /* Supplied brand artwork on a transparent background, shown as-is. The
     earlier files were white-only wordmarks that needed a blend mode to
     survive the dark band; these do not. */
  object-fit:contain;
}

@media (max-width:991.98px){
  .partners__list{ gap:1.5rem 3rem; }
  .partners__list img{ height:56px; }
}

@media (max-width:767.98px){
  /* Less air around the row, so it does not dominate a short screen. */
  .partners{ padding:32px 0 40px; }
  .partners__title{ font-size:1.15rem; margin-bottom:1.5rem; }

  /*
   * Two logos per row rather than a wrapping flex line. Four logos on one
   * line left each about 60px wide with 72px of gap between them, so the
   * brands were smaller than the space separating them.
   */
  .partners__list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:1.75rem 1.25rem;
    justify-items:center;
  }
  .partners__list li{ display:flex; align-items:center; justify-content:center; width:100%; }
  .partners__list img{ height:auto; width:auto; max-height:52px; max-width:100%; }
}

@media (max-width:400px){
  .partners__list img{ max-height:44px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--td-ink); color:rgba(255,255,255,.72); padding:56px 0 0; font-size:.9375rem; }

.footer__brand{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.footer__logo{ width:120px; height:auto; border-radius:8px; }
.footer__tagline{ color:rgba(255,255,255,.82); font-size:.875rem; line-height:1.5; }

.footer__text{ color:rgba(255,255,255,.66); max-width:26rem; }

.footer__social{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:8px;
  background:var(--td-green);
  color:#fff;
  font-size:1.15rem;
  margin-top:.75rem;
}
.footer__social:hover{ background:var(--td-green-600); color:#fff; }

.footer__heading{ color:#fff; font-size:1.25rem; font-weight:600; margin-bottom:.5rem; }

.newsletter{ display:flex; flex-wrap:wrap; max-width:32rem; }
.newsletter .form-control{
  flex:1 1 12rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  border-right:0;
  border-radius:6px 0 0 6px;
  color:#fff;
  padding:.75rem 1rem;
  font-size:.9375rem;
}
.newsletter .form-control::placeholder{ color:rgba(255,255,255,.45); }
.newsletter .form-control:focus{
  background:transparent;
  color:#fff;
  border-color:var(--td-green);
  box-shadow:none;
}
.newsletter .btn-td{ border-radius:0 6px 6px 0; text-transform:uppercase; letter-spacing:.04em; }
.newsletter__msg{ flex:1 0 100%; margin:.65rem 0 0; font-size:.8125rem; min-height:1rem; }
.newsletter__msg.is-ok{ color:#7ee39a; }
.newsletter__msg.is-error{ color:#ff9b9b; }

.footer__contact li{ margin-bottom:.85rem; }
.footer__contact a{ color:rgba(255,255,255,.72); }
.footer__contact a:hover{ color:#fff; }

/* ---------- footer site links ---------- */
.footer__links-row{
  margin-top:44px;
  padding-top:38px;
  border-top:1px solid rgba(255,255,255,.09);
}
.footer__col-title{
  color:#fff;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.footer__links li{ margin-bottom:.6rem; }
.footer__links li:last-child{ margin-bottom:0; }
.footer__links a{
  display:inline-block;
  color:rgba(255,255,255,.66);
  font-size:.9rem;
  line-height:1.5;
  transition:color .18s ease, transform .18s ease;
}
.footer__links a:hover{ color:#fff; transform:translateX(3px); }

@media (max-width:991.98px){
  .footer__links-row{ margin-top:32px; padding-top:30px; }
}
@media (max-width:575.98px){
  .footer__col-title{ margin-bottom:.85rem; }
}

.footer__bottom{
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.09);
  padding:20px 0;
  font-size:.875rem;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer__legal a{ color:rgba(255,255,255,.72); }
.footer__legal a:hover{ color:#fff; }

/* ==========================================================================
   Responsive trims
   ========================================================================== */
@media (max-width:991.98px){
  .section{ padding:64px 0; }
  .trust-wrap{ padding-top:56px; }
  .why{ padding-top:56px; }
  .awards{ padding:64px 0; }
  .track__head{ padding:56px 0 36px; }
  .testimonials__head{ padding:52px 0 34px; }
  .testimonials__band{ max-height:400px; }
  .awards__title{ margin-bottom:1.5rem; }
}

@media (max-width:575.98px){
  .container-td{ padding-inline:18px; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .newsletter .form-control{ border-right:1px solid rgba(255,255,255,.25); border-radius:6px; flex-basis:100%; }
  .newsletter .btn-td{ border-radius:6px; margin-top:.6rem; width:100%; justify-content:center; }
}

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

/* ==========================================================================
   ABOUT PAGE
   Tokens below are sampled from about-page.pdf
   ========================================================================== */

:root{
  --td-mint:      #eaf4ec;   /* "who we are" band          */
  --td-mission:   #f6fbf6;   /* mission card               */
  --td-vision:    #05452e;   /* vision card                */
  --td-cta:       #143816;   /* "have a project" band      */
}

/* ---------- header dropdowns (shared) ---------- */
.site-header .dropdown-toggle::after{
  margin-left:.4rem;
  vertical-align:.15em;
  border-top-color:currentColor;
}
.site-header .dropdown-menu{
  border:1px solid var(--td-line);
  border-radius:12px;
  padding:.5rem;
  margin-top:.35rem;
  box-shadow:0 18px 44px rgba(14,21,18,.12);
}
.site-header .dropdown-item{
  border-radius:8px;
  padding:.55rem .8rem;
  font-size:.9375rem;
  color:var(--td-heading);
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus{ background:var(--td-mist); color:var(--td-green); }
.site-header .nav-link.active{ color:var(--td-green); }

@media (max-width:1199.98px){
  .site-header .dropdown-menu{ border:0; box-shadow:none; padding-left:.75rem; }
}

/* ---------- page banner ---------- */
.page-hero{
  position:relative;
  padding:64px 0 56px;
  text-align:center;
  background:var(--td-ink);
  overflow:hidden;
}
.page-hero__bg{
  position:absolute; inset:0;
  background:url("../images/about-hero-bg.jpg") center/cover no-repeat;
}
.page-hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(6,20,14,.72);
}
.page-hero > .container-td{ position:relative; z-index:2; }
.page-hero__title{
  color:#fff;
  font-size:clamp(1.9rem, 2.6vw, 2.5rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.page-hero__sub{
  color:rgba(255,255,255,.8);
  font-size:.9375rem;
  max-width:38rem;
  margin:0 auto 1.5rem;
}
.breadcrumb-td{
  display:flex; justify-content:center; gap:.6rem;
  list-style:none; padding:0; margin:0;
  font-size:.875rem;
  color:rgba(255,255,255,.7);
}
.breadcrumb-td a{ color:rgba(255,255,255,.7); }
.breadcrumb-td a:hover{ color:#fff; }
.breadcrumb-td li + li::before{ content:"/"; margin-right:.6rem; opacity:.6; }
.breadcrumb-td [aria-current]{ color:#fff; }

/* ---------- who we are ---------- */
.who{
  position:relative;
  background:#fff;
  padding:58px 0 80px;
}
.who__band{
  position:absolute; top:0; left:0; right:0;
  height:430px;
  background:var(--td-mint);
}
.who > .container-td{ position:relative; z-index:2; }
.who__name{
  font-size:clamp(1.5rem, 2.1vw, 2rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:0;
}
.who__name span{ font-weight:300; }
.who__intro{ font-size:.9375rem; color:#3f4a43; margin-bottom:0; }

/* stats card */
.stats{
  position:relative;
  margin-top:52px;
  max-width:1380px;
  margin-inline:auto;
  background:#fff;
  border-radius:var(--td-radius);
  box-shadow:0 20px 50px rgba(12,40,24,.10);
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
}
/* dot grid, top-left, as in the design */
.stats::before{
  content:"";
  position:absolute; top:18px; left:18px;
  width:150px; height:66px;
  background-image:radial-gradient(circle, #cfe3d4 1.6px, transparent 1.7px);
  background-size:11px 11px;
  opacity:.9;
  pointer-events:none;
}
.stats__figures{
  flex:1 1 460px;
  display:flex;
  flex-wrap:wrap;
  padding:34px 0;
}
.stat{
  flex:1 1 33.3333%;
  text-align:center;
  padding:14px 20px;
  position:relative;
}
.stat + .stat{ border-left:1px solid #e9efea; }
/* the small green node that sits on each divider */
.stat + .stat::before{
  content:"";
  position:absolute; left:-5px; top:50%;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--td-green);
  transform:translateY(-50%);
}
.stat__icon{
  width:56px; height:56px;
  margin:0 auto 1rem;
  border-radius:50%;
  background:#eaf5ec;
  display:flex; align-items:center; justify-content:center;
  color:#1f6b32;
  font-size:1.4rem;
}
.stat__num{
  display:block;
  font-size:clamp(1.6rem, 2.2vw, 2.15rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  margin-bottom:.55rem;
}
.stat__num::after{
  content:"";
  display:block;
  width:34px; height:3px;
  background:var(--td-green);
  border-radius:2px;
  margin:.65rem auto 0;
}
.stat__label{
  display:block;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--td-body);
}

.stats__scope{
  flex:0 1 392px;
  background:linear-gradient(135deg, #17512a 0%, #2f8b3f 100%);
  color:#fff;
  padding:38px 34px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.stats__scope i{
  width:54px; height:54px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  margin-bottom:1.5rem;
}
.stats__scope h2{
  font-size:1.3rem;
  font-weight:600;
  line-height:1.35;
  margin-bottom:.75rem;
}
.stats__scope p{
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:1.25rem;
}
.stats__scope span{
  display:block;
  width:64px; height:2px;
  background:rgba(255,255,255,.55);
}

@media (max-width:767.98px){
  .stats__figures{ padding:20px 0; }
  .stat{ flex-basis:100%; }
  .stat + .stat{ border-left:0; border-top:1px solid #e9efea; }
  .stat + .stat::before{ left:50%; top:-5px; transform:translateX(-50%); }
  .stats__scope{ flex-basis:100%; }
  .stats::before{ display:none; }
}

/* ---------- mission / vision ---------- */
.mv{ padding:70px 0 20px; }

.mv-card{
  position:relative;
  height:100%;
  border-radius:20px;
  padding:52px 48px;
  overflow:hidden;
  isolation:isolate;
}
.mv-card__deco{
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.mv-card__eyebrow{
  font-size:.875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.mv-card__headline{
  font-size:clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:1.5rem;
  position:relative;
  padding-bottom:1.25rem;
}
.mv-card__headline::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:52px; height:3px;
  border-radius:2px;
  background:var(--td-green);
}
.mv-card p{ font-size:.9375rem; margin-bottom:0; }
.mv-card__icon{
  width:78px; height:78px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin-bottom:2.25rem;
}

.mv-card--mission{ background:linear-gradient(140deg, #f2f9f1 0%, #fbfdfa 60%); }
.mv-card--mission .mv-card__icon{ background:#e2f1e4; color:#12641f; }
.mv-card--mission .mv-card__eyebrow{ color:var(--td-green); }
.mv-card--mission p{ color:#4b544d; }
.mv-card--mission .mv-card__deco{ top:0; right:0; width:330px; opacity:.85; }
.mv-card--mission .mv-card__deco--flip{
  top:auto; right:auto; bottom:0; left:0;
  transform:rotate(180deg);
  opacity:.5;
}

.mv-card--vision{ background:var(--td-vision); color:#fff; }
.mv-card--vision .mv-card__icon{ background:rgba(255,255,255,.10); color:#7ee39a; }
.mv-card--vision .mv-card__eyebrow{ color:#7ee39a; }
.mv-card--vision .mv-card__headline{ color:#fff; }
.mv-card--vision p{ color:rgba(255,255,255,.8); }
.mv-card--vision .mv-card__deco{ bottom:0; right:0; width:400px; opacity:.6; }

@media (max-width:575.98px){
  .mv-card{ padding:36px 26px; }
  .mv-card--mission .mv-card__deco,
  .mv-card--vision .mv-card__deco{ width:210px; }
}

/* ---------- success stories ---------- */
.stories{ padding:80px 0 90px; }
.stories__eyebrow{
  color:var(--td-green);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.stories__sub{ color:var(--td-body); font-size:.9375rem; }
.track__card--short{ aspect-ratio:408/472; }

@media (max-width:767.98px){
  /*
   * Two per row on a phone leaves each tile about 160px wide. A 4:3 landscape
   * crop at that size shows almost nothing of the building, and the caption
   * keeps its desktop padding, so the wording covers the picture it sits on.
   * Portrait gives the image room, and the caption is scaled to match.
   */
  .track__card--short{ aspect-ratio:3/4; }

  .track__card figcaption{
    padding:.85rem .7rem;
    font-size:.8125rem;
    line-height:1.35;
  }
}

@media (max-width:575.98px){
  .stories__eyebrow{ letter-spacing:.14em; }

  /* Tighter gutters, so the tiles are not squeezed by the gap between them. */
  .stories .row{ --bs-gutter-x:.75rem; --bs-gutter-y:.75rem; }
}

/* ---------- have a project in mind ---------- */
.cta-band{
  position:relative;
  padding:86px 0;
  /* Left aligned. Centred text reads as a poster; left aligned reads as a
     sentence, and the eye returns to a single edge on every line. */
  text-align:left;
  background:var(--td-cta);
  overflow:hidden;
}
.cta-band__bg{
  position:absolute; inset:0;
  background:url("../images/about-cta-bg.jpg") center/cover no-repeat;
  opacity:.55;
}
.cta-band__bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(16,48,22,.78);
}
.cta-band > .container-td{ position:relative; z-index:2; }
.cta-band__title{
  color:#fff;
  font-size:clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:.85rem;
}
.cta-band__sub{
  color:rgba(255,255,255,.82);
  font-size:.9375rem;
  max-width:40rem;
  /* No auto margin, or the paragraph floats away from the heading above it. */
  margin:0 0 2rem;
}
.cta-band__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:flex-start;
}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */

:root{
  --td-panel:  #f9f9f9;   /* gallery / image plates */
  --td-tint:   #eef4ef;   /* spec table label column */
}

.product-hero{ padding:56px 0 20px; }

/* ---------- gallery ---------- */
.gallery__main{
  position:relative;
  background:var(--td-panel);
  border:1px solid var(--td-line);
  border-radius:14px;
  overflow:hidden;
  /* No fixed ratio: the frame takes the height of the photo, so a tall
     breaker and a wide drive both sit tight in the box instead of floating
     in a fixed square with dead space above and below. */
}
.gallery__main img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  padding:0;
}
.gallery__zoom{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--td-heading);
  font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(14,21,18,.12);
}
.gallery__zoom:hover{ background:#fff; color:var(--td-green); }

.gallery__thumbs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:14px;
  padding:0; list-style:none;
}
.gallery__thumb{
  background:var(--td-panel);
  border:1px solid var(--td-line);
  border-radius:10px;
  padding:0;
  aspect-ratio:1/.95;
  overflow:hidden;
  transition:border-color .2s ease;
}
.gallery__thumb img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.gallery__thumb:hover{ border-color:#b9ccbd; }
.gallery__thumb[aria-current="true"]{ border-color:var(--td-green); border-width:2px; }

/* ---------- product info ---------- */
.badge-brand{
  display:inline-block;
  background:var(--td-green);
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.3rem .85rem;
  border-radius:5px;
  margin-bottom:1rem;
}
.product-title{
  font-size:clamp(1.5rem, 2.1vw, 2rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
  margin-bottom:.85rem;
}
.product-cat{ font-size:.8125rem; color:var(--td-body); margin-bottom:.9rem; }
.product-price{
  color:var(--td-green);
  font-size:1.375rem;
  font-weight:700;
  margin-bottom:1.4rem;
}
.product-copy p{ font-size:.875rem; color:#4c544e; margin-bottom:1rem; }

.product-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.75rem 0 1.5rem; }
.btn-td-outline{
  background:#fff;
  color:var(--td-heading);
  border:1px solid var(--td-line);
  border-radius:8px;
  padding:.72rem 1.35rem;
  font-weight:500;
  font-size:.9375rem;
  display:inline-flex; align-items:center; gap:.55rem;
  transition:border-color .2s ease, color .2s ease;
}
.btn-td-outline i{ color:var(--td-green); font-size:1.1rem; }
.btn-td-outline:hover{ border-color:var(--td-green); color:var(--td-green); }

.product-pills{ display:flex; flex-wrap:wrap; gap:.65rem; padding:0; margin:0; list-style:none; }
.product-pills li{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid #cfe3d4;
  border-radius:999px;
  padding:.35rem .85rem;
  font-size:.75rem;
  color:#3d6b46;
}
.product-pills i{ color:var(--td-green); }

/* ---------- bordered content card (applications) ---------- */
.panel-card{
  border:1px solid var(--td-line);
  border-radius:14px;
  padding:30px 32px 34px;
  background:#fff;
}
.panel-card__title{
  font-size:1.0625rem;
  font-weight:600;
  padding-bottom:.9rem;
  margin-bottom:0;
  position:relative;
  display:inline-block;
}
.panel-card__title::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:100%; height:2px;
  background:var(--td-green);
}
.panel-card__rule{ border:0; border-top:1px solid var(--td-line); margin:0 0 30px; }

.app-item{ text-align:center; }
.app-item i{ font-size:2rem; color:#2c4a35; display:block; margin-bottom:1rem; }
.app-item span{ font-size:.8125rem; color:#3b443d; }

/* ---------- spec + highlights panels ---------- */
.spec-panel{
  height:100%;
  border:1px solid var(--td-line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.spec-panel__head{
  background:var(--td-green);
  color:#fff;
  padding:.85rem 1.25rem;
  font-size:1rem;
  font-weight:600;
  display:flex; align-items:center; gap:.6rem;
  margin:0;
}
.spec-table{ width:100%; font-size:.8125rem; border-collapse:collapse; }
.spec-table th,
.spec-table td{
  padding:.7rem 1.25rem;
  border-bottom:1px solid #e9efea;
  vertical-align:top;
  font-weight:400;
  text-align:left;
}
.spec-table th{
  background:var(--td-tint);
  width:44%;
  color:var(--td-heading);
  font-weight:500;
}
.spec-table td{ color:#4c544e; }
.spec-table tr:last-child th,
.spec-table tr:last-child td{ border-bottom:0; }

.spec-note{
  font-size:.6875rem;
  color:#8a918c;
  padding:.9rem 1.25rem 1.1rem;
  margin:0;
  display:flex; gap:.4rem;
}

.hl-list{ padding:1.5rem 1.5rem 1.6rem; margin:0; list-style:none; }
.hl-list li{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.8125rem;
  color:#4c544e;
  margin-bottom:1.1rem;
}
.hl-list li:last-child{ margin-bottom:0; }
.hl-list i{ color:var(--td-green); font-size:.95rem; line-height:1.5; flex:none; }
.hl-list strong{ color:var(--td-heading); font-weight:600; }

/* ---------- downloads ---------- */
.downloads-head{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  margin-bottom:1.5rem;
}
.downloads-head h2{ font-size:1.375rem; font-weight:600; margin:0; }

.dl-card{
  display:flex; align-items:center; gap:1rem;
  border:1px solid var(--td-line);
  border-radius:10px;
  padding:1rem 1.15rem;
  background:#fff;
  height:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dl-card:hover{ border-color:#b9ccbd; box-shadow:0 8px 22px rgba(14,21,18,.07); }
.dl-card__icon{ color:var(--td-green); font-size:1.6rem; flex:none; }
.dl-card__body{ flex:1 1 auto; min-width:0; }
.dl-card__body h3{ font-size:.875rem; font-weight:600; margin:0 0 .25rem; color:var(--td-heading); }
.dl-card__body p{ font-size:.75rem; color:var(--td-body); margin:0; line-height:1.5; }
.dl-card__meta{ text-align:right; flex:none; }
.dl-card__meta b{ display:block; font-size:.75rem; color:var(--td-heading); }
.dl-card__meta span{ font-size:.6875rem; color:var(--td-body); }

/* ---------- product CTA band ---------- */
.cta-split__title{
  color:#fff;
  font-size:clamp(1.4rem, 2vw, 1.9rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:1rem;
}
.cta-split__sub{ color:rgba(255,255,255,.8); font-size:.875rem; margin-bottom:1.75rem; max-width:34rem; }
.cta-split__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.contact-box{
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  padding:28px 30px;
  background:rgba(255,255,255,.04);
}
.contact-box h3{ color:#fff; font-size:1rem; font-weight:600; margin-bottom:1.25rem; }
.contact-box ul{ list-style:none; padding:0; margin:0; }
.contact-box li{
  display:flex; align-items:center; gap:.7rem;
  color:rgba(255,255,255,.85);
  font-size:.875rem;
  margin-bottom:.9rem;
}
.contact-box li:last-child{ margin-bottom:0; }
.contact-box i{ color:#7ee39a; }
.contact-box a{ color:rgba(255,255,255,.85); }
.contact-box a:hover{ color:#fff; }

/* ---------- related products ---------- */
.related{ padding:80px 0 70px; }
.related__head{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:2rem;
}
.related__eyebrow{
  color:var(--td-green);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.related__head h2{ font-size:clamp(1.4rem,2vw,1.85rem); font-weight:700; letter-spacing:-.02em; margin:0; }

.carousel-td__nav{ display:flex; gap:.6rem; }
.carousel-td__nav button{
  width:40px; height:36px;
  border:1px solid var(--td-line);
  border-radius:8px;
  background:#fff;
  color:var(--td-heading);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
.carousel-td__nav button:hover:not(:disabled){ border-color:var(--td-green); color:var(--td-green); }
.carousel-td__nav button:disabled{ opacity:.4; }

.rel-card{
  height:100%;
  border:1px solid var(--td-line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  display:flex; flex-direction:column;
}
.rel-card__media{ background:var(--td-panel); aspect-ratio:404/330; display:flex; align-items:center; justify-content:center; }
.rel-card__media img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.rel-card__body{ padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1 1 auto; }
.rel-card__brand{
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--td-body);
  margin-bottom:.4rem;
}
.rel-card__body h3{ font-size:.9375rem; font-weight:600; margin-bottom:.5rem; }
.rel-card__body p{ font-size:.75rem; color:var(--td-body); margin-bottom:1rem; line-height:1.6; }
.rel-card__actions{ display:flex; gap:.5rem; margin-top:auto; }
.btn-detail{
  /* Inline elements do not grow to fit vertical padding, so as a plain
     inline <a> this button's padding spilled past the card border instead
     of pushing the card taller. inline-flex makes the padding count. */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:31px;
  background:#22301f;
  color:#fff;
  border-radius:6px;
  padding:.42rem .9rem;
  font-size:.75rem;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.btn-detail:hover{ background:var(--td-green); color:#fff; }
.btn-wa{
  width:32px; height:31px;
  border-radius:6px;
  background:var(--td-green);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem;
}
.btn-wa:hover{ background:var(--td-green-600); color:#fff; }

/* ---------- zoom modal ---------- */
.zoom-modal .modal-content{ background:var(--td-panel); border:0; border-radius:14px; }
.zoom-modal .modal-body{ padding:2rem; text-align:center; }
.zoom-modal img{ max-height:74vh; width:auto; max-width:100%; }

@media (max-width:575.98px){
  .gallery__thumbs{ grid-template-columns:repeat(3,1fr); }
  .panel-card{ padding:24px 20px 26px; }
  .dl-card{ flex-wrap:wrap; }
  .product-actions .btn{ width:100%; justify-content:center; }
}

@media (min-width:1200px){
  .carousel-td__track--4 .carousel-td__slide{ flex-basis:25%; max-width:25%; }
}

/* ==========================================================================
   SUCCESS STORY PAGE
   Content from the case-study one-pager, rebuilt on the Trans-Digi system.
   ========================================================================== */

.page-hero__eyebrow{
  color:#7ee39a;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.page-hero__eyebrow span{ color:rgba(255,255,255,.45); margin:0 .5rem; }
.page-hero__badge{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  padding:.6rem 1.6rem;
  margin-bottom:1.5rem;
}
.page-hero__badge b{ color:#fff; font-size:1.375rem; font-weight:700; line-height:1.1; }
.page-hero__badge span{
  color:rgba(255,255,255,.7);
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-top:.2rem;
}

/* ---------- project fact bar ---------- */
.fact-bar{ background:var(--td-forest); }
.fact-bar__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:rgba(255,255,255,.12);
}
.fact-bar__cell{ background:var(--td-forest); padding:26px 28px; }
.fact-bar__cell dt{
  color:#7ee39a;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.fact-bar__cell dd{ color:#fff; font-weight:600; font-size:.9375rem; margin:0; line-height:1.45; }

@media (min-width:576px){ .fact-bar__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .fact-bar__grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- lead callout ---------- */
.lead-callout{
  background:var(--td-mint);
  border-left:5px solid var(--td-green);
  border-radius:0 12px 12px 0;
  padding:32px 36px;
  margin-bottom:56px;
}
.lead-callout p{
  font-size:1.0625rem;
  line-height:1.75;
  color:#28352c;
  margin:0;
}
.lead-callout strong{ color:#12641f; font-weight:600; }

/* ---------- section heading with accent tab ---------- */
.story-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding-bottom:.85rem;
  border-bottom:2px solid var(--td-green);
  margin-bottom:1.5rem;
}
.story-head::before{
  content:"";
  width:5px; height:20px;
  border-radius:2px;
  background:var(--td-green);
  flex:none;
}
.story-col p{ font-size:.9375rem; color:#4c544e; margin-bottom:1.1rem; }
.story-col p:last-child{ margin-bottom:0; }
.story-col strong{ color:var(--td-heading); font-weight:600; }

.story-figure{
  border-radius:var(--td-radius);
  overflow:hidden;
  aspect-ratio:1695/560;
  margin-bottom:56px;
}
.story-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:767.98px){ .story-figure{ aspect-ratio:16/10; } }

.story-rule{ border:0; border-top:1px solid var(--td-line); margin:56px 0; }

/* ---------- dark callout ---------- */
.callout-dark{
  background:var(--td-vision);
  border-radius:var(--td-radius);
  padding:40px 44px;
  display:flex;
  gap:1.5rem;
}
.callout-dark__icon{
  flex:none;
  width:54px; height:54px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  color:#7ee39a;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}
.callout-dark h2{
  color:#7ee39a;
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:.75rem;
}
.callout-dark p{ color:rgba(255,255,255,.82); font-size:.9375rem; margin:0; }

@media (max-width:575.98px){
  .callout-dark{ padding:28px 24px; flex-direction:column; gap:1rem; }
  .lead-callout{ padding:24px 22px; }
}

/* ---------- highlights ---------- */
.story-hl{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  height:100%;
  border:1px solid var(--td-line);
  border-radius:12px;
  padding:1.15rem 1.25rem;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.story-hl:hover{ border-color:#b9ccbd; box-shadow:0 8px 22px rgba(14,21,18,.07); }
.story-hl__icon{
  flex:none;
  width:40px; height:40px;
  border-radius:9px;
  background:#eaf5ec;
  color:#12641f;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.story-hl p{ font-size:.875rem; color:#4c544e; margin:0; line-height:1.6; }

/* ---------- outcome ---------- */
.outcome{
  background:var(--td-mist);
  border-radius:var(--td-radius);
  padding:44px 48px;
}
.outcome p{ font-size:.9375rem; color:#4c544e; margin:0; }
.outcome strong{ color:var(--td-heading); font-weight:600; }

@media (max-width:575.98px){ .outcome{ padding:28px 24px; } }

/* ---------- story footer meta ---------- */
.story-meta{
  border-top:1px solid var(--td-line);
  margin-top:56px;
  padding-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  justify-content:space-between;
  font-size:.8125rem;
  color:var(--td-body);
}

/* ==========================================================================
   PRODUCT CATALOGUE
   Reference catalogue, not a storefront: no prices, no cart. Filters sit in a
   horizontal rail across the top rather than a sidebar.
   ========================================================================== */

.catalogue{ padding:46px 0 80px; }

/* ---------- toolbar ---------- */
.cat-toolbar{
  border:1px solid var(--td-line);
  border-radius:14px;
  padding:20px 22px;
  background:#fff;
  margin-bottom:22px;
}
.cat-search{ position:relative; }
.cat-search input{
  width:100%;
  border:1px solid var(--td-line);
  border-radius:8px;
  padding:.7rem 2.5rem .7rem 1rem;
  font-size:.9375rem;
  color:var(--td-heading);
}
.cat-search input:focus{ outline:0; border-color:var(--td-green); box-shadow:0 0 0 3px rgba(41,162,68,.12); }
.cat-search i{
  position:absolute; right:.9rem; top:50%;
  transform:translateY(-50%);
  color:var(--td-green);
  pointer-events:none;
}

.cat-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cat-tab{
  border:1px solid var(--td-line);
  background:#fff;
  border-radius:8px;
  padding:.6rem 1.05rem;
  font-size:.8125rem;
  font-weight:500;
  color:var(--td-heading);
  display:inline-flex; align-items:center; gap:.45rem;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.cat-tab:hover{ border-color:var(--td-green); color:var(--td-green); }
.cat-tab i{ font-size:.95rem; }
.cat-tab[aria-pressed="true"]{ background:var(--td-green); border-color:var(--td-green); color:#fff; }
.cat-tab[aria-pressed="true"]:hover{ color:#fff; }
.cat-tab b{ font-weight:500; opacity:.75; }

/* ---------- filter rail ---------- */
.cat-rail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1rem;
  padding:16px 0 0;
  margin-top:16px;
  border-top:1px solid var(--td-line);
}
.cat-rail__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--td-body);
  margin:0;
}
.cat-chip{
  border:1px solid var(--td-line);
  background:#fff;
  border-radius:999px;
  padding:.4rem .9rem;
  font-size:.8125rem;
  color:var(--td-heading);
  display:inline-flex; align-items:center; gap:.4rem;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.cat-chip:hover{ border-color:var(--td-green); }
.cat-chip b{ font-weight:500; color:var(--td-body); font-size:.75rem; }
.cat-chip[aria-pressed="true"]{ background:#eaf5ec; border-color:var(--td-green); color:#12641f; }
.cat-chip[aria-pressed="true"] b{ color:#12641f; }
.cat-chip[aria-pressed="true"]::before{ content:"\2713"; font-size:.75rem; font-weight:700; }

.cat-clear{
  border:0; background:none;
  color:var(--td-green);
  font-size:.8125rem;
  font-weight:500;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .2rem;
}
.cat-clear:hover{ color:var(--td-green-600); text-decoration:underline; }

.cat-status{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.cat-status p{ font-size:.875rem; color:var(--td-body); margin:0; }
.cat-status p b{ color:var(--td-heading); font-weight:600; }
.cat-sort{ display:flex; align-items:center; gap:.6rem; font-size:.875rem; color:var(--td-body); }
.cat-sort select{
  border:1px solid var(--td-line);
  border-radius:8px;
  padding:.45rem 2rem .45rem .8rem;
  font-size:.8125rem;
  color:var(--td-heading);
  background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e1512' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e") no-repeat right .6rem center/.85rem;
  appearance:none;
}
.cat-sort select:focus{ outline:0; border-color:var(--td-green); }

/* ---------- catalogue card ---------- */
.cat-card{
  height:100%;
  border:1px solid var(--td-line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cat-card:hover{ border-color:#b9ccbd; box-shadow:0 14px 34px rgba(14,21,18,.08); transform:translateY(-2px); }

.cat-card__media{
  position:relative;
  background:#fff;
  border-bottom:1px solid var(--td-line);
  aspect-ratio:304/207;
  display:flex; align-items:center; justify-content:center;
}
.cat-card__media img{ width:100%; height:100%; object-fit:contain; padding:4%; }

.cat-flag{
  position:absolute; top:10px; right:10px;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .5rem;
  border-radius:4px;
}
.cat-flag--stock{ background:#eaf5ec; color:#17722a; }
.cat-flag--lead{ background:#fdf3e3; color:#8a5a12; }
.cat-flag--disc{ background:#f1f2f1; color:#6b736d; }

.cat-card__body{ padding:1rem 1.15rem 1.15rem; display:flex; flex-direction:column; flex:1 1 auto; }
.cat-card__series{
  display:inline-block;
  align-self:flex-start;
  background:#eaf5ec;
  color:#17722a;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.25rem .55rem;
  border-radius:4px;
  margin-bottom:.65rem;
}
.cat-card__model{ font-size:.9375rem; font-weight:700; margin-bottom:.15rem; letter-spacing:-.01em; }
.cat-card__name{ font-size:.8125rem; color:#4c544e; margin-bottom:.75rem; }

/* the catalogue-ish part: a compact spec block instead of a price */
.cat-specs{ list-style:none; padding:0; margin:0 0 1rem; border-top:1px dashed #e2e7e3; }
.cat-specs li{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.75rem;
  padding:.4rem 0;
  border-bottom:1px dashed #e2e7e3;
}
.cat-specs dt, .cat-specs span:first-child{ color:var(--td-body); }
.cat-specs span:last-child{ color:var(--td-heading); font-weight:500; text-align:right; }

.cat-card__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  /* The foot is a sibling of .cat-card__body, so it inherits none of that
     padding — without its own it sits flush against the card border. */
  padding:.85rem 1.15rem 1.15rem;
  border-top:1px dashed #e2e7e3;
}
.cat-card__brand{
  font-size:.625rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--td-body);
  margin:0 auto 0 0;
}

/* ---------- empty state ---------- */
.cat-empty{
  border:1px dashed var(--td-line);
  border-radius:14px;
  padding:64px 24px;
  text-align:center;
}
.cat-empty i{ font-size:2.2rem; color:#b9ccbd; display:block; margin-bottom:1rem; }
.cat-empty h2{ font-size:1.125rem; font-weight:600; margin-bottom:.5rem; }
.cat-empty p{ font-size:.9375rem; color:var(--td-body); margin-bottom:1.25rem; }

/* ---------- pagination ---------- */
.cat-pager{ display:flex; justify-content:center; gap:.5rem; margin-top:2.5rem; }
.cat-pager button{
  min-width:36px; height:36px;
  border:1px solid var(--td-line);
  border-radius:8px;
  background:#fff;
  color:var(--td-heading);
  font-size:.8125rem;
  padding:0 .6rem;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.cat-pager button:hover:not(:disabled){ border-color:var(--td-green); color:var(--td-green); }
.cat-pager button[aria-current="page"]{ background:var(--td-green); border-color:var(--td-green); color:#fff; }
.cat-pager button:disabled{ opacity:.4; }

/* ---------- help strip ---------- */
.cat-help{
  margin-top:2.5rem;
  background:var(--td-card);
  border-radius:var(--td-radius);
  padding:30px 34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
}
.cat-help__icon{
  width:52px; height:52px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#7ee39a;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  flex:none;
}
.cat-help__text{ flex:1 1 18rem; color:#fff;}
.cat-help h2{ color:#fff; font-size:1.0625rem; font-weight:600; margin-bottom:.3rem; }
.cat-help p{ color:rgba(255,255,255,.78); font-size:.875rem; margin:0; }

/* ---------- buying FAQ ---------- */
.buying-faq{ background:#f4f7f5; padding:80px 0; }
.buying-faq__eyebrow{
  color:var(--td-green);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  margin-bottom:.75rem;
}
.buying-faq__media{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:419/510;
}
.buying-faq__media img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:991.98px){
  .buying-faq{ padding:56px 0; }
  .buying-faq__media{ aspect-ratio:16/10; }
}
@media (max-width:575.98px){
  .cat-toolbar{ padding:16px; }
  .cat-help{ padding:24px 22px; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* ---------- WhatsApp-first panel ---------- */
.wa-panel{
  background:var(--td-vision);
  border-radius:var(--td-radius);
  padding:48px 52px;
  color:#fff;
  overflow:hidden;
}
.wa-panel__eyebrow{
  color:#7ee39a;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.wa-panel h2{
  color:#fff;
  font-size:clamp(1.4rem, 2.1vw, 1.95rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:1rem;
}
.wa-panel p{ color:rgba(255,255,255,.82); font-size:.9375rem; margin-bottom:1.75rem; }
.wa-panel__note{
  display:flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.7);
  font-size:.8125rem;
  margin:1.25rem 0 0;
}
.wa-panel__note i{ color:#7ee39a; }

.person{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:28px 30px;
  text-align:center;
}
.person__avatar{
  width:76px; height:76px;
  border-radius:50%;
  background:var(--td-green);
  color:#fff;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.1rem;
}
.person__name{ color:#fff; font-size:1.125rem; font-weight:700; margin-bottom:.2rem; }
.person__role{ color:rgba(255,255,255,.7); font-size:.8125rem; margin-bottom:1.25rem; }
.person__links{ display:flex; flex-direction:column; gap:.5rem; }
.person__links a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
  padding:.55rem .8rem;
  color:rgba(255,255,255,.9);
  font-size:.8125rem;
}
.person__links a:hover{ border-color:#7ee39a; color:#fff; }

@media (max-width:767.98px){ .wa-panel{ padding:32px 26px; } }

/* ---------- contact method cards ---------- */
.ct-card{
  height:100%;
  border:1px solid var(--td-line);
  border-radius:14px;
  padding:26px 26px 28px;
  background:#fff;
  display:block;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.ct-card:hover{ border-color:var(--td-green); box-shadow:0 14px 34px rgba(14,21,18,.08); transform:translateY(-2px); }
.ct-card__icon{
  width:46px; height:46px;
  border-radius:11px;
  background:#eaf5ec;
  color:#12641f;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  margin-bottom:1.15rem;
}
.ct-card__label{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--td-body);
  margin-bottom:.45rem;
}
.ct-card__value{ font-size:1rem; font-weight:700; color:var(--td-heading); margin-bottom:.5rem; word-break:break-word; }
.ct-card p{ font-size:.8125rem; color:var(--td-body); margin:0; line-height:1.6; }
.ct-card__flag{
  display:inline-block;
  margin-top:.75rem;
  font-size:.6875rem;
  color:#8a5a12;
  background:#fdf3e3;
  border-radius:4px;
  padding:.25rem .5rem;
}

/* ---------- RFQ form ---------- */
.rfq{
  border:1px solid var(--td-line);
  border-radius:var(--td-radius);
  background:#fff;
  padding:40px 44px;
}
.rfq__title{ font-size:1.25rem; font-weight:700; margin-bottom:.4rem; }
.rfq__sub{ font-size:.875rem; color:var(--td-body); margin-bottom:1.75rem; }

.form-td label{
  display:block;
  font-size:.8125rem;
  font-weight:500;
  color:var(--td-heading);
  margin-bottom:.4rem;
}
.form-td label .req{ color:var(--td-green); }
.form-td .form-control,
.form-td .form-select{
  border:1px solid var(--td-line);
  border-radius:8px;
  padding:.7rem .9rem;
  font-size:.875rem;
  color:var(--td-heading);
  background-color:#fff;
}
.form-td .form-control:focus,
.form-td .form-select:focus{
  border-color:var(--td-green);
  box-shadow:0 0 0 3px rgba(41,162,68,.12);
}
.form-td textarea.form-control{ min-height:130px; resize:vertical; }
.form-td .form-control.is-invalid,
.form-td .form-select.is-invalid{ border-color:#d24b4b; background-image:none; }
.form-td .err{
  display:none;
  font-size:.75rem;
  color:#c23a3a;
  margin-top:.3rem;
}
.form-td .is-invalid ~ .err{ display:block; }

.rfq__submit{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.5rem; }
.rfq__hurry{ font-size:.8125rem; color:var(--td-body); margin:0; }

.form-note{
  display:flex; gap:.6rem;
  border-left:3px solid #e5c98a;
  background:#fdf9f0;
  border-radius:0 8px 8px 0;
  padding:.9rem 1rem;
  font-size:.75rem;
  color:#7a6329;
  margin-top:1.75rem;
}
.form-note i{ flex:none; }

.form-success{
  display:none;
  gap:.75rem;
  border-left:3px solid var(--td-green);
  background:#eef7f0;
  border-radius:0 8px 8px 0;
  padding:1rem 1.15rem;
  font-size:.875rem;
  color:#1c5c2a;
  margin-bottom:1.5rem;
}
.form-success.is-shown{ display:flex; }
.form-success i{ flex:none; font-size:1.1rem; }

@media (max-width:575.98px){ .rfq{ padding:28px 22px; } }

/* ---------- engineering services ---------- */
.svc-card{
  height:100%;
  border:1px solid var(--td-line);
  border-radius:14px;
  padding:28px 26px;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.svc-card:hover{ border-color:#b9ccbd; box-shadow:0 12px 30px rgba(14,21,18,.07); }
.svc-card__icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--td-card);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  margin-bottom:1.35rem;
}
.svc-card h3{ font-size:1rem; font-weight:600; margin-bottom:.55rem; }
.svc-card p{ font-size:.8125rem; color:var(--td-body); margin:0; line-height:1.65; }

/* ---------- closing CTA with product art ---------- */
.cta-band--split{ padding:76px 0; }
.cta-band__art{ display:block; width:100%; max-width:520px; margin-inline:auto; }

@media (max-width:991.98px){
  /* Only the padding changes on a narrow screen. The alignment stays left,
     so the band does not switch sides halfway down the page. */
  .cta-band--split{ padding:56px 0; }
}

/* ==========================================================================
   BLOG / INSIGHTS
   ========================================================================== */

.blog{ padding:56px 0 90px; }

.blog__intro{
  font-size:1rem;
  color:#4c544e;
  max-width:56rem;
  margin:0 auto 2.25rem;
  text-align:center;
  line-height:1.8;
}

.blog-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  padding-bottom:26px;
  margin-bottom:32px;
  border-bottom:1px solid var(--td-line);
}

.blog-count{
  font-size:.875rem;
  color:var(--td-body);
  text-align:center;
  margin-bottom:2rem;
}
.blog-count b{ color:var(--td-heading); font-weight:600; }

/* ---------- article card ---------- */
.post-card{
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--td-line);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.post-card:hover{
  border-color:#b9ccbd;
  box-shadow:0 16px 38px rgba(14,21,18,.09);
  transform:translateY(-3px);
}

.post-card__media{
  position:relative;
  aspect-ratio:16/10;
  background:var(--td-panel);
  overflow:hidden;
}
.post-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.post-card:hover .post-card__media img{ transform:scale(1.04); }

.post-chip{
  position:absolute; top:12px; left:12px;
  background:rgba(9,32,18,.86);
  color:#fff;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.3rem .6rem;
  border-radius:5px;
  backdrop-filter:blur(4px);
}

.post-card__body{
  padding:1.15rem 1.3rem 1.4rem;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.post-card__meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--td-body);
  margin-bottom:.7rem;
}
.post-card__meta .dot{ width:3px; height:3px; border-radius:50%; background:#c2cbc4; }
.post-card__meta .brand{ color:var(--td-green); font-weight:600; }

.post-card__title{
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  margin-bottom:.65rem;
}
.post-card__title a{ color:var(--td-heading); }
.post-card__title a:hover{ color:var(--td-green); }
.post-card__title a::after{ content:""; position:absolute; inset:0; }

.post-card__excerpt{
  font-size:.8125rem;
  color:var(--td-body);
  line-height:1.7;
  margin-bottom:1.1rem;
}
.post-card__more{
  margin-top:auto;
  font-size:.8125rem;
  font-weight:500;
  color:var(--td-green);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.post-card__more i{ transition:transform .2s ease; }
.post-card:hover .post-card__more i{ transform:translateX(4px); }

/* the whole card is the click target */
.post-card{ position:relative; }

/* ---------- more coming strip ---------- */
.blog-more{
  margin-top:2.75rem;
  border:1px dashed var(--td-line);
  border-radius:14px;
  padding:26px 30px;
  text-align:center;
  font-size:.9375rem;
  color:var(--td-body);
}
.blog-more i{ color:var(--td-green); margin-right:.4rem; }

@media (max-width:575.98px){
  .blog{ padding:40px 0 64px; }
  .blog-filters{ gap:.45rem; }
}

/* ==========================================================================
   ARTICLE (blog detail)
   ========================================================================== */

/* reading progress */
.read-progress{
  position:fixed; top:0; left:0;
  height:3px; width:0;
  background:var(--td-green);
  z-index:1040;
  transition:width .08s linear;
}

.page-hero__chip{
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  color:#7ee39a;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.3rem .75rem;
  border-radius:5px;
  margin-bottom:1.1rem;
}
.page-hero__meta{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:.55rem;
  color:rgba(255,255,255,.72);
  font-size:.8125rem;
  margin:1.25rem 0 1.5rem;
}
.page-hero__meta .dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.45); }
.page-hero__meta b{ color:#fff; font-weight:600; }

.article{ padding:56px 0 90px; }

.article__cover{
  border-radius:var(--td-radius);
  overflow:hidden;
  aspect-ratio:16/9;
  margin-bottom:40px;
}
.article__cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- prose ---------- */
.prose{ font-size:1rem; line-height:1.85; color:#454e48; }
.prose > p{ margin-bottom:1.5rem; }
.prose strong{ color:var(--td-heading); font-weight:600; }
.prose a{ color:var(--td-green); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--td-green-600); }

.prose h2{
  font-size:clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--td-heading);
  line-height:1.35;
  margin:3rem 0 1.1rem;
  padding-left:1rem;
  border-left:4px solid var(--td-green);
  scroll-margin-top:120px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-size:1.0625rem;
  font-weight:600;
  color:var(--td-heading);
  margin:2rem 0 .75rem;
  scroll-margin-top:120px;
}

.prose ul{ padding-left:0; list-style:none; margin:0 0 1.5rem; }
.prose ul li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:.75rem;
  font-size:.9375rem;
}
.prose ul li::before{
  content:"";
  position:absolute; left:0; top:.65em;
  width:7px; height:7px;
  border-radius:2px;
  background:var(--td-green);
}

/* callout box inside the prose */
.prose-callout{
  background:var(--td-mint);
  border-left:5px solid var(--td-green);
  border-radius:0 12px 12px 0;
  padding:28px 32px;
  margin:2.25rem 0;
}
.prose-callout h3{ margin-top:0; margin-bottom:1rem; font-size:1rem; }
.prose-callout ul{ margin-bottom:0; }
.prose-callout ul li{ font-size:.875rem; color:#3c463f; }

/* ---------- article footer ---------- */
.article__foot{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--td-line);
  margin-top:3rem;
  padding-top:1.75rem;
}
.share{ display:flex; align-items:center; gap:.6rem; font-size:.8125rem; color:var(--td-body); }
.share a{
  width:36px; height:36px;
  border:1px solid var(--td-line);
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--td-heading);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.share a:hover{ border-color:var(--td-green); color:#fff; background:var(--td-green); }

/* ---------- sticky sidebar ---------- */
.article-side{ position:sticky; top:120px; }

.toc{
  border:1px solid var(--td-line);
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:1.25rem;
}
.toc h2{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--td-body);
  margin-bottom:1rem;
}
.toc .nav-link{
  padding:.4rem 0 .4rem .85rem;
  font-size:.8125rem;
  color:var(--td-body);
  border-left:2px solid var(--td-line);
  line-height:1.5;
}
.toc .nav-link:hover{ color:var(--td-heading); }
.toc .nav-link.active{
  color:var(--td-green);
  border-left-color:var(--td-green);
  font-weight:500;
}

.side-card{
  background:var(--td-card);
  border-radius:14px;
  padding:26px 26px 28px;
  color:#fff;
}
.side-card h2{ color:#fff; font-size:1rem; font-weight:600; margin-bottom:.5rem; }
.side-card p{ color:rgba(255,255,255,.78); font-size:.8125rem; margin-bottom:1.25rem; }
.side-card .btn{ width:100%; justify-content:center; }

@media (max-width:991.98px){
  .article-side{ position:static; margin-top:2.5rem; }
  .toc{ display:none; }
  .article{ padding:40px 0 64px; }
}

/* ---------- related ---------- */
.related-posts{ background:#f4f7f5; padding:80px 0; }
.related-posts__head{ margin-bottom:2rem; }
.related-posts__head h2{
  font-size:clamp(1.4rem,2vw,1.85rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
}

/* ==========================================================================
   PROJECT / SUCCESS STORY LIST
   ========================================================================== */

.projects{ padding:56px 0 20px; }

/* ---------- featured story ---------- */
.case-feature{
  border:1px solid var(--td-line);
  border-radius:var(--td-radius);
  overflow:hidden;
  background:#fff;
  margin-bottom:56px;
}
.case-feature__media{ position:relative; height:100%; min-height:320px; }
.case-feature__media img{ width:100%; height:460px; object-fit:cover; display:block; }
.case-feature__flag{
  position:absolute; top:16px; left:16px;
  background:var(--td-green);
  color:#fff;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.35rem .7rem;
  border-radius:5px;
}
.case-feature__body{ padding:44px 46px; }
.case-feature__eyebrow{
  color:var(--td-green);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.85rem;
}
.case-feature__body h2{
  font-size:clamp(1.4rem, 2.1vw, 1.95rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.case-feature__body > p{ font-size:.9375rem; color:#4c544e; margin-bottom:1.5rem; }

.case-facts{
  list-style:none; padding:0;
  margin:0 0 1.75rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem 1.5rem;
  border-top:1px solid var(--td-line);
  border-bottom:1px solid var(--td-line);
  padding:1.25rem 0;
}
.case-facts dt{
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--td-body);
  margin-bottom:.2rem;
}
.case-facts dd{ font-size:.875rem; font-weight:600; color:var(--td-heading); margin:0; }

@media (min-width:576px){ .case-facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767.98px){ .case-feature__body{ padding:30px 26px; } }

/* ---------- story card ---------- */
.case-card{
  position:relative;
  height:100%;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--td-line);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.case-card:hover{
  border-color:#b9ccbd;
  box-shadow:0 16px 38px rgba(14,21,18,.09);
  transform:translateY(-3px);
}
.case-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--td-panel); }
.case-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.case-card:hover .case-card__media img{ transform:scale(1.04); }

.case-card__sector{
  position:absolute; top:12px; left:12px;
  background:rgba(9,32,18,.86);
  color:#fff;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.3rem .6rem;
  border-radius:5px;
}
.case-card__year{
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.92);
  color:var(--td-heading);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.08em;
  padding:.3rem .55rem;
  border-radius:5px;
}

.case-card__body{ padding:1.15rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1 1 auto; }
.case-card__body h3{ font-size:1rem; font-weight:700; line-height:1.4; letter-spacing:-.01em; margin-bottom:.5rem; }
.case-card__body h3 a{ color:var(--td-heading); }
.case-card__body h3 a:hover{ color:var(--td-green); }
.case-card__body h3 a::after{ content:""; position:absolute; inset:0; }
.case-card__summary{ font-size:.8125rem; color:var(--td-body); line-height:1.7; margin-bottom:1rem; }

.case-card__rows{ list-style:none; padding:0; margin:0 0 1rem; border-top:1px dashed #e2e7e3; }
.case-card__rows li{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.75rem;
  padding:.4rem 0;
  border-bottom:1px dashed #e2e7e3;
}
.case-card__rows span:first-child{ color:var(--td-body); flex:none; }
.case-card__rows span:last-child{ color:var(--td-heading); font-weight:500; text-align:right; }

.case-card__more{
  margin-top:auto;
  font-size:.8125rem; font-weight:500;
  color:var(--td-green);
  display:inline-flex; align-items:center; gap:.4rem;
}
.case-card__more i{ transition:transform .2s ease; }
.case-card:hover .case-card__more i{ transform:translateX(4px); }

/* ---------- stats band on this page ---------- */
.projects-stats{ padding:20px 0 80px; }

/* ==========================================================================
   Brand pages — compact rhythm + green bands
   ========================================================================== */
.section--tight{ padding:52px 0; }
.section--tight.pt-0{ padding-top:0 !important; }
.section--tighter{ padding:38px 0; }

/* soft green tint band */
.band-soft{
  background:linear-gradient(180deg, #f2f7f3 0%, #eaf2ec 100%);
  border-top:1px solid #dfe9e1;
  border-bottom:1px solid #dfe9e1;
}

/* solid brand-green band */
.band-green{ background: var(--td-card); color:#fff; }
.band-green .section-title,
.band-green h2,
.band-green h3{ color:#fff; }
.band-green .eyebrow{ color:rgba(255,255,255,.82); }
.band-green .text-muted-td{ color:rgba(255,255,255,.86); }
.band-green .svc-card{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}
.band-green .svc-card h3{ color:#fff; }
.band-green .svc-card p{ color:rgba(255,255,255,.86); }
.band-green .svc-card__icon{ background:rgba(255,255,255,.18); color:#fff; }
.band-green .svc-card:hover{ background:rgba(255,255,255,.16); }

/* deep green band */
.band-deep{ background:var(--td-deep); color:rgba(255,255,255,.82); }
.band-deep .section-title,
.band-deep h2,
.band-deep h3{ color:#fff; }
.band-deep .eyebrow{ color:#7ee39a; }
.band-deep .text-muted-td{ color:rgba(255,255,255,.7); }
.band-deep .svc-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.band-deep .svc-card h3{ color:#fff; }
.band-deep .svc-card p{ color:rgba(255,255,255,.72); }
.band-deep .svc-card__icon{ background:var(--td-green); color:#fff; }
.band-deep .svc-card:hover{ background:rgba(255,255,255,.11); }

/* compact section headers */
.head-compact{ margin-bottom:2rem !important; }
.head-compact .section-title{ font-size:clamp(1.45rem, 2vw, 2rem); margin-bottom:.35rem; }
.head-compact .eyebrow{ margin-bottom:.3rem; }

/* denser brand hero */
.page-hero--compact{ padding:44px 0 36px; }

/* brand strip: logo row with green ground */
.brand-strip{
  background:var(--td-ink);
  padding:22px 0;
}
.brand-strip__list{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:1rem 2.5rem; margin:0; padding:0; list-style:none;
}
.brand-strip__list a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.72); font-size:.9rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:8px; transition:.18s ease;
}
.brand-strip__list a:hover,
.brand-strip__list a[aria-current="page"]{ background:var(--td-green); color:#fff; }

/* tighter catalogue cards on brand pages */
.brand-grid .cat-card__body{ padding:16px 18px 14px; }
.brand-grid .cat-specs{ margin-bottom:.65rem; }
.brand-grid .cat-card__name{ margin-bottom:.4rem; }

@media (max-width:991.98px){
  .section--tight{ padding:40px 0; }
  .section--tighter{ padding:30px 0; }
}

/* ==========================================================================
   Contact Form 7
   CF7 emits its own wrappers around the fields. These rules make them inherit
   the design's form styling so a CF7 form is visually identical to the built-in
   one — nothing here changes the design, it only extends it to new markup.
   ========================================================================== */
.form-td--cf7 .wpcf7-form-control-wrap { display: block; }

.form-td--cf7 input[type="text"],
.form-td--cf7 input[type="email"],
.form-td--cf7 input[type="tel"],
.form-td--cf7 select,
.form-td--cf7 textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--td-line);
	border-radius: var(--td-radius-sm);
	background: #fff;
	font: inherit;
	font-size: .9375rem;
	color: var(--td-heading);
}

.form-td--cf7 input:focus,
.form-td--cf7 select:focus,
.form-td--cf7 textarea:focus {
	border-color: var(--td-green);
	outline: 2px solid rgba(41, 162, 68, .25);
	outline-offset: 0;
}

.form-td--cf7 label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--td-heading);
}

.form-td--cf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 1.05rem 1.75rem;
	border: 0;
	border-radius: var(--td-radius-sm);
	background: var(--td-green);
	color: #fff;
	font-weight: 600;
	font-size: .9375rem;
	cursor: pointer;
	width: auto;
}

.form-td--cf7 .wpcf7-submit:hover { background: var(--td-green-600); }

.form-td--cf7 .wpcf7-not-valid-tip {
	margin-top: .35rem;
	font-size: .8125rem;
	color: #b32d2e;
}

.form-td--cf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: .85rem 1rem;
	border-radius: var(--td-radius-sm);
	font-size: .9375rem;
}

.form-td--cf7 form.sent .wpcf7-response-output {
	border: 1px solid var(--td-green);
	background: #eaf4ec;
	color: var(--td-card);
}

.form-td--cf7 form.invalid .wpcf7-response-output,
.form-td--cf7 form.failed .wpcf7-response-output {
	border: 1px solid #b32d2e;
	background: #fdecec;
	color: #98292a;
}

.form-td--cf7 .row > [class*="col-"] { margin-bottom: 1rem; }

/* ==========================================================================
   WordPress admin bar
   The admin bar is fixed and pushes <html> down by 32px (46px on small
   screens). Two things need to know about it: the sticky header, which would
   otherwise slide underneath, and any full-height hero.

   These rules only apply when the bar is present, so a logged-out visitor sees
   the design exactly as before.
   ========================================================================== */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* The bar is not fixed below 601px, so nothing needs offsetting there. */
@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* ==========================================================================
   Case study detail page
   ========================================================================== */

.case-hero{ position:relative; padding:64px 0 56px; background:var(--td-ink); overflow:hidden; }
.case-hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.22;
}
.case-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,26,20,.55),rgba(15,26,20,.9)); }
.case-hero .container-td{ position:relative; }
.case-hero__grid{ display:flex; gap:32px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.case-hero__copy{ flex:1 1 460px; min-width:0; }
.case-hero__eyebrow{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:#7fcf92; margin:0 0 .6rem;
}
.case-hero__title{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.14; margin:0 0 .5rem; }
.case-hero__sub{ color:#a9b5ac; font-size:.95rem; margin:0 0 1rem; }
.case-hero__meta{ flex:0 0 auto; text-align:center; }
.case-hero__badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--td-green); color:#08240f;
  font-size:.75rem; font-weight:500;
  padding:.4rem .8rem; border-radius:6px; margin-bottom:.75rem;
}
.case-hero__year{ border:1px solid #2f4436; border-radius:12px; padding:.85rem 1.5rem; }
.case-hero__year-value{ display:block; font-size:1.9rem; font-weight:500; color:var(--td-green); line-height:1; }
.case-hero__year-label{ display:block; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:#8fa094; margin-top:.35rem; }

/* ---------- fact bar ---------- */
.case-facts-bar{ background:var(--td-mint); }
.case-facts-bar__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:0;
}
.case-facts-bar__item{ padding:1.1rem 1.25rem; border-right:1px solid #d5e6d9; }
.case-facts-bar__item:last-child{ border-right:0; }
.case-facts-bar dt{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4b6b52; margin:0 0 .3rem; font-weight:400;
}
.case-facts-bar dd{ margin:0; font-size:.875rem; font-weight:500; color:var(--td-heading); }

/* ---------- lead ---------- */
.case-lead{
  border-left:3px solid var(--td-green);
  background:var(--td-mist);
  padding:1.25rem 1.4rem;
}
.case-lead p{ margin:0 0 .6rem; font-size:1rem; line-height:1.75; color:#3c4740; }
.case-lead p:last-child{ margin-bottom:0; }

/* ---------- two columns ---------- */
.case-col__title{
  font-size:1.1rem; font-weight:600; color:var(--td-heading);
  border-bottom:2px solid var(--td-green);
  padding-bottom:.6rem; margin:0 0 1rem;
}
.case-col__body p{ font-size:.9375rem; line-height:1.8; color:var(--td-body); margin:0 0 .9rem; }
.case-col__body p:last-child{ margin-bottom:0; }

/* ---------- replaced / upgraded ---------- */
.case-swap{
  border:1px solid var(--td-line); border-radius:var(--td-radius);
  padding:1.5rem;
  display:grid; grid-template-columns:1fr auto 1fr; gap:1.25rem; align-items:center;
}
.case-swap__side{ text-align:center; }
.case-swap__label{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8a938c; margin:0 0 .4rem;
}
.case-swap__old{ font-size:1.15rem; color:#a33; text-decoration:line-through; margin:0 0 .2rem; }
.case-swap__new{ font-size:1.15rem; color:var(--td-heading); font-weight:600; margin:0 0 .2rem; }
.case-swap__note{ font-size:.8125rem; color:var(--td-body); margin:0; }
.case-swap__arrow{ text-align:center; color:var(--td-green); }
.case-swap__arrow i{ font-size:1.5rem; }
.case-swap__arrow span{
  display:block; font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--td-body); margin-top:.2rem;
}
@media (max-width:767px){
  .case-swap{ grid-template-columns:1fr; }
  .case-swap__arrow i{ transform:rotate(90deg); display:inline-block; }
}

/* ---------- large figure ---------- */
.case-bigstat{
  background:var(--td-deep); border-radius:var(--td-radius);
  padding:1.75rem 2rem;
  display:flex; gap:2rem; align-items:center; flex-wrap:wrap;
}
.case-bigstat__figure{ flex:0 0 auto; text-align:center; padding-right:2rem; border-right:1px solid #1c5238; }
.case-bigstat__value{ display:block; font-size:3.25rem; font-weight:600; color:var(--td-green); line-height:1; }
.case-bigstat__label{ display:block; font-size:.9rem; color:#7fcf92; margin-top:.3rem; }
.case-bigstat__text{ flex:1 1 320px; margin:0; font-size:.9375rem; line-height:1.75; color:#b7c6bc; }
@media (max-width:767px){
  .case-bigstat__figure{ border-right:0; padding-right:0; }
}

/* ---------- proof band ---------- */
.case-proof{
  background:var(--td-deep); border-radius:var(--td-radius);
  padding:1.6rem 1.8rem;
  display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap;
}
.case-proof__icon{
  flex:0 0 auto; width:96px; text-align:center;
  border:1px solid #1c5238; border-radius:12px; padding:1rem .6rem;
}
.case-proof__icon i{ font-size:1.8rem; color:var(--td-green); }
.case-proof__icon span{
  display:block; font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:#7fcf92; margin-top:.4rem;
}
.case-proof__body{ flex:1 1 320px; min-width:0; }
.case-proof__body h2{ font-size:1.05rem; font-weight:600; color:var(--td-green); margin:0 0 .5rem; }
.case-proof__body p{ font-size:.9375rem; line-height:1.75; color:#b7c6bc; margin:0 0 .6rem; }
.case-proof__body p:last-child{ margin-bottom:0; }

/* ---------- coverage ---------- */
.case-coverage{
  background:var(--td-forest); border-radius:12px;
  padding:1.1rem 1rem; text-align:center; height:100%;
}
.case-coverage__tag{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:#7fcf92; margin:0 0 .4rem;
}
.case-coverage h3{ font-size:.95rem; font-weight:600; color:#fff; margin:0 0 .2rem; }
.case-coverage__sub{ font-size:.75rem; color:#a9b5ac; margin:0; }

/* ---------- highlights ---------- */
.case-highlight{
  border:1px solid var(--td-line); border-radius:12px;
  padding:1rem 1.1rem; height:100%;
  display:flex; gap:.75rem; align-items:flex-start;
}
.case-highlight i{ color:var(--td-green); font-size:1.15rem; flex:0 0 auto; line-height:1.4; }
.case-highlight p{ margin:0; font-size:.9rem; line-height:1.6; color:#3c4740; }

/* ---------- stat cards ---------- */
.case-stat{
  background:var(--td-forest); border-radius:12px;
  padding:1.4rem 1.1rem; text-align:center; height:100%;
}
.case-stat__value{ display:block; font-size:1.6rem; font-weight:600; color:var(--td-green); line-height:1.2; }
.case-stat__label{
  display:block; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.6; color:#a9b5ac; margin-top:.45rem;
}

/* ---------- outcome ---------- */
.case-outcome{ background:var(--td-mist); border-radius:var(--td-radius); padding:1.6rem 1.8rem; }
.case-outcome h2{ font-size:1.05rem; font-weight:600; color:var(--td-heading); margin:0 0 .7rem; }
.case-outcome p{ font-size:.9375rem; line-height:1.8; color:var(--td-body); margin:0 0 .7rem; }
.case-outcome p:last-child{ margin-bottom:0; }

/* ---------- more stories ---------- */
.case-card{
  display:block; height:100%; background:#fff;
  border:1px solid var(--td-line); border-radius:var(--td-radius);
  overflow:hidden; text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.case-card:hover{ border-color:#b9ccbd; box-shadow:0 14px 34px rgba(14,21,18,.08); transform:translateY(-2px); }
.case-card__media{ position:relative; aspect-ratio:16/10; background:var(--td-panel); }
.case-card__media img{ width:100%; height:100%; object-fit:cover; }
.case-card__year{
  position:absolute; top:.7rem; left:.7rem;
  background:var(--td-green); color:#08240f;
  font-size:.6875rem; font-weight:500;
  padding:.2rem .55rem; border-radius:4px;
}
.case-card__body{ padding:1rem 1.15rem 1.15rem; }
.case-card__body h3{ font-size:1rem; font-weight:600; color:var(--td-heading); margin:0 0 .4rem; }
.case-card__body p{ font-size:.85rem; line-height:1.6; color:var(--td-body); margin:0 0 .6rem; }
.case-card__more{ font-size:.8125rem; font-weight:500; color:var(--td-green); }

/* Listing cards link through to the detail page. A stretched overlay keeps
   the whole card clickable without nesting the spec list inside an <a>. */
.case-card--link{ position:relative; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.case-card--link:hover{ border-color:#b9ccbd; box-shadow:0 14px 34px rgba(14,21,18,.08); transform:translateY(-2px); }
.case-card__hit{ position:absolute; inset:0; z-index:2; }
.case-card--link .case-card__body{ position:relative; }

/* ---------- mission / vision hardening ----------
   The decorative graphic is absolutely positioned and can cover the whole
   card, so the text colours are stated explicitly and the content is lifted
   above the artwork. Without this a dark background graphic left the copy
   in dark grey on dark green. */

.mv-card > *:not(.mv-card__deco){ position:relative; z-index:1; }

.mv-card--vision,
.mv-card--vision .mv-card__headline,
.mv-card--vision .mv-card__text,
.mv-card--vision p{ color:#fff; }

.mv-card--vision .mv-card__text,
.mv-card--vision p:not(.mv-card__eyebrow){ color:rgba(255,255,255,.86); }

.mv-card--vision .mv-card__eyebrow{ color:#7ee39a; }
.mv-card--vision .mv-card__headline::after{ background:#7ee39a; }

.mv-card--mission,
.mv-card--mission .mv-card__headline{ color:var(--td-heading); }
.mv-card--mission .mv-card__text,
.mv-card--mission p:not(.mv-card__eyebrow){ color:#4b544d; }

/* Keep both columns the same height so the pair reads as one block. */
.mv .row > [class*="col-"]{ display:flex; }
.mv .mv-card{ width:100%; }

/* ==========================================================================
   Banner slider

   Only the photograph moves. The heading, text and buttons sit above the
   slides and never shift, so the message stays readable the whole way round.
   ========================================================================== */

.hero--slider{ position:relative; overflow:hidden; background:var(--td-ink); }

.hero__slides{ position:absolute; inset:0; z-index:0; }

.hero__slide{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center top;
  opacity:0;
  transition:opacity .9s ease-in-out;
  will-change:opacity;
}

.hero__slide.is-active{ opacity:1; }

/* Content above the photographs. */
.hero--slider .hero__inner{ position:relative; z-index:2; }

/* ---------- arrows ---------- */

.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff; font-size:1.25rem;
  cursor:pointer;
  transition:background .2s ease;
}

.hero__arrow:hover{ background:rgba(255,255,255,.28); }
.hero__arrow:focus-visible{ outline:3px solid var(--td-green); outline-offset:3px; }
.hero__arrow--prev{ left:18px; }
.hero__arrow--next{ right:18px; }

/* ---------- dots ---------- */

.hero__dots{
  position:absolute; left:0; right:0; bottom:18px;
  z-index:3;
  display:flex; justify-content:center; gap:9px;
}

.hero__dot{
  width:10px; height:10px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:background .2s ease, width .2s ease;
}

.hero__dot.is-active{ background:var(--td-green); width:26px; border-radius:5px; }
.hero__dot:focus-visible{ outline:3px solid var(--td-green); outline-offset:3px; }

/* ---------- small screens ---------- */

@media (max-width:767px){
  /* Arrows crowd a phone banner; swiping covers it. */
  .hero__arrow{ display:none; }
  .hero__dots{ bottom:12px; }
}

/* Respect a reduced-motion preference: show the first photo, no cross-fade. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{ transition:none; }
}

/* ---------- per-slide copy ----------
   All the copy blocks occupy the same grid cell, so the column is as tall as
   the longest one and nothing jumps as the banner rotates. Only the active
   block is visible and clickable. */

.hero__copy--stack{ display:grid; }

.hero__copy-item{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .6s ease-in-out, visibility .6s;
}

.hero__copy-item.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@media (prefers-reduced-motion:reduce){
  .hero__copy-item{ transition:none; }
}

/* ---------- case study project photo ----------
   A fixed aspect ratio so the band is the same height whatever the client
   uploads — a portrait shot would otherwise make the page lurch. */

.case-photo{
  margin:0;
  border-radius:var(--td-radius);
  overflow:hidden;
  background:var(--td-panel);
}

.case-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Every case photo is prepared at 16:9, so one ratio keeps the whole band
   aligned without needing fixed pixel heights. */
.case-photo .case-photo__main{ display:block; aspect-ratio:16/9; }

/* Two or three: the first stays large with the rest stacked beside it. Fixed
   heights rather than ratios, so a portrait shot and a landscape one still
   line up instead of one stretching the row. */
.case-photo--group{
  display:grid;
  align-items:stretch;
  gap:12px;
  border-radius:0;
  background:none;
  overflow:visible;
}

.case-photo--group .case-photo__main,
.case-photo--group .case-photo__thumb{
  border-radius:var(--td-radius);
  overflow:hidden;
  background:var(--td-panel);
}

.case-photo--group .case-photo__main{ aspect-ratio:16/9; }
.case-photo--group .case-photo__thumb{ aspect-ratio:16/9; }
.case-photo__thumb{ aspect-ratio:16/9; }

/*
 * Three photos sit in one row of three equal columns. The earlier
 * lead-plus-stack arrangement had to make two small pictures add up to the
 * height of a large one, which left them overflowing their cells. Three equal
 * columns need no such reconciliation, and every photo is the same 16:9 shape
 * anyway, so they line up on their own.
 */
/* The supplied photos vary from 2.7:1 panoramas to portrait shots. Cover
   crops rather than distorts, and centring the crop keeps the subject —
   usually a building — in frame whichever shape arrives. */
.case-photo img{ object-position:center 40%; }

/* The wrapper dissolves so its photos become direct children of the band's
   grid — that is what lets two or three sit as equal columns. */
.case-photo__rest{ display:contents; }

/* Two photos side by side. */
.case-photo--1{ grid-template-columns:1fr 1fr; }

/* Three: equal thirds across one row. */
.case-photo--2{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.case-photo--group figcaption{ grid-column:1 / -1; background:none; padding:.6rem 0 0; }

/* Clicking any photo opens it full size. */
.case-photo a{ display:block; height:100%; }
.case-photo a img{ transition:transform .35s ease; }
.case-photo a:hover img{ transform:scale(1.03); }

@media (max-width:767px){
  /* Stacked on a phone — side by side would make each too small to read. */
  .case-photo--group{ grid-template-columns:1fr 1fr; }
  .case-photo--group .case-photo__main{ grid-column:1 / -1; }
  .case-photo--1{ grid-template-columns:1fr; }
}

.case-photo figcaption{
  padding:.75rem 1rem;
  font-size:.8125rem;
  color:var(--td-body);
  background:var(--td-mist);
}

@media (max-width:575px){
  /* Taller crop on a phone so the subject is still readable. */
  .case-photo img{ aspect-ratio:4 / 3; }
}

/* A photo in the contact card sits where the initials circle would be. */
.person__photo{
  display:block;
  width:96px; height:96px;
  margin:0 auto .9rem;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.18);
}

/* ==========================================================================
   How can we help — requirement cards

   Self-contained cards, two per row: rule, icon, heading, wording, photo,
   and a round arrow overlapping the photo's top edge.
   ========================================================================== */

.help-card{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-top:3px solid var(--td-green);
  border-radius:0 0 14px 14px;
  padding:1.25rem 1.25rem 1.1rem;
  box-shadow:0 1px 3px rgba(14,21,18,.06);
  transition:box-shadow .2s ease, transform .2s ease;
}

.help-card:hover{
  box-shadow:0 16px 38px rgba(14,21,18,.10);
  transform:translateY(-3px);
}

.help-card__head{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.7rem;
}

.help-card__icon{
  flex:0 0 auto;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--td-ink);
  color:#fff;
  border-radius:9px;
  font-size:1.2rem;
}

.help-card__icon img{ width:24px; height:24px; object-fit:contain; }

.help-card__title{
  margin:0;
  font-size:1.08rem;
  font-weight:600;
  line-height:1.3;
  color:var(--td-heading);
}

.help-card__text{
  margin:0 0 .9rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--td-body);
}

/* The photo sits at the bottom, so cards of differing text length still line
   their images up. */
.help-card__media{
  position:relative;
  margin-top:auto;
  border-radius:12px;
  overflow:visible;
}

.help-card__media img{
  display:block;
  width:100%;
  /* A fixed height, not a ratio. With aspect-ratio the photo grew with the
     column, so on a wide screen it swamped the wording it was meant to
     support — and two cards could end up with different image heights. */
  height:200px;
  object-fit:cover;
  border-radius:10px;
}

.help-card__go{
  position:absolute;
  top:-16px; right:12px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:var(--td-green);
  color:#fff;
  border-radius:50%;
  font-size:.9rem;
  box-shadow:0 3px 9px rgba(14,21,18,.18);
  transition:background .2s ease;
}

.help-card__go:hover{ background:var(--td-forest); color:#fff; }

.help-card__link{
  margin-top:.8rem;
  font-size:.875rem;
  font-weight:500;
  color:var(--td-green);
}

.help-card__link i{ font-size:.85rem; }

/* A card with no photo keeps its link at the bottom rather than floating. */
.help-card > .help-card__link:last-child{ margin-top:auto; }

@media (max-width:575px){
  .help-card{ padding:1.1rem; }
  .help-card__icon{ width:40px; height:40px; font-size:1.05rem; }
  .help-card__title{ font-size:1rem; }
  .help-card__media img{ height:170px; }
}

/* Contact — the photo that can replace the card beside the WhatsApp panel. */
.wa-panel__photo{
  margin:0;
  border-radius:var(--td-radius);
  overflow:hidden;
  background:var(--td-panel);
}

.wa-panel__photo img{
  display:block;
  width:100%;
  /* Square at every width. A set shape means the panel keeps its height
     whatever is uploaded, and cover crops rather than distorts. */
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

/* A track tile that links to its category. The overlay keeps the whole tile
   clickable without nesting the caption inside an anchor. */
.track__card--link{ position:relative; }
.track__card-hit{ position:absolute; inset:0; z-index:2; }
.track__card--link img{ transition:transform .35s ease; }
.track__card--link:hover img{ transform:scale(1.04); }
.track__card--link figcaption{ position:relative; z-index:1; }