/* Reference design system — adapted from the approved wireframe reference build.
   Real photography replaces the reference's crossed-box placeholders wherever
   Yende has approved photos; the placeholder pattern itself is kept only for
   spots with no real asset yet (client project rows, the contact map strip). */
:root{
  --wf-red:#d71920;
  --wf-ink:#24282e;
  --wf-muted:#70757c;
  --wf-soft:#f2f3f4;
  --wf-line:#d3d6d9;
  --wf-shadow:0 3px 8px rgba(0,0,0,.18);
}
/* Grid children default to min-width:auto, which refuses to shrink below the
   width of their longest unbreakable content (e.g. the website URL) — this
   is the classic cause of grid layouts overflowing their container on
   narrow screens. Force every grid/flex layout in this file to allow its
   children to shrink, and let long tokens wrap instead of forcing overflow. */
.wf-flow-grid,.wf-intro-row,.wf-card-grid-3,.wf-service-layout,.wf-use-grid,
.wf-why-layout,.wf-why-grid,.wf-community-layout,.wf-community-cards,
.wf-client-row,.wf-contact-grid,.wf-contact-detail,.wf-service-list{min-width:0}
.wf-flow-grid>*,.wf-intro-row>*,.wf-card-grid-3>*,.wf-service-layout>*,.wf-use-grid>*,
.wf-why-layout>*,.wf-why-grid>*,.wf-community-layout>*,.wf-community-cards>*,
.wf-client-row>*,.wf-contact-grid>*,.wf-contact-detail>*,.wf-service-list>*{min-width:0}
.wf-contact-detail span,.wf-client-row p,.wf-info-panel p{overflow-wrap:break-word;word-break:break-word}

.btn{
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;
  background:var(--wf-red);color:#fff;font-weight:900;font-size:13px;border:0;border-radius:5px;
  box-shadow:0 3px 6px rgba(0,0,0,.20);text-transform:uppercase;cursor:pointer;transition:.18s ease
}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.17);color:#fff}
.kicker{color:var(--wf-red);text-transform:uppercase;font-size:13px;font-weight:900;margin:0 0 16px}
.page-title{margin:0;font-size:42px;line-height:1.05;text-transform:uppercase;letter-spacing:-1.2px}
.page-intro{margin:18px 0 0;color:var(--wf-muted);font-size:15px;line-height:1.7;max-width:850px}

/* Placeholder pattern — kept for spots with no real asset (client rows, map strip) */
.placeholder{
  min-height:300px;background:var(--wf-soft);border:2px solid #d0d3d6;position:relative;overflow:hidden;
  display:grid;place-items:center;color:#666a70;font-size:14px;font-weight:800;text-transform:uppercase;text-align:center
}
.placeholder::before,.placeholder::after{
  content:"";position:absolute;left:-20%;top:50%;width:140%;height:3px;background:#d0d3d6;transform-origin:center
}
.placeholder::before{transform:rotate(36deg)}
.placeholder::after{transform:rotate(-36deg)}
.placeholder span{position:relative;z-index:2;background:rgba(242,243,244,.86);padding:8px 10px}

/* Home hero — real photo background (reference used a grey label placeholder; we have real photography) */
.wf-hero{min-height:clamp(560px,80vh,760px);position:relative;overflow:hidden;isolation:isolate}
.wf-hero>img,.wf-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Hero slideshow: slides crossfade in place; the copy card never moves. */
.wf-hero-slides{position:absolute;inset:0;z-index:-2}
.wf-hero-slide{opacity:0;transition:opacity 1.1s ease}
.wf-hero-slide.is-active{opacity:1}
.wf-hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.82);color:var(--wf-ink);font-size:30px;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.16);transition:.18s ease
}
.wf-hero-arrow:hover{background:var(--wf-red);color:#fff}
.wf-hero-arrow:focus-visible{outline:3px solid var(--wf-red);outline-offset:3px}
.wf-hero-arrow--prev{left:18px}
.wf-hero-arrow--next{right:18px}
.wf-hero-dots{position:absolute;left:0;right:0;bottom:26px;z-index:2;display:flex;justify-content:center;gap:10px}
.wf-hero-dot{
  width:34px;height:5px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(36,40,46,.28);transition:background .25s ease,transform .25s ease
}
.wf-hero-dot.is-active{background:var(--wf-red)}
.wf-hero-dot:hover{transform:scaleY(1.6)}
.wf-hero-dot:focus-visible{outline:3px solid var(--wf-red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wf-hero-slide{transition:none}}
.wf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 42%,rgba(20,22,26,.28) 100%);z-index:-1}
/* The header is position:fixed and its height is driven by the logo, so it
   runs taller than --header-h; the hero has to clear it or the card is clipped. */
.wf-hero-inner{min-height:inherit;display:flex;align-items:center;padding:calc(var(--header-h,84px) + 64px) 0 64px}
.wf-hero-card{width:min(730px,58%);background:#fff;padding:37px 52px 38px;box-shadow:var(--wf-shadow)}
.wf-hero-title{margin:0;font-size:40px;line-height:1.15;text-transform:uppercase;font-weight:950;color:var(--wf-ink)}
.wf-hero-title .red{color:var(--wf-red)}
.wf-hero-copy{margin:14px 0 0;color:var(--wf-muted);font-size:15px;line-height:1.65;font-weight:600;max-width:680px}
.wf-hero-card .btn{margin-top:32px}

.wf-flow{padding:38px 0 70px}
.wf-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.wf-flow-card{
  min-height:170px;padding:20px;border:2px solid var(--wf-line);border-radius:15px;box-shadow:0 3px 5px rgba(0,0,0,.12);
  display:grid;grid-template-columns:56px 1fr;gap:20px;overflow:hidden;background:#fff;transition:.18s ease
}
.wf-flow-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.wf-num{width:56px;height:56px;border-radius:4px;background:var(--wf-ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.wf-flow-card h3{margin:5px 0 10px;color:var(--wf-red);font-size:17px;text-transform:uppercase}
.wf-flow-card p{margin:0;color:var(--wf-muted);font-size:13px;line-height:1.5}

/* Inner-page intro row: copy panel + real photo */
.wf-intro-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:48px;align-items:start;margin-top:24px}
.wf-info-panel{background:var(--wf-soft);padding:32px 34px;box-shadow:0 3px 5px rgba(0,0,0,.1)}
.wf-info-panel h2{margin:0 0 18px;color:var(--wf-red);font-size:25px;text-transform:uppercase}
.wf-info-panel p{margin:0 0 20px;line-height:1.7;color:var(--wf-muted)}
.wf-info-panel .strong{color:var(--wf-ink);font-weight:800}
/* <figure> carries a UA margin, and a plain block figure lets the image stop
   at its intrinsic height — leaving a white strip under the photo. Grid makes
   the image stretch to the full frame. */
.wf-photo-box{margin:0;display:grid;min-height:300px;border:2px solid var(--wf-line);box-shadow:0 3px 5px rgba(0,0,0,.1);overflow:hidden}
.wf-photo-box>img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}

.wf-card-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.wf-number-card{
  min-height:200px;border:2px solid var(--wf-line);border-radius:15px;padding:20px;box-shadow:0 3px 5px rgba(0,0,0,.1);
  display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;overflow:hidden;background:#fff
}
.wf-number-card .wf-num{width:52px;height:52px}
.wf-number-card h3{margin:5px 0 12px;color:var(--wf-red);text-transform:uppercase;font-size:16px}
.wf-number-card p{margin:0;color:var(--wf-muted);line-height:1.6;font-size:13px}
.wf-number-card ul{margin:0;padding-left:1.05rem;color:var(--wf-muted);font-size:13px;line-height:1.6}
.wf-positioning{margin-top:38px}
.wf-positioning h2{margin:0;font-size:26px;line-height:1.3;color:var(--wf-ink)}

/* Services hub pages */
.wf-service-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:44px;margin-top:24px}
.wf-service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:24px}
/* Chips render as <a class="item"> where they link and <div class="item">
   where they are plain proof points — both must be styled. */
.wf-service-list .item{
  min-height:49px;background:var(--wf-soft);padding:14px 16px;box-shadow:0 2px 4px rgba(0,0,0,.1);font-size:14px;
  display:flex;align-items:center;color:var(--wf-ink);font-weight:600
}
.wf-service-list a.item:hover{background:#ececea;color:var(--wf-red)}
.wf-dark-module{background:var(--wf-ink);color:#fff;border-radius:20px;padding:30px 28px;min-height:220px;display:flex;flex-direction:column}
.wf-dark-module h3{color:#fff;margin:0 0 20px;text-transform:uppercase;font-size:16px}
.wf-dark-module p{margin:0;color:#d9dadd;line-height:1.7;font-size:14px}
.wf-dark-module .btn{margin-top:auto;align-self:flex-start;margin-top:20px}
.wf-banner-dark{margin-top:24px;min-height:64px;display:flex;align-items:center;padding:0 26px;color:#fff;background:var(--wf-ink);font-weight:900;text-transform:uppercase;font-size:13px}

/* Innovation */
.wf-innovation-card{background:var(--wf-soft);padding:40px 34px;min-height:420px;display:flex;flex-direction:column;box-shadow:0 3px 5px rgba(0,0,0,.1)}
.wf-innovation-card h2{font-size:30px;line-height:1.2;margin:0;text-transform:uppercase;color:var(--wf-ink)}
.wf-innovation-card h3{font-size:19px;margin:20px 0 22px;color:var(--wf-ink)}
.wf-innovation-card p{color:var(--wf-muted);line-height:1.7}
.wf-use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:auto}
.wf-use-card{background:#fff;border:2px solid var(--wf-line);border-radius:9px;padding:18px;text-align:center;box-shadow:0 3px 4px rgba(0,0,0,.1)}
.wf-use-card h4{margin:0 0 14px;color:var(--wf-red);font-size:12px;text-transform:uppercase}
.wf-use-card p{font-size:12px;margin:0;color:var(--wf-muted)}

/* Why Choose Us / Community */
.wf-why-layout,.wf-community-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.7fr);gap:44px;margin-top:24px}
.wf-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.wf-why-card{min-height:130px;border:2px solid var(--wf-line);border-radius:15px;padding:16px;display:grid;grid-template-columns:50px 1fr;gap:16px;box-shadow:0 3px 5px rgba(0,0,0,.1);background:#fff}
.wf-why-card .wf-num{width:50px;height:50px}
.wf-why-card h3{margin:5px 0 12px;color:var(--wf-red);font-size:16px;text-transform:uppercase}
.wf-why-card p{margin:0;color:var(--wf-muted);font-size:13px;line-height:1.55}
.wf-community-cards{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:18px;margin-top:30px}
.wf-tagline-center{text-align:center;margin-top:30px;font-size:12px;font-weight:900;text-transform:uppercase;color:var(--wf-ink)}

/* Clients */
.wf-client-list{display:grid;gap:18px;margin-top:24px}
.wf-client-row{display:grid;grid-template-columns:230px minmax(0,1fr) 90px 200px;gap:28px;align-items:center;min-height:80px;padding:14px 0;border-bottom:1px solid var(--wf-line)}
.wf-client-logo{
  min-height:70px;background:var(--wf-soft);border:2px solid var(--wf-line);display:grid;place-items:center;
  text-align:center;font-weight:900;font-size:13px;text-transform:uppercase;padding:10px
}
.wf-client-row p{margin:0;color:var(--wf-muted);line-height:1.6;font-size:14px}
.wf-year{color:var(--wf-red);font-weight:900;font-size:13px;text-align:right}

/* Contact */
.wf-contact-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.25fr);gap:32px;margin-top:18px}
.wf-contact-info{background:var(--wf-soft);border-radius:32px;padding:40px 34px}
.wf-contact-info h2{font-size:26px;text-transform:uppercase;margin:0 0 18px;color:var(--wf-ink)}
.wf-contact-info>p{color:var(--wf-muted);line-height:1.7;margin:0 0 40px}
.wf-contact-detail{display:grid;grid-template-columns:84px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid #e1e3e5}
.wf-contact-detail b{color:var(--wf-red);font-size:12px;text-transform:uppercase}
.wf-contact-detail span{font-size:14px;color:var(--wf-ink)}
.wf-contact-form-card{border:2px solid var(--wf-line);border-radius:32px;padding:36px 38px;box-shadow:0 3px 5px rgba(0,0,0,.1)}
.wf-contact-form-card h2{font-size:24px;text-transform:uppercase;margin:0 0 26px;color:var(--wf-ink)}
.wf-location-strip{margin-top:18px;min-height:56px}

/* ── CSP-safe layout classes ───────────────────────────────────────────────
   The site sends `style-src 'self'` with no 'unsafe-inline' (see
   SecurityHeadersSubscriber), so the browser drops every `style="…"`
   attribute in a template. Anything that has to affect layout lives here as
   a real class — never as an inline style. */

/* .section-tight was used by every wireframe page but never defined, so those
   sections had no padding at all and their page titles rendered underneath the
   fixed header. The first section on a page has to clear that header. */
.section-tight{padding:56px 0 72px}
main>.section-tight:first-child{padding-top:calc(var(--header-h,84px) + 56px)}

/* Full-width statement bands (wireframe: red on Why Choose Us, dark on Clients) */
.wf-banner{
  margin-top:34px;min-height:64px;display:flex;align-items:center;justify-content:center;
  padding:16px 26px;color:#fff;font-weight:900;text-transform:uppercase;font-size:13px;
  letter-spacing:.04em;text-align:center;border-radius:4px
}
.wf-banner--red{background:var(--wf-red)}
.wf-banner--dark{background:var(--wf-ink)}

/* Services hub cards (wireframe page 3): dark header bar + copy + CTA */
.wf-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:28px}
.wf-hub-card{
  display:flex;flex-direction:column;border:2px solid var(--wf-line);border-radius:15px;
  overflow:hidden;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.12);transition:.18s ease
}
.wf-hub-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.wf-hub-head{display:flex;align-items:center;gap:16px;background:var(--wf-ink);padding:20px 24px}
.wf-hub-icon{width:24px;height:24px;margin-left:auto;color:var(--wf-red);flex:0 0 auto}
/* Brand red on the dark ink only reaches 2.86:1 — too low to read. Labels
   sitting on a dark ground are white; red stays for text on light grounds. */
.wf-hub-code{color:#fff;font-weight:900;font-size:13px;letter-spacing:.06em}
.wf-hub-head h2,.wf-hub-head h3{margin:0;color:#fff;font-size:19px;text-transform:uppercase;letter-spacing:-.2px}
.wf-hub-body{display:flex;flex-direction:column;flex:1;padding:24px}
.wf-hub-body>p{margin:0 0 20px;color:var(--wf-muted);line-height:1.7;font-size:14px}
.wf-hub-list{margin:0 0 24px;padding-left:1.1rem;color:var(--wf-muted);font-size:13px;line-height:1.85}
.wf-hub-body .btn{margin-top:auto;align-self:flex-start}
.wf-hub-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:32px}
.wf-hub-note b{color:var(--wf-ink);font-weight:800;font-size:14px}

/* Directional block — leads to a page instead of restating it, and carries a
   link row that passes homepage authority to the capability pages. */
.wf-direct{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:44px;align-items:center;margin-top:24px}
.wf-direct-copy h2{margin:0;font-size:30px;line-height:1.25;color:var(--wf-ink);letter-spacing:-.4px;text-wrap:balance}
.wf-direct-copy p{margin:18px 0 0;color:var(--wf-muted);line-height:1.7;max-width:60ch}
.wf-direct-copy .btn{margin-top:28px}
.wf-direct-photo{min-height:300px}
.wf-direct-links{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:34px}
.wf-direct-links a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:2px solid var(--wf-line);
  border-radius:99px;background:#fff;color:var(--wf-ink);font-size:13px;font-weight:700;transition:.18s ease
}
.wf-direct-links a:hover{border-color:var(--wf-red);color:var(--wf-red);transform:translateY(-2px)}
.wf-direct-links .wf-direct-all{background:var(--wf-ink);border-color:var(--wf-ink);color:#fff}
.wf-direct-links .wf-direct-all:hover{background:var(--wf-red);border-color:var(--wf-red);color:#fff}

/* Services dropdown lists the three service pages only. */
body.yende-ui-v2 .services-menu--three{grid-template-columns:repeat(3,minmax(0,1fr));width:min(94vw,760px)}
@media (max-width:980px){body.yende-ui-v2 .services-menu--three{grid-template-columns:1fr}}

/* Active navigation state — marks the page the visitor is on. */
body.yende-ui-v2 .primary-nav .nav-link.is-active,
body.yende-ui-v2 .primary-nav .nav-dropdown-toggle.is-active{
  color:var(--wf-red);position:relative
}
body.yende-ui-v2 .primary-nav .nav-link.is-active::after,
body.yende-ui-v2 .primary-nav .nav-dropdown-toggle.is-active::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.35rem;height:3px;border-radius:2px;background:var(--wf-red)
}
body.yende-ui-v2 .primary-nav .nav-cta.is-active{box-shadow:0 0 0 3px rgba(215,25,32,.32)}
@media (max-width:980px){
  body.yende-ui-v2 .primary-nav .nav-link.is-active::after,
  body.yende-ui-v2 .primary-nav .nav-dropdown-toggle.is-active::after{left:.9rem;right:auto;width:22px}
}

/* Centred section intro (Welcome / Our Services / Why Choose Us / Contact Us) */
.wf-welcome{text-align:center;max-width:760px;margin:0 auto 34px}
.wf-welcome h2{
  margin:0;font-size:32px;line-height:1.15;text-transform:uppercase;letter-spacing:-.4px;color:var(--wf-ink);
  padding-bottom:16px;position:relative
}
.wf-welcome h2::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:3px;background:var(--wf-red);transform:translateX(-50%)}
.wf-welcome p{margin:18px 0 0;color:var(--wf-muted);line-height:1.7;font-size:16px}
.wf-welcome .wf-welcome-strong{margin-top:8px;color:var(--wf-ink);font-weight:800}

/* Why Choose Us pillars — four columns divided by hairlines */
.wf-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:8px}
.wf-pillar{padding:8px 26px;text-align:center;border-left:1px solid var(--wf-line)}
.wf-pillar:first-child{border-left:0}
.wf-icon{width:100%;height:100%;display:block}
.wf-pillar-icon{
  width:56px;height:56px;margin:0 auto 18px;padding:14px;border-radius:50%;
  background:var(--wf-soft);color:var(--wf-red);display:block;box-sizing:border-box
}
.wf-service-icon{width:30px;height:30px;display:block;margin-bottom:12px;color:var(--wf-red)}
.wf-pillar h3{margin:0 0 12px;font-size:15px;text-transform:uppercase;color:var(--wf-ink);letter-spacing:.02em}
.wf-pillar p{margin:0;color:var(--wf-muted);font-size:13px;line-height:1.65}

.wf-direct-links--center{justify-content:center}
.wf-contact-grid--home{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}

/* Conversion band — leads to the enquiry form on /contact */
.wf-cta-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
  background:var(--wf-ink);border-radius:20px;padding:38px 40px
}
.wf-cta-band .kicker{margin:0 0 8px}
.wf-cta-band h2{margin:0;color:#fff;font-size:29px;line-height:1.2;letter-spacing:-.4px;text-wrap:balance}
.wf-cta-band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.wf-cta-phone{color:#fff;font-weight:800;font-size:15px;white-space:nowrap}
.wf-cta-phone:hover{color:var(--wf-red)}

/* Clients: the wireframe carries a project-image column beside each row */
.wf-client-shot{min-height:88px;border-radius:4px}

/* Photo frame sizes */
.wf-photo-box--md{min-height:280px}
.wf-photo-box--lg{min-height:340px}
.wf-photo-box--xl{min-height:550px}

/* Home service cards: photo above copy, not the 2-column number-card grid */
.wf-service-card{grid-template-columns:minmax(0,1fr);gap:0;padding:0;align-items:stretch;min-height:0}
.wf-service-card .wf-photo-box{min-height:210px;border:0;border-bottom:2px solid var(--wf-line);box-shadow:none}
.wf-service-card-body{padding:22px 20px 24px}
.wf-service-card-body .btn{margin-top:16px}

/* Title / kicker size + rhythm modifiers */
.page-title--md{font-size:30px}
.page-title--sm{font-size:26px}
.kicker--under-title{margin-top:8px}

/* Spacing modifiers */
.wf-service-list--flush{margin-top:0}
.wf-dark-module--stacked{margin-top:20px}
.wf-cta-spaced{margin-top:20px}

/* Centred closing / positioning band */
.wf-positioning--center{text-align:center}
.wf-positioning--center h2{margin-inline:auto;max-width:22ch}
.wf-positioning--center .wf-positioning-note{margin:16px 0 0;font-weight:700;color:var(--wf-ink)}
.wf-positioning--center .btn{margin-top:24px}

/* Community intro copy */
.wf-community-heading{text-transform:uppercase;margin:0 0 20px}
.wf-community-heading .red{color:var(--wf-red)}
.wf-community-copy{color:var(--wf-muted);line-height:1.7}

@media (max-width:1100px){
  .wf-flow-grid{grid-template-columns:repeat(2,1fr)}
  .wf-hub-grid{grid-template-columns:1fr}
  .wf-client-row{grid-template-columns:200px minmax(0,1fr) 80px 160px;gap:20px}
}
@media (max-width:950px){
  .wf-intro-row,.wf-service-layout,.wf-why-layout,.wf-community-layout,.wf-contact-grid,.wf-direct{grid-template-columns:1fr}
  .wf-hero{min-height:clamp(500px,72vh,620px)}
  .wf-hero-inner{padding:calc(var(--header-h,74px) + 48px) 0 48px}
  .wf-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 0}
  .wf-pillar:nth-child(odd){border-left:0}
  .wf-hero-card{width:min(760px,88%)}
  .wf-photo-box--xl{min-height:380px}
}
@media (max-width:680px){
  .page-title{font-size:32px}
  .page-title--md{font-size:26px}
  .page-title--sm{font-size:23px}
  .wf-hero{min-height:auto}
  .wf-hero-inner{padding:calc(var(--header-h,74px) + 36px) 0 44px}
  .wf-hero-card{width:100%;padding:28px 24px}
  .wf-hero-title{font-size:31px}
  .wf-hero-dots{bottom:14px}
  .wf-hero-dot{width:26px}
  .wf-flow-grid,.wf-card-grid-3,.wf-service-list,.wf-why-grid,.wf-use-grid,.wf-pillars{grid-template-columns:1fr}
  .wf-pillar{border-left:0;border-top:1px solid var(--wf-line);padding:26px 0}
  .wf-pillar:first-child{border-top:0;padding-top:0}
  .wf-client-row{grid-template-columns:1fr;gap:10px}
  .wf-year{text-align:left}
  .wf-hub-head{gap:14px;padding:16px 18px}
  .wf-hub-head h2,.wf-hub-head h3{font-size:17px}
  .wf-banner{font-size:12px;line-height:1.6}
  .wf-photo-box,.wf-photo-box--md,.wf-photo-box--lg,.wf-photo-box--xl,.wf-direct-photo{min-height:240px}
  .wf-direct-copy h2{font-size:24px}
  .wf-direct-links a{font-size:12px;padding:0 14px}
  .wf-cta-band{padding:26px 22px;gap:20px}
  .wf-cta-band h2{font-size:23px}
  .wf-welcome h2{font-size:25px}
  .wf-hero-arrow{width:38px;height:38px;font-size:24px}
  .wf-hero-arrow--prev{left:8px}
  .wf-hero-arrow--next{right:8px}
  .wf-positioning--center h2{max-width:none}
}

/* Active nav state — marks the section the visitor is on. */
body.yende-ui-v2 .nav-link.is-active,
body.yende-ui-v2 .nav-dropdown-toggle.is-active{color:var(--wf-red,#d71920);background:transparent}
body.yende-ui-v2 .nav-link.is-active::after{content:"";display:block;width:22px;height:2px;margin:6px auto 0;background:var(--wf-red,#d71920);border-radius:2px}
body.yende-ui-v2 .nav-cta.is-active{outline:2px solid var(--wf-red,#d71920);outline-offset:2px}