/* ==========================================
   LEXICON WEB SOLUTIONS — THEME CSS v1.4
   Theme URI: https://lexiconwebsolutions.com
   Author: JP Pacete
   Directions: A (Brutal Editorial) · B (Refined Editorial) · C (Swiss Minimal)
   ========================================== */

/* ── SCROLL REVEAL ── */
.lws-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.lws-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children */
.lws-reveal-group .lws-reveal:nth-child(1) { transition-delay: 0.00s; }
.lws-reveal-group .lws-reveal:nth-child(2) { transition-delay: 0.09s; }
.lws-reveal-group .lws-reveal:nth-child(3) { transition-delay: 0.18s; }
.lws-reveal-group .lws-reveal:nth-child(4) { transition-delay: 0.27s; }
.lws-reveal-group .lws-reveal:nth-child(5) { transition-delay: 0.36s; }
.lws-reveal-group .lws-reveal:nth-child(6) { transition-delay: 0.45s; }
.lws-reveal-group .lws-reveal:nth-child(7) { transition-delay: 0.54s; }
.lws-reveal-group .lws-reveal:nth-child(8) { transition-delay: 0.63s; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lws-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── HEADING WIPE / FLYBY REVEAL ── */
.lws-reveal-wipe {
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/* The white bar */
.lws-reveal-wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
  transform: translateX(-101%);
  pointer-events: none;
}
/* When triggered: bar sweeps in then out */
.lws-reveal-wipe.is-visible::after {
  animation: lws-wipe-bar 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
/* Text appears as bar begins to exit (at ~50% of 0.85s = 0.43s) */
.lws-reveal-wipe.is-visible {
  animation: lws-wipe-text 0.01s 0.43s forwards;
}
@keyframes lws-wipe-bar {
  0%   { transform: translateX(-101%); }
  48%  { transform: translateX(0%);    }
  52%  { transform: translateX(0%);    }
  100% { transform: translateX(101%);  }
}
@keyframes lws-wipe-text {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lws-reveal-wipe { opacity: 1; }
  .lws-reveal-wipe::after { display: none; }
  .lws-reveal-wipe.is-visible { animation: none; }
}

/* ── CONTACT MODAL ── */
.lws-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lws-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

.lws-modal {
  background: #1C212A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  max-width: 660px;
  padding: 48px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.lws-modal-backdrop.is-active .lws-modal {
  transform: translateY(0);
}

.lws-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s;
  font-family: var(--font-c-body);
  background: none;
  border: none;
  cursor: pointer;
}

.lws-modal__close:hover,
.lws-modal__close:focus-visible {
  color: #fff;
  outline: none;
}

.lws-modal__title {
  font-family: var(--font-c-body);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 32px;
}

.lws-modal__placeholder {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.lws-modal__fallback-btn {
  display: inline-block;
  margin-top: 24px;
}

/* ── WORK PROJECT MODAL ── */
.lws-modal--work {
  max-width: 900px;
  max-height: 90vh;
  padding: 0;
  overflow-y: auto;
}

.lws-modal--work .lws-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 10;
  background: rgba(21,25,31,.55);
  border-radius: 2px;
}

.lws-work-modal__img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ink-2);
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  position: relative;
}

.lws-work-modal__img-placeholder {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.lws-work-modal__placeholder-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.35);
}

.lws-work-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.lws-work-modal__body {
  padding: 32px 40px 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.lws-work-modal__meta-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.lws-work-modal__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
  flex-shrink: 0;
}

.lws-work-modal__tags {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}

.lws-work-modal__title {
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 14px;
  font-family: var(--font-c-body);
}

.lws-work-modal__desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
  max-width: 680px;
}

.lws-work-modal__details {
  display: flex;
  gap: 40px;
  margin-top: 24px;
}

.lws-work-modal__detail-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
}

.lws-work-modal__detail-val {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.lws-work-modal__link {
  display: inline-block;
  margin-top: 22px;
}

.lws-work-modal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
}

.lws-work-modal__prev,
.lws-work-modal__next {
  font-family: var(--font-c-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  transition: color .2s;
}

.lws-work-modal__prev:hover,
.lws-work-modal__next:hover { color: #fff; }

.lws-work-modal__prev:disabled,
.lws-work-modal__next:disabled { opacity: .28; cursor: default; }

.lws-work-modal__counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,.38);
}

@media (max-width: 768px) {
  .lws-work-modal__body { padding: 24px 24px 20px; }
  .lws-work-modal__nav  { padding: 12px 24px; }
  .lws-work-modal__title { font-size: 22px; }
  .lws-work-modal__details { gap: 24px; }
}

/* ── Modal scroll fix for small screens / short viewports ── */
@media (max-width: 600px), (max-height: 700px) {
  .lws-modal-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: 16px;
  }
  .lws-modal {
    max-height: none;
  }
  .lws-modal--work {
    overflow-y: auto;
  }
}

/* HubSpot form — light card background (free plan renders light inputs) */
#lws-hs-form {
  background: #F2F1EC;
}
#lws-hs-form .hs-form fieldset { max-width: 100% !important; }
#lws-hs-form .hs-form label { color: #15191F !important; font-size: 13px !important; font-weight: 500 !important; }
#lws-hs-form .hs-form input[type="text"],
#lws-hs-form .hs-form input[type="email"],
#lws-hs-form .hs-form input[type="tel"],
#lws-hs-form .hs-form textarea,
#lws-hs-form .hs-form select {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  color: #15191F !important;
  border-radius: 0 !important;
  font-family: var(--font-c-body) !important;
  font-size: 14px !important;
  width: 100% !important;
}
#lws-hs-form .hs-form input[type="submit"],
#lws-hs-form .hs-form .hs-button {
  background: #F4310C !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-c-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  width: auto !important;
}
#lws-hs-form .hs-form input[type="submit"]:hover,
#lws-hs-form .hs-form .hs-button:hover { background: #15191F !important; }
#lws-hs-form .hs-error-msg,
#lws-hs-form .hs-form-required { color: #F4310C !important; font-size: 12px !important; }
#lws-hs-form .submitted-message { color: #15191F !important; font-weight: 500 !important; }

/* ── DESIGN TOKENS ── */
:root {
  --ink:            #15191F;
  --ink-2:          #1C212A;
  --red:            #F4310C;
  --paper:          #F2F1EC;
  --paper-2:        #E4E2DB;
  --white:          #FFFFFF;

  /* text on dark */
  --t-strong:       #FFFFFF;
  --t-muted:        rgba(255,255,255,.62);
  --t-faint:        rgba(255,255,255,.45);
  --line:           rgba(255,255,255,.12);

  /* text on light */
  --t-dark:         #15191F;
  --t-dark-muted:   rgba(0,0,0,.60);
  --line-dark:      rgba(0,0,0,.12);

  /* fonts */
  --font-a-display: 'Anton', sans-serif;
  --font-a-body:    'Hanken Grotesk', sans-serif;
  --font-b-body:    'Archivo', sans-serif;
  --font-c-body:    'Space Grotesk', sans-serif;
  --font-mono:      'Space Mono', monospace;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--t-strong);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; }


/* ── LOGO IMAGE (shared) ── */
.lws-logo-img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.lws-logo-img--footer {
  height: 32px;
}

/* ── MOBILE NAV TOGGLE (shared) ── */
.lws-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.lws-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .25s, opacity .25s;
}
.lws-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lws-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lws-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================
   DIRECTION A — BRUTAL EDITORIAL
   Fonts: Anton + Hanken Grotesk + Space Mono
   ========================================= */
.dir-a { font-family: var(--font-a-body); }

/* A: Nav */
.dir-a .lws-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 64px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
}
.dir-a .lws-nav__brand { display: flex; align-items: center; gap: 14px; }
.dir-a .lws-logo-box {
  width: 38px; height: 38px;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-a-display); font-size: 15px; letter-spacing: .04em;
  flex-shrink: 0;
}
.dir-a .lws-brand-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--t-muted); }
.dir-a .lws-nav__menu { display: flex; align-items: center; gap: 40px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; }
.dir-a .lws-nav__menu a, .dir-a .lws-nav__menu li a { color: var(--t-strong); transition: color .2s; text-transform: uppercase; }
.dir-a .lws-nav__menu a:hover, .dir-a .lws-nav__menu li a:hover { color: var(--red); }

/* A: Buttons */
.dir-a .btn-red { background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; padding: 18px 30px; cursor: pointer; transition: background .2s, color .2s; display: inline-block; text-transform: uppercase; }
.dir-a .btn-red:hover { background: #fff; color: var(--ink); }
.dir-a .btn-line { border: 1px solid rgba(255,255,255,.3); color: #fff; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; padding: 18px 30px; cursor: pointer; transition: background .2s, border-color .2s; display: inline-block; text-transform: uppercase; }
.dir-a .btn-line:hover { background: var(--red); border-color: var(--red); }

/* A: Hero */
.dir-a .lws-hero { position: relative; padding: 96px 64px 88px; border-bottom: 1px solid var(--line); overflow: hidden; }
.dir-a .lws-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 120px 100%; pointer-events: none; }
.dir-a .lws-hero__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); margin-bottom: 40px; position: relative; }
.dir-a .lws-hero__eyebrow::before { content: ''; width: 48px; height: 1px; background: var(--red); display: inline-block; flex-shrink: 0; }
.dir-a .lws-hero__h1 { font-family: var(--font-a-display); font-weight: 400; font-size: 158px; line-height: .86; letter-spacing: -.01em; text-transform: uppercase; max-width: 1180px; position: relative; }
.dir-a .lws-hero__h1 .red-dot { color: var(--red); }
.dir-a .lws-hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 54px; gap: 48px; position: relative; }
.dir-a .lws-hero__sub { max-width: 440px; font-size: 18px; line-height: 1.55; color: var(--t-muted); }
.dir-a .lws-hero__btns { display: flex; gap: 14px; flex-shrink: 0; }

/* A: About */
.dir-a .lws-about { display: grid; grid-template-columns: 380px 1fr; gap: 64px; padding: 100px 64px; border-bottom: 1px solid var(--line); }
.dir-a .lws-about__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); }
.dir-a .lws-about__label-bar { width: 40px; height: 3px; background: var(--red); margin-top: 24px; }
.dir-a .lws-about__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 54px; line-height: 1.02; text-transform: uppercase; letter-spacing: .005em; max-width: 760px; }
.dir-a .lws-about__body { font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.7); margin-top: 32px; max-width: 720px; }
.dir-a .lws-about__body strong { color: #fff; }
.dir-a .lws-about__stats { display: flex; gap: 64px; margin-top: 48px; flex-wrap: wrap; }
.dir-a .lws-stat__num { font-family: var(--font-a-display); font-size: 44px; color: var(--red); }
.dir-a .lws-stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--t-faint); margin-top: 6px; text-transform: uppercase; }

/* A: Firm */
.dir-a .lws-firm { background: var(--paper); color: var(--t-dark); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 100px 64px; align-items: center; }
.dir-a .lws-firm__img { aspect-ratio: 4/5; background-color: var(--paper-2); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 14px, transparent 14px 28px); border: 1px solid var(--line-dark); display: flex; align-items: flex-end; padding: 24px; overflow: hidden; }
.dir-a .lws-firm__img img { width: 100%; height: 100%; object-fit: cover; }
.dir-a .lws-firm__img-placeholder { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--t-dark-muted); }
.dir-a .lws-firm__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); }
.dir-a .lws-firm__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 60px; line-height: .98; text-transform: uppercase; margin-top: 22px; }
.dir-a .lws-firm__body { font-size: 19px; line-height: 1.65; color: var(--t-dark-muted); margin-top: 28px; max-width: 520px; }
.dir-a .lws-firm__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.dir-a .lws-tech-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; border: 1px solid rgba(0,0,0,.2); padding: 9px 16px; text-transform: uppercase; }

/* A: Stats/Trust */
.dir-a .lws-stats-trust { display: grid; grid-template-columns: 380px 1fr; }
.dir-a .lws-stats-trust__stat { background: var(--red); padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; }
.dir-a .lws-stats-trust__big-num { font-family: var(--font-a-display); font-size: 140px; line-height: .82; color: #fff; }
.dir-a .lws-stats-trust__big-num sup { font-size: 90px; }
.dir-a .lws-stats-trust__stat-label { font-family: var(--font-a-display); font-size: 22px; text-transform: uppercase; color: #fff; margin-top: 18px; line-height: 1.1; }
.dir-a .lws-stats-trust__content { background: var(--ink-2); padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.dir-a .lws-stats-trust__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 52px; line-height: 1.0; text-transform: uppercase; max-width: 640px; }
.dir-a .lws-stats-trust__divider { width: 60px; height: 3px; background: var(--red); margin: 28px 0 36px; }
.dir-a .lws-trust-points { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; max-width: 880px; }
.dir-a .lws-trust-point { display: flex; gap: 14px; }
.dir-a .lws-trust-point__arrow { color: var(--red); font-weight: 700; flex-shrink: 0; }
.dir-a .lws-trust-point__text { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78); }

/* A: Services */
.dir-a .lws-services { padding: 100px 64px 60px; }
.dir-a .lws-services__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.dir-a .lws-services__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); }
.dir-a .lws-services__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 60px; line-height: .98; text-transform: uppercase; margin-top: 20px; max-width: 760px; }
.dir-a .lws-services__intro { max-width: 340px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.6); }
.dir-a .lws-services__list { border-top: 1px solid var(--line); }
.dir-a .svc-row { display: grid; grid-template-columns: 80px 1fr 280px 40px; align-items: center; gap: 24px; padding: 30px 64px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .18s, color .18s; }
.dir-a .svc-row:hover { background: var(--red); }
.dir-a .svc-num { font-family: var(--font-mono); font-size: 14px; color: rgba(255,255,255,.4); transition: color .18s; }
.dir-a .svc-row:hover .svc-num { color: rgba(255,255,255,.7); }
.dir-a .svc-name { font-family: var(--font-a-display); font-size: 34px; text-transform: uppercase; }
.dir-a .svc-tech { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .06em; transition: color .18s; }
.dir-a .svc-row:hover .svc-tech { color: rgba(255,255,255,.8); }
.dir-a .svc-arrow { font-size: 22px; opacity: 0; transform: translateX(-8px); transition: opacity .18s, transform .18s; }
.dir-a .svc-row:hover .svc-arrow { opacity: 1; transform: translateX(0); }

/* A: Process */
.dir-a .lws-process { padding: 100px 64px; border-bottom: 1px solid var(--line); }
.dir-a .lws-process__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); }
.dir-a .lws-process__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 60px; line-height: .98; text-transform: uppercase; margin-top: 20px; }
.dir-a .lws-process__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); }
.dir-a .lws-process__step { background: var(--ink); padding: 40px 32px; }
.dir-a .lws-process__num { font-family: var(--font-a-display); font-size: 40px; color: var(--red); }
.dir-a .lws-process__title { font-family: var(--font-a-display); font-size: 24px; text-transform: uppercase; margin-top: 18px; }
.dir-a .lws-process__desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.6); margin-top: 12px; }

/* A: Work */
.dir-a .lws-work { background: var(--paper); color: var(--t-dark); padding: 100px 64px; }
.dir-a .lws-work__header { display: flex; justify-content: space-between; align-items: flex-end; }
.dir-a .lws-work__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); }
.dir-a .lws-work__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 60px; line-height: .98; text-transform: uppercase; margin-top: 20px; }
.dir-a .lws-work__view-all { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--t-dark); cursor: pointer; transition: color .2s; text-transform: uppercase; }
.dir-a .lws-work__view-all:hover { color: var(--red); }
.dir-a .lws-work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.dir-a .work-card { cursor: pointer; }
.dir-a .work-card__img-wrap { overflow: hidden; aspect-ratio: 16/10; background: var(--paper-2); }
.dir-a .work-img { width: 100%; height: 100%; background-color: var(--paper-2); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 14px, transparent 14px 28px); display: flex; align-items: flex-end; padding: 22px; transition: transform .4s; }
.dir-a .work-card:hover .work-img { transform: scale(1.04); }
.dir-a .work-img__label { font-family: var(--font-mono); font-size: 12px; color: rgba(0,0,0,.45); }
.dir-a .work-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.dir-a .work-card__title { font-family: var(--font-a-display); font-size: 26px; text-transform: uppercase; }
.dir-a .work-card__tags { font-family: var(--font-mono); font-size: 12px; color: rgba(0,0,0,.5); margin-top: 4px; text-transform: uppercase; }
.dir-a .work-go { font-size: 22px; transition: color .2s; }
.dir-a .work-card:hover .work-go { color: var(--red); }

/* A: Testimonial */
.dir-a .lws-testimonial { padding: 110px 64px; border-bottom: 1px solid var(--line); }
.dir-a .lws-testimonial__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--red); margin-bottom: 36px; }
.dir-a .lws-testimonial__quote { font-family: var(--font-a-display); font-weight: 400; font-size: 54px; line-height: 1.08; text-transform: uppercase; max-width: 1100px; }
.dir-a .lws-testimonial__quote .red-word { color: var(--red); }
.dir-a .lws-testimonial__attr { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-top: 36px; text-transform: uppercase; }

/* A: CTA */
.dir-a .lws-cta { background: var(--red); padding: 96px 64px; display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.dir-a .lws-cta__h2 { font-family: var(--font-a-display); font-weight: 400; font-size: 84px; line-height: .9; text-transform: uppercase; color: #fff; }
.dir-a .lws-cta__sub { font-family: var(--font-a-body); font-weight: 600; font-size: 18px; color: rgba(255,255,255,.9); margin-top: 20px; }
.dir-a .lws-cta .btn-cta { background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em; padding: 24px 44px; cursor: pointer; transition: background .2s; white-space: nowrap; text-transform: uppercase; display: inline-block; }
.dir-a .lws-cta .btn-cta:hover { background: #000; }

/* A: Footer */
.dir-a .lws-footer { padding: 64px 64px 40px; }
.dir-a .lws-footer__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.dir-a .lws-footer__brand { display: flex; align-items: center; gap: 14px; }
.dir-a .lws-footer__brand-name { font-family: var(--font-a-display); font-size: 22px; text-transform: uppercase; }
.dir-a .lws-footer__menu { display: flex; gap: 48px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; }
.dir-a .lws-footer__menu a, .dir-a .lws-footer__menu li a { color: #fff; transition: color .2s; text-transform: uppercase; }
.dir-a .lws-footer__menu a:hover, .dir-a .lws-footer__menu li a:hover { color: var(--red); }
.dir-a .lws-footer__email { font-family: var(--font-mono); font-size: 13px; color: var(--red); }
.dir-a .lws-footer__bottom { display: flex; justify-content: space-between; margin-top: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--t-faint); text-transform: uppercase; }

/* =========================================
   DIRECTION B — REFINED EDITORIAL
   Fonts: Archivo + Space Mono
   ========================================= */
.dir-b { font-family: var(--font-b-body); }

/* B: Nav */
.dir-b .lws-nav { display: flex; align-items: center; justify-content: space-between; padding: 34px 80px; position: sticky; top: 0; z-index: 100; background: var(--ink); }
.dir-b .lws-nav__brand { display: flex; align-items: center; gap: 14px; }
.dir-b .lws-logo-circle { width: 34px; height: 34px; border: 1.5px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: .02em; flex-shrink: 0; }
.dir-b .lws-brand-name { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.dir-b .lws-nav__menu { display: flex; align-items: center; gap: 44px; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.dir-b .lws-nav__menu a, .dir-b .lws-nav__menu li a { color: var(--t-strong); transition: color .2s; }
.dir-b .lws-nav__menu a:hover, .dir-b .lws-nav__menu li a:hover { color: var(--red); }
.dir-b .lws-nav__contact { background: var(--red); color: #fff !important; padding: 12px 24px; border-radius: 40px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, color .2s !important; display: inline-block; }
.dir-b .lws-nav__contact:hover { background: #fff; color: var(--ink) !important; }
/* make the last nav item in B look like pill button */
.dir-b .lws-nav__menu li:last-child a { background: var(--red); color: #fff; padding: 12px 24px; border-radius: 40px; transition: background .2s, color .2s; }
.dir-b .lws-nav__menu li:last-child a:hover { background: #fff; color: var(--ink); }

/* B: Buttons */
.dir-b .btn-red { background: var(--red); color: #fff; font-weight: 700; font-size: 15px; padding: 18px 36px; border-radius: 40px; cursor: pointer; transition: background .2s, color .2s; display: inline-block; }
.dir-b .btn-red:hover { background: #fff; color: var(--ink); }
.dir-b .btn-line { border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 700; font-size: 15px; padding: 18px 36px; border-radius: 40px; cursor: pointer; transition: background .2s, border-color .2s; display: inline-block; }
.dir-b .btn-line:hover { background: var(--red); border-color: var(--red); }

/* B: Hero */
.dir-b .lws-hero { padding: 120px 80px 130px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.dir-b .lws-hero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin-bottom: 40px; }
.dir-b .lws-hero__h1 { font-weight: 800; font-size: 118px; line-height: .96; letter-spacing: -.02em; max-width: 1080px; }
.dir-b .lws-hero__h1 .red-dot { color: var(--red); }
.dir-b .lws-hero__sub { font-size: 21px; line-height: 1.6; color: rgba(255,255,255,.6); margin-top: 38px; max-width: 600px; }
.dir-b .lws-hero__btns { display: flex; gap: 16px; margin-top: 46px; }

/* B: About */
.dir-b .lws-about { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding: 0 80px 120px; align-items: center; }
.dir-b .lws-about__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dir-b .lws-about__h2 { font-weight: 800; font-size: 52px; line-height: 1.04; letter-spacing: -.02em; margin-top: 22px; }
.dir-b .lws-about__body { font-size: 19px; line-height: 1.7; color: rgba(255,255,255,.72); }
.dir-b .lws-about__body strong { color: #fff; }
.dir-b .lws-about__stats { display: flex; gap: 48px; margin-top: 36px; }
.dir-b .lws-stat__num { font-weight: 800; font-size: 46px; color: var(--red); letter-spacing: -.02em; }
.dir-b .lws-stat__label { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }

/* B: Firm */
.dir-b .lws-firm { background: var(--paper); color: var(--t-dark); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 110px 80px; align-items: center; }
.dir-b .lws-firm__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dir-b .lws-firm__h2 { font-weight: 800; font-size: 56px; line-height: 1.02; letter-spacing: -.02em; margin-top: 22px; }
.dir-b .lws-firm__body { font-size: 19px; line-height: 1.7; color: rgba(0,0,0,.6); margin-top: 26px; max-width: 500px; }
.dir-b .lws-firm__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.dir-b .lws-tech-tag { font-size: 13px; font-weight: 600; background: #fff; border: 1px solid rgba(0,0,0,.12); padding: 9px 18px; border-radius: 40px; }
.dir-b .lws-firm__img { aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background-color: var(--paper-2); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 14px, transparent 14px 28px); border: 1px solid rgba(0,0,0,.1); display: flex; align-items: flex-end; padding: 24px; }
.dir-b .lws-firm__img img { width: 100%; height: 100%; object-fit: cover; }
.dir-b .lws-firm__img-placeholder { font-family: var(--font-mono); font-size: 12px; color: rgba(0,0,0,.45); }

/* B: Stats/Trust */
.dir-b .lws-stats-trust { display: grid; grid-template-columns: 420px 1fr; }
.dir-b .lws-stats-trust__stat { background: var(--red); padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.dir-b .lws-stats-trust__big-num { font-weight: 800; font-size: 148px; line-height: .82; letter-spacing: -.03em; color: #fff; }
.dir-b .lws-stats-trust__stat-label { font-weight: 700; font-size: 18px; color: #fff; margin-top: 16px; line-height: 1.3; }
.dir-b .lws-stats-trust__content { padding: 90px 80px; display: flex; flex-direction: column; justify-content: center; }
.dir-b .lws-stats-trust__h2 { font-weight: 800; font-size: 46px; line-height: 1.06; letter-spacing: -.02em; max-width: 560px; }
.dir-b .lws-trust-points { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; margin-top: 40px; max-width: 880px; }
.dir-b .lws-trust-point { display: flex; gap: 14px; }
.dir-b .lws-trust-point__arrow { color: var(--red); font-size: 18px; flex-shrink: 0; }
.dir-b .lws-trust-point__text { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.72); }

/* B: Services */
.dir-b .lws-services { padding: 120px 80px; }
.dir-b .lws-services__header { text-align: center; margin-bottom: 64px; }
.dir-b .lws-services__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dir-b .lws-services__h2 { font-weight: 800; font-size: 60px; line-height: 1.0; letter-spacing: -.02em; margin-top: 20px; }
.dir-b .lws-services__intro { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 22px auto 0; max-width: 600px; }
.dir-b .lws-services__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.dir-b .cap-card { background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 34px 28px; transition: border-color .2s; }
.dir-b .cap-card:hover { border-color: var(--red); }
.dir-b .cap-card__num { font-weight: 800; font-size: 22px; color: var(--red); }
.dir-b .cap-card__title { font-weight: 700; font-size: 20px; margin-top: 20px; }
.dir-b .cap-card__desc { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.55); margin-top: 10px; }

/* B: Process */
.dir-b .lws-process { background: var(--ink-2); padding: 110px 80px; }
.dir-b .lws-process__header { text-align: center; }
.dir-b .lws-process__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dir-b .lws-process__h2 { font-weight: 800; font-size: 52px; line-height: 1.02; letter-spacing: -.02em; margin-top: 20px; }
.dir-b .lws-process__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; margin-top: 56px; }
.dir-b .lws-process__num { font-weight: 800; font-size: 54px; color: rgba(244,49,12,.35); letter-spacing: -.02em; }
.dir-b .lws-process__title { font-weight: 700; font-size: 22px; margin-top: 14px; }
.dir-b .lws-process__desc { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.55); margin-top: 10px; }

/* B: Work */
.dir-b .lws-work { padding: 120px 80px; }
.dir-b .lws-work__header { text-align: center; margin-bottom: 56px; }
.dir-b .lws-work__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dir-b .lws-work__h2 { font-weight: 800; font-size: 60px; line-height: 1.0; letter-spacing: -.02em; margin-top: 20px; }
.dir-b .lws-work__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.dir-b .work-card { cursor: pointer; }
.dir-b .work-card__img-wrap { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--ink-2); }
.dir-b .work-img { width: 100%; height: 100%; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); display: flex; align-items: flex-end; padding: 20px; transition: transform .4s; }
.dir-b .work-card:hover .work-img { transform: scale(1.04); }
.dir-b .work-img__label { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); }
.dir-b .work-card__title { font-weight: 700; font-size: 20px; margin-top: 18px; }
.dir-b .work-card__tags { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }

/* B: Testimonial */
.dir-b .lws-testimonial { padding: 60px 80px 120px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.dir-b .lws-testimonial__mark { font-weight: 800; font-size: 60px; color: var(--red); line-height: 1; }
.dir-b .lws-testimonial__quote { font-weight: 700; font-size: 40px; line-height: 1.3; letter-spacing: -.015em; max-width: 980px; margin-top: 8px; }
.dir-b .lws-testimonial__quote .red-word { color: var(--red); }
.dir-b .lws-testimonial__attr { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.55); margin-top: 32px; }

/* B: CTA */
.dir-b .lws-cta { padding: 0 80px 110px; }
.dir-b .lws-cta__inner { background: var(--red); border-radius: 16px; padding: 80px 70px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.dir-b .lws-cta__h2 { font-weight: 800; font-size: 72px; line-height: .96; letter-spacing: -.02em; color: #fff; }
.dir-b .lws-cta__sub { font-size: 19px; color: rgba(255,255,255,.92); margin-top: 18px; font-weight: 500; }
.dir-b .lws-cta .btn-cta { background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; padding: 20px 44px; border-radius: 40px; cursor: pointer; transition: background .2s; margin-top: 38px; display: inline-block; }
.dir-b .lws-cta .btn-cta:hover { background: #000; }

/* B: Footer */
.dir-b .lws-footer { padding: 0 80px 48px; }
.dir-b .lws-footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 48px 0; border-top: 1px solid var(--line); }
.dir-b .lws-footer__brand { display: flex; align-items: center; gap: 12px; }
.dir-b .lws-footer__brand-name { font-weight: 700; font-size: 16px; }
.dir-b .lws-footer__menu { display: flex; gap: 36px; font-size: 14px; font-weight: 600; }
.dir-b .lws-footer__menu a, .dir-b .lws-footer__menu li a { color: #fff; transition: color .2s; }
.dir-b .lws-footer__menu a:hover, .dir-b .lws-footer__menu li a:hover { color: var(--red); }
.dir-b .lws-footer__email { font-size: 14px; color: var(--red); font-weight: 600; }
.dir-b .lws-footer__copy { font-size: 13px; color: rgba(255,255,255,.4); text-align: center; padding-bottom: 16px; }

/* =========================================
   DIRECTION C — SWISS TECHNICAL MINIMAL
   Fonts: Space Grotesk + Space Mono
   ========================================= */
.dir-c { font-family: var(--font-c-body); }

/* C: Nav */
.dir-c .lws-nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 72px; border-bottom: 1px solid rgba(255,255,255,.14); position: sticky; top: 0; z-index: 100; background: var(--ink); }
.lws-nav.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.35); }
.dir-c .lws-nav__brand { display: flex; align-items: center; gap: 10px; }
.dir-c .lws-brand-dot { width: 7px; height: 7px; background: var(--red); display: inline-block; border-radius: 50%; flex-shrink: 0; }
.dir-c .lws-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: #fff; }
.dir-c .lws-nav__menu { display: flex; align-items: center; gap: 40px; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.dir-c .lws-nav__menu a, .dir-c .lws-nav__menu li a { color: rgba(255,255,255,.85); transition: color .2s; }
.dir-c .lws-nav__menu a:hover, .dir-c .lws-nav__menu li a:hover { color: var(--red); }

/* C: Buttons */
.dir-c .btn-red { background: var(--red); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .04em; padding: 15px 26px; cursor: pointer; transition: background .2s, color .2s; display: inline-block; }
.dir-c .btn-red:hover { background: #fff; color: var(--ink); }
.dir-c .btn-line { border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .04em; padding: 15px 26px; cursor: pointer; transition: background .2s, border-color .2s; display: inline-block; }
.dir-c .btn-line:hover { background: var(--red); border-color: var(--red); }

/* C: Hero */
.dir-c .lws-hero { padding: 80px 72px 70px; border-bottom: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-hero__meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 64px; }
.dir-c .lws-hero__h1 { font-weight: 500; font-size: 108px; line-height: .98; letter-spacing: -.035em; max-width: 1140px; }
.dir-c .lws-hero__h1 .red-dot { color: var(--red); }

/* ── Easter egg tooltip ── */
.red-dot, .lws-brand-dot {
  position: relative;
  cursor: pointer;
}
.lws-hero__inner .red-dot::after {
    top: auto;
    bottom: 30px;
    left: 30px ;
    padding-right: 10px;
}
 
.red-dot::after, .lws-brand-dot::after {
  content: '?';
  position: absolute;
  left: 50%;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  white-space: nowrap;
  z-index: 999;
}
/* Hero period dot: collapse line-height so bottom:0 aligns with the glyph */
.red-dot {
  display: inline-block;
  line-height: 1;
}
.red-dot::after {
  top: 0;
  bottom: auto;
  transform: translateX(-50%) translateY(calc(-100% - 2px));
}
.red-dot:hover::after { opacity: 1; }
/* Nav/footer brand dot — show just below the dot (nav is sticky at top) */
.lws-brand-dot::after {
  top: calc(100% + -25px);
  bottom: auto;
  transform: translateX(-50%);
}
.lws-brand-dot:hover::after { opacity: 1; }

.dir-c .lws-hero__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-hero__sub { max-width: 520px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.6); }
.dir-c .lws-hero__btns { display: flex; gap: 14px; align-items: center; }

/* C: Index row layout (shared by sections) */
.dir-c .lws-section-row { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 72px 72px; border-bottom: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-section-index { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* C: About */
.dir-c .lws-about__h2 { font-weight: 500; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; max-width: 880px; }
.dir-c .lws-about__h2 .red-word { color: var(--red); }
.dir-c .lws-about__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-stat__num { font-weight: 500; font-size: 40px; letter-spacing: -.02em; padding-top: 24px; }
.dir-c .lws-stat__label { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 6px; }

/* C: Firm */
.dir-c .lws-firm__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dir-c .lws-firm__h2 { font-weight: 500; font-size: 38px; line-height: 1.1; letter-spacing: -.02em; }
.dir-c .lws-firm__body { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.6); margin-top: 22px; }
.dir-c .lws-firm__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.dir-c .lws-tech-tag { font-size: 12px; font-weight: 500; border: 1px solid rgba(255,255,255,.2); padding: 7px 14px; }
.dir-c .lws-firm__img { aspect-ratio: 1/1; background-color: var(--ink-2); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: flex-end; overflow: hidden; }
.dir-c .lws-firm__img img { width: 100%; height: 100%; object-fit: cover; }
.dir-c .lws-firm__img-placeholder { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); padding: 0; margin: 0; }

/* C: Stats/Trust */
.dir-c .lws-stats-trust__inner { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }
.dir-c .lws-stats-trust__stat { background: var(--red); padding: 44px 40px; }
.dir-c .lws-stats-trust__big-num { font-weight: 500; font-size: 108px; line-height: .85; letter-spacing: -.03em; color: #fff; }
.dir-c .lws-stats-trust__stat-label { font-size: 14px; font-weight: 500; color: #fff; margin-top: 14px; line-height: 1.4; }
.dir-c .lws-stats-trust__h2 { font-weight: 500; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; max-width: 480px; }
.dir-c .lws-trust-points { margin-top: 28px; }
.dir-c .lws-trust-point { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-trust-point:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-trust-point__index { color: var(--red); font-size: 13px; font-family: var(--font-mono); flex-shrink: 0; }
.dir-c .lws-trust-point__text { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); }

/* C: Services */
.dir-c .lws-services { padding-bottom: 50px; border-bottom: none; }
.dir-c .lws-services__h2 { font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; max-width: 680px; }
.dir-c .lws-services__intro { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.6); margin-top: 18px; max-width: 560px; }
.dir-c .lws-services-rows { padding: 0 72px 32px; }
.dir-c .lws-svc-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-svc-cell { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-svc-cell:nth-child(odd) { padding-right: 40px; }
.dir-c .lws-svc-cell:nth-child(even) { padding-left: 40px; border-left: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-svc-cell__num { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); flex-shrink: 0; padding-top: 4px; }
.dir-c .lws-svc-cell__body { display: flex; flex-direction: column; gap: 0; }
.dir-c .lws-svc-cell__icon { width: 22px; height: 22px; object-fit: contain; margin-bottom: 10px; opacity: .85; }
.dir-c .lws-svc-cell__name { font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.dir-c .lws-svc-cell__tech { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }

/* C: Process */
.dir-c .lws-process__h2 { font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 40px; }
.dir-c .lws-process__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.dir-c .lws-process__num { font-family: var(--font-mono); font-size: 13px; color: var(--red); }
.dir-c .lws-process__title { font-weight: 500; font-size: 20px; margin-top: 12px; }
.dir-c .lws-process__desc { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.55); margin-top: 8px; }

/* C: Work */
.dir-c .lws-work__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; }
.dir-c .lws-work__h2 { font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; }
.dir-c .lws-work__view-all { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); cursor: pointer; transition: color .2s; }
.dir-c .lws-work__view-all:hover { color: var(--red); }
.dir-c .lws-work__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.dir-c .work-card { cursor: pointer; }
.dir-c .work-card__img-wrap { overflow: hidden; aspect-ratio: 1/1; background: var(--ink-2); }
.dir-c .work-img { width: 100%; height: 100%; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); display: flex; align-items: flex-end; padding: 18px; transition: transform .4s; }
.dir-c .work-card:hover .work-img { transform: scale(1.04); }
.dir-c .work-img__label { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4); }
.dir-c .work-card__title { font-weight: 500; font-size: 17px; margin-top: 14px; }
.dir-c .work-card__tags { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* C: Testimonial */
.dir-c .lws-testimonial__quote { font-weight: 500; font-size: 36px; line-height: 1.25; letter-spacing: -.02em; max-width: 900px; }
.dir-c .lws-testimonial__quote .red-word { color: var(--red); }
.dir-c .lws-testimonial__attr { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 28px; }

/* C: CTA */
.dir-c .lws-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; padding: 90px 72px; background: var(--red); }
.dir-c .lws-cta__h2 { font-weight: 500; font-size: 64px; line-height: .98; letter-spacing: -.03em; color: #fff; }
.dir-c .lws-cta__sub { font-size: 17px; color: rgba(255,255,255,.9); margin-top: 16px; font-weight: 500; }
.dir-c .lws-cta__agency { font-size: 13px; color: rgba(255,255,255,.45); margin-top: 20px; letter-spacing: .04em; text-transform: uppercase; }
.dir-c .lws-cta .btn-cta { background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .03em; padding: 20px 40px; cursor: pointer; transition: background .2s; white-space: nowrap; display: inline-block; }
.dir-c .lws-cta .btn-cta:hover { background: #000; }

/* C: Footer */
.dir-c .lws-footer { padding: 48px 72px 44px; }
.dir-c .lws-footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.14); }
.dir-c .lws-footer__brand { display: flex; align-items: center; gap: 10px; }
.dir-c .lws-footer__menu { display: flex; gap: 36px; font-size: 13px; font-weight: 500; }
.dir-c .lws-footer__menu a, .dir-c .lws-footer__menu li a { color: #fff; transition: color .2s; }
.dir-c .lws-footer__menu a:hover, .dir-c .lws-footer__menu li a:hover { color: var(--red); }
.dir-c .lws-footer__email { font-size: 13px; color: var(--red); font-weight: 500; }
.dir-c .lws-footer__copy { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 24px; }

/* =========================================
   HERO VIDEO BACKGROUND (all directions)
   Progressive: only active when .has-video
   ========================================= */

/* Ensure the section clips the video and contains the absolute-positioned video element */
.lws-hero { overflow: hidden; position: relative; }

/* The video element — covers the full section */
.lws-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Dark overlay — opacity driven by --overlay-opacity CSS var (set inline from PHP) */
.lws-hero__video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 25, 31, var(--overlay-opacity, .65));
  z-index: 1;
  pointer-events: none;
}

/* Content wrapper sits above video + overlay */
.lws-hero__inner {
  position: relative;
  z-index: 3;
}

/* Dir A: the ::before grid lines must sit above the overlay */
.dir-a .lws-hero::before { z-index: 2; }

/* Dir A: when video active, boost text contrast slightly */
.dir-a .lws-hero.has-video .lws-hero__sub { color: rgba(255,255,255,.75); }

/* Dir B: when video active, hero background becomes transparent (video shows through) */
.dir-b .lws-hero.has-video { background: transparent; }

/* Dir C: meta row — when video present, slightly brighter for legibility */
.dir-c .lws-hero.has-video .lws-hero__meta { color: rgba(255,255,255,.7); }

/* Pause video for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lws-hero__video { display: none; }
  .lws-hero__video-overlay { display: none; }
}

/* =========================================
   RESPONSIVE — 1024px (Tablet landscape)
   ========================================= */
@media (max-width: 1024px) {
  /* A */
  .dir-a .lws-nav { padding: 20px 32px; }
  .dir-a .lws-hero { padding: 64px 32px 56px; }
  .dir-a .lws-hero__h1 { font-size: 100px; }
  .dir-a .lws-hero__bottom { flex-direction: column; align-items: flex-start; }
  .dir-a .lws-about { grid-template-columns: 1fr; gap: 32px; padding: 80px 32px; }
  .dir-a .lws-firm { grid-template-columns: 1fr; padding: 80px 32px; }
  .dir-a .lws-stats-trust { grid-template-columns: 1fr; }
  .dir-a .lws-services { padding: 80px 32px 40px; }
  .dir-a .svc-row { padding: 24px 32px; grid-template-columns: 60px 1fr 200px 40px; }
  .dir-a .lws-process { padding: 80px 32px; }
  .dir-a .lws-process__grid { grid-template-columns: repeat(2,1fr); }
  .dir-a .lws-work { padding: 80px 32px; }
  .dir-a .lws-work__grid { grid-template-columns: 1fr 1fr; }
  .dir-a .lws-testimonial { padding: 80px 32px; }
  .dir-a .lws-testimonial__quote { font-size: 40px; }
  .dir-a .lws-cta { padding: 64px 32px; }
  .dir-a .lws-cta__h2 { font-size: 60px; }
  .dir-a .lws-footer { padding: 48px 32px 32px; }
  /* B */
  .dir-b .lws-nav { padding: 24px 40px; }
  .dir-b .lws-hero { padding: 80px 40px 90px; }
  .dir-b .lws-hero__h1 { font-size: 80px; }
  .dir-b .lws-about { grid-template-columns: 1fr; gap: 40px; padding: 0 40px 80px; }
  .dir-b .lws-firm { grid-template-columns: 1fr; padding: 80px 40px; }
  .dir-b .lws-stats-trust { grid-template-columns: 1fr; }
  .dir-b .lws-services { padding: 80px 40px; }
  .dir-b .lws-services__grid { grid-template-columns: repeat(2,1fr); }
  .dir-b .lws-process { padding: 80px 40px; }
  .dir-b .lws-process__grid { grid-template-columns: repeat(2,1fr); }
  .dir-b .lws-work { padding: 80px 40px; }
  .dir-b .lws-work__grid { grid-template-columns: repeat(2,1fr); }
  .dir-b .lws-testimonial { padding: 40px 40px 80px; }
  .dir-b .lws-cta { padding: 0 40px 80px; }
  .dir-b .lws-cta__h2 { font-size: 54px; }
  .dir-b .lws-footer { padding: 0 40px 40px; }
  /* C */
  .dir-c .lws-nav { padding: 24px 40px; }
  .dir-c .lws-hero { padding: 56px 40px 48px; }
  .dir-c .lws-hero__h1 { font-size: 72px; }
  .dir-c .lws-hero__sub { font-size: 16px; }
  .dir-c .lws-section-row { padding: 56px 40px; grid-template-columns: 160px 1fr; }
  .dir-c .lws-about__h2 { font-size: 32px; }
  .dir-c .lws-stats-trust__big-num { font-size: 88px; }
  .dir-c .lws-stats-trust__inner { grid-template-columns: 260px 1fr; }
  .dir-c .lws-services__h2 { font-size: 32px; }
  .dir-c .lws-services-rows { padding: 0 40px 24px; }
  .dir-c .lws-process__h2 { font-size: 32px; }
  .dir-c .lws-work__h2 { font-size: 32px; }
  .dir-c .lws-work__grid { grid-template-columns: repeat(2,1fr); }
  .dir-c .lws-testimonial__quote { font-size: 28px; }
  .dir-c .lws-cta { padding: 64px 40px; }
  .dir-c .lws-cta__h2 { font-size: 48px; }
  .dir-c .lws-footer { padding: 40px 40px 36px; }
}

/* =========================================
   RESPONSIVE — 768px (Tablet portrait)
   ========================================= */
@media (max-width: 768px) {
  /* Nav toggles */
  .lws-nav__toggle { display: flex; }
  .dir-a .lws-nav__menu,
  .dir-b .lws-nav__menu,
  .dir-c .lws-nav__menu { display: none; }
  .dir-a .lws-nav__menu.is-open,
  .dir-b .lws-nav__menu.is-open,
  .dir-c .lws-nav__menu.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink); padding: 24px; gap: 20px;
    border-top: 1px solid var(--line); z-index: 99;
  }
  /* A 768 */
  .dir-a .lws-nav { padding: 16px 24px; position: relative; }
  .dir-a .lws-brand-name { display: none; }
  .dir-a .lws-hero { padding: 48px 24px 40px; }
  .dir-a .lws-hero__h1 { font-size: 64px; }
  .dir-a .lws-hero__btns { flex-direction: column; }
  .dir-a .lws-about { padding: 60px 24px; }
  .dir-a .lws-about__h2 { font-size: 38px; }
  .dir-a .lws-about__stats { gap: 32px; }
  .dir-a .lws-firm { padding: 60px 24px; }
  .dir-a .lws-firm__h2 { font-size: 44px; }
  .dir-a .lws-stats-trust__big-num { font-size: 100px; }
  .dir-a .lws-stats-trust__content { padding: 48px 24px; }
  .dir-a .lws-stats-trust__h2 { font-size: 36px; }
  .dir-a .lws-trust-points { grid-template-columns: 1fr; }
  .dir-a .lws-services { padding: 60px 24px 32px; }
  .dir-a .lws-services__header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .dir-a .lws-services__h2 { font-size: 44px; }
  .dir-a .svc-row { grid-template-columns: 48px 1fr; padding: 18px 24px; }
  .dir-a .svc-tech, .dir-a .svc-arrow { display: none; }
  .dir-a .lws-process { padding: 60px 24px; }
  .dir-a .lws-process__grid { grid-template-columns: 1fr; }
  .dir-a .lws-process__h2 { font-size: 44px; }
  .dir-a .lws-work { padding: 60px 24px; }
  .dir-a .lws-work__grid { grid-template-columns: 1fr; }
  .dir-a .lws-work__h2 { font-size: 44px; }
  .dir-a .lws-testimonial { padding: 60px 24px; }
  .dir-a .lws-testimonial__quote { font-size: 30px; }
  .dir-a .lws-cta { padding: 48px 24px; flex-direction: column; align-items: flex-start; }
  .dir-a .lws-cta__h2 { font-size: 48px; }
  .dir-a .lws-footer { padding: 40px 24px 28px; }
  .dir-a .lws-footer__top { flex-direction: column; }
  .dir-a .lws-footer__menu { flex-wrap: wrap; gap: 20px; }
  /* B 768 */
  .dir-b .lws-nav { padding: 16px 24px; position: relative; }
  .dir-b .lws-hero { padding: 60px 24px 70px; }
  .dir-b .lws-hero__h1 { font-size: 60px; }
  .dir-b .lws-hero__sub { font-size: 17px; }
  .dir-b .lws-about { padding: 0 24px 60px; }
  .dir-b .lws-about__h2 { font-size: 38px; }
  .dir-b .lws-firm { padding: 60px 24px; }
  .dir-b .lws-firm__h2 { font-size: 40px; }
  .dir-b .lws-stats-trust__big-num { font-size: 100px; }
  .dir-b .lws-stats-trust__content { padding: 48px 24px; }
  .dir-b .lws-stats-trust__h2 { font-size: 32px; }
  .dir-b .lws-trust-points { grid-template-columns: 1fr; }
  .dir-b .lws-services { padding: 60px 24px; }
  .dir-b .lws-services__grid { grid-template-columns: 1fr; }
  .dir-b .lws-services__h2 { font-size: 44px; }
  .dir-b .lws-process { padding: 60px 24px; }
  .dir-b .lws-process__grid { grid-template-columns: 1fr; }
  .dir-b .lws-process__h2 { font-size: 38px; }
  .dir-b .lws-work { padding: 60px 24px; }
  .dir-b .lws-work__grid { grid-template-columns: 1fr; }
  .dir-b .lws-work__h2 { font-size: 44px; }
  .dir-b .lws-testimonial { padding: 40px 24px 60px; }
  .dir-b .lws-testimonial__quote { font-size: 26px; }
  .dir-b .lws-cta { padding: 0 24px 60px; }
  .dir-b .lws-cta__inner { padding: 48px 32px; border-radius: 10px; }
  .dir-b .lws-cta__h2 { font-size: 42px; }
  .dir-b .lws-footer { padding: 0 24px 36px; }
  .dir-b .lws-footer__top { flex-direction: column; align-items: flex-start; }
  /* Modal 768 */
  .lws-modal { padding: 32px 24px; }

  /* C 768 */
  .dir-c .lws-nav { padding: 16px 24px; position: relative; }
  .dir-c .lws-brand-name { display: none; }
  .dir-c .lws-hero { padding: 48px 24px 40px; }
  .dir-c .lws-hero__h1 { font-size: 56px; }
  .dir-c .lws-hero__meta { flex-direction: column; gap: 4px; font-size: 11px; }
  .dir-c .lws-hero__bottom { grid-template-columns: 1fr; }
  .dir-c .lws-hero__sub { font-size: 16px; }
  .dir-c .lws-hero__btns { flex-direction: column; align-items: flex-start; }
  .dir-c .lws-section-row { grid-template-columns: 1fr; gap: 16px; padding: 48px 24px; }
  .dir-c .lws-about__h2 { font-size: 28px; }
  .dir-c .lws-about__stats { gap: 12px; margin-top: 32px; }
  .dir-c .lws-stat__num { font-size: 32px; padding-top: 16px; }
  .dir-c .lws-stat__label { font-size: 12px; }
  .dir-c .lws-firm__inner { grid-template-columns: 1fr; }
  .dir-c .lws-firm__h2 { font-size: 26px; }
  .dir-c .lws-firm__body { font-size: 15px; }
  .dir-c .lws-stats-trust__inner { grid-template-columns: 1fr; }
  .dir-c .lws-stats-trust__big-num { font-size: 72px; }
  .dir-c .lws-stats-trust__h2 { font-size: 26px; }
  .dir-c .lws-svc-grid { grid-template-columns: 1fr; }
  .dir-c .lws-svc-cell:nth-child(even) { padding-left: 0; border-left: none; }
  .dir-c .lws-services__h2 { font-size: 28px; }
  .dir-c .lws-process__h2 { font-size: 28px; }
  .dir-c .lws-process__grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .dir-c .lws-process__cta { opacity: 1; transform: none; } /* always show on touch */
  .dir-c .lws-process__see-all { margin-top: 24px; }
  .dir-c .lws-work__h2 { font-size: 28px; }
  .dir-c .lws-work__header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dir-c .lws-work__grid { grid-template-columns: 1fr; }
  .dir-c .lws-testimonial__quote { font-size: 24px; }
  .dir-c .lws-cta { grid-template-columns: 1fr; padding: 60px 24px; }
  .dir-c .lws-cta__h2 { font-size: 40px; }
  .dir-c .lws-footer { padding: 40px 24px 36px; }
  .dir-c .lws-footer__top { flex-direction: column; align-items: flex-start; }
  .dir-c .lws-footer__menu { flex-wrap: wrap; gap: 16px; }
  .dir-c .lws-services-rows { padding: 0 24px 24px; }
}

/* =========================================
   RESPONSIVE — 390px (Mobile)
   ========================================= */
@media (max-width: 390px) {
  .dir-a .lws-hero__h1 { font-size: 52px; }
  .dir-a .lws-cta__h2 { font-size: 38px; }
  .dir-a .lws-testimonial__quote { font-size: 24px; }
  .dir-b .lws-hero__h1 { font-size: 48px; }
  .dir-b .lws-cta__h2 { font-size: 36px; }
  .dir-b .lws-testimonial__quote { font-size: 22px; }
  .dir-c .lws-hero__h1 { font-size: 40px; }
  .dir-c .lws-hero__sub { font-size: 15px; }
  .dir-c .lws-about__h2 { font-size: 24px; }
  .dir-c .lws-about__stats { grid-template-columns: 1fr 1fr 1fr; }
  .dir-c .lws-stat__num { font-size: 26px; }
  .dir-c .lws-stat__label { font-size: 11px; }
  .dir-c .lws-stats-trust__big-num { font-size: 60px; }
  .dir-c .lws-stats-trust__h2 { font-size: 22px; }
  .dir-c .lws-services__h2 { font-size: 24px; }
  .dir-c .lws-process__h2 { font-size: 24px; }
  .dir-c .lws-process__grid { grid-template-columns: 1fr; }
  .dir-c .lws-work__h2 { font-size: 24px; }
  .dir-c .lws-testimonial__quote { font-size: 20px; }
  .dir-c .lws-cta__h2 { font-size: 36px; }
  .dir-c .lws-svc-grid { grid-template-columns: 1fr; }
  .dir-c .lws-svc-cell:nth-child(even) { padding-left: 0; border-left: none; }
}

/* =========================================
   RESPONSIVE — 1600px  (Large desktop)
   ========================================= */
@media (min-width: 1600px) {
  /* C: Nav */
  .dir-c .lws-nav { padding: 32px 120px; }

  /* C: Hero */
  .dir-c .lws-hero { padding: 96px 120px 84px; }
  .dir-c .lws-hero__h1 { font-size: 124px; }
  .dir-c .lws-hero__sub { font-size: 19px; }

  /* C: Sections — wider side padding, wider index column */
  .dir-c .lws-section-row { padding: 88px 120px; grid-template-columns: 280px 1fr; }
  .dir-c .lws-services-rows { padding: 0 120px 40px; }

  /* C: About */
  .dir-c .lws-about__h2 { font-size: 46px; }

  /* C: Firm */
  .dir-c .lws-firm__h2 { font-size: 44px; }
  .dir-c .lws-firm__body { font-size: 18px; }

  /* C: Stats/Trust */
  .dir-c .lws-stats-trust__inner { grid-template-columns: 360px 1fr; }
  .dir-c .lws-stats-trust__big-num { font-size: 124px; }
  .dir-c .lws-stats-trust__h2 { font-size: 38px; }

  /* C: Services */
  .dir-c .lws-services__h2 { font-size: 46px; }
  .dir-c .lws-svc-cell__name { font-size: 24px; }

  /* C: Process */
  .dir-c .lws-process__h2 { font-size: 46px; }

  /* C: Work */
  .dir-c .lws-work__h2 { font-size: 46px; }

  /* C: Testimonial */
  .dir-c .lws-testimonial__quote { font-size: 42px; }

  /* C: CTA */
  .dir-c .lws-cta { padding: 100px 120px; }
  .dir-c .lws-cta__h2 { font-size: 76px; }

  /* C: Footer */
  .dir-c .lws-footer { padding: 56px 120px 52px; }
}

/* =========================================
   RESPONSIVE — 1920px  (Full HD / wide)
   ========================================= */
@media (min-width: 1920px) {
  /* C: Nav */
  .dir-c .lws-nav { padding: 36px 160px; }

  /* C: Hero */
  .dir-c .lws-hero { padding: 112px 160px 100px; }
  .dir-c .lws-hero__h1 { font-size: 144px; }
  .dir-c .lws-hero__sub { font-size: 20px; max-width: 600px; }

  /* C: Sections */
  .dir-c .lws-section-row { padding: 104px 160px; grid-template-columns: 320px 1fr; }
  .dir-c .lws-services-rows { padding: 0 160px 48px; }

  /* C: About */
  .dir-c .lws-about__h2 { font-size: 52px; }
  .dir-c .lws-stat__num { font-size: 48px; }

  /* C: Firm */
  .dir-c .lws-firm__h2 { font-size: 48px; }
  .dir-c .lws-firm__body { font-size: 19px; }

  /* C: Stats/Trust */
  .dir-c .lws-stats-trust__inner { grid-template-columns: 400px 1fr; }
  .dir-c .lws-stats-trust__big-num { font-size: 144px; }
  .dir-c .lws-stats-trust__h2 { font-size: 42px; }

  /* C: Services */
  .dir-c .lws-services__h2 { font-size: 52px; }
  .dir-c .lws-svc-cell__name { font-size: 26px; }

  /* C: Process */
  .dir-c .lws-process__h2 { font-size: 52px; }
  .dir-c .lws-process__title { font-size: 22px; }
  .dir-c .lws-process__desc { font-size: 15px; }

  /* C: Work */
  .dir-c .lws-work__h2 { font-size: 52px; }
  .dir-c .lws-work__grid { gap: 28px; }

  /* C: Testimonial */
  .dir-c .lws-testimonial__quote { font-size: 50px; }

  /* C: CTA */
  .dir-c .lws-cta { padding: 120px 160px; }
  .dir-c .lws-cta__h2 { font-size: 92px; }

  /* C: Footer */
  .dir-c .lws-footer { padding: 64px 160px 60px; }
}

/* ==========================================
   PROCESS MODAL
   ========================================== */

/* ── Trigger styles ── */
.lws-process__step {
  cursor: pointer;
  position: relative;
}
.lws-process__step:hover .lws-process__title {
  color: #F4310C;
  transition: color 0.2s ease;
}
.lws-process__cta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F4310C;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: var(--font-mono, monospace);
}
.lws-process__step:hover .lws-process__cta,
.lws-process__step:focus-visible .lws-process__cta {
  opacity: 1;
  transform: translateX(0);
}
.lws-process__see-all {
  margin-top: 40px;
  display: inline-block;
}

/* ── Backdrop ── */
.lws-process-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 16, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lws-process-modal.is-active {
  opacity: 1;
  pointer-events: all;
}

/* ── Close ── */
.lws-process-modal__close {
  position: fixed;
  top: 28px;
  right: 36px;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10001;
}
.lws-process-modal__close:hover {
  background: rgba(244,49,12,0.2);
  transform: rotate(90deg);
}

/* ── Track (horizontal slide container) ── */
.lws-pm-track {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: visible;
  position: relative;
}

/* ── Panel ── */
.lws-pm-panel {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 80px 10vw;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.lws-pm-panel.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}
.lws-pm-panel.is-exit-left {
  opacity: 0;
  transform: translateX(-60px);
}
.lws-pm-panel.is-exit-right {
  opacity: 0;
  transform: translateX(60px);
}

/* ── Robot ── */
.lws-pm-robot {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 340px);
  animation: lws-robot-float 3.5s ease-in-out infinite;
  filter: drop-shadow(0 20px 60px rgba(244,49,12,0.2));
  overflow: visible;
}
.lws-robot-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* Robot idle float */
@keyframes lws-robot-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* Antenna blink */
.robot-antenna-dot {
  animation: lws-antenna-blink 2s ease-in-out infinite;
}
@keyframes lws-antenna-blink {
  0%, 80%, 100% { opacity: 1; }
  90%           { opacity: 0.1; }
}

/* Chest pulse (Discover) */
.robot-chest-pulse {
  animation: lws-chest-pulse 1.4s ease-in-out infinite;
}
@keyframes lws-chest-pulse {
  0%, 100% { r: 7; opacity: 0.8; }
  50%      { r: 10; opacity: 0.3; }
}

/* Scan line (Discover) */
.robot-scan {
  animation: lws-scan 1.8s linear infinite;
}
@keyframes lws-scan {
  0%   { transform: translateY(-10px); opacity: 0; }
  20%  { opacity: 0.7; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* Cursor blink (Design) */
.robot-cursor {
  animation: lws-cursor-blink 1s step-end infinite;
}
@keyframes lws-cursor-blink {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0; }
}

/* Gear spin (Build) */
.robot-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: lws-gear-spin 3s linear infinite;
}
@keyframes lws-gear-spin {
  to { transform: rotate(360deg); }
}

/* Pulse line animate (Support) */
.robot-pulse-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: lws-pulse-draw 1.6s ease-in-out infinite;
}
@keyframes lws-pulse-draw {
  0%   { stroke-dashoffset: 120; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -120; }
}

/* Shield glow (Support) */
.robot-shield {
  animation: lws-shield-glow 2s ease-in-out infinite;
}
@keyframes lws-shield-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(244,49,12,0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(244,49,12,0.8)); }
}

/* ── Panel content ── */
.lws-pm-content {
  flex: 1;
  max-width: 560px;
}
.lws-pm-step-num {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #F4310C;
  margin-bottom: 16px;
  display: block;
}
.lws-pm-step-title {
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.lws-pm-step-desc {
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin: 0 0 36px;
  max-width: 480px;
}
.lws-pm-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lws-pm-bullets li {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.lws-pm-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F4310C;
}

/* ── Content animate on step enter ── */
.lws-pm-panel.is-active .lws-pm-step-num {
  animation: lws-pm-fade-up 0.5s 0.15s both;
}
.lws-pm-panel.is-active .lws-pm-step-title {
  animation: lws-pm-fade-up 0.55s 0.22s both;
}
.lws-pm-panel.is-active .lws-pm-step-desc {
  animation: lws-pm-fade-up 0.55s 0.3s both;
}
.lws-pm-panel.is-active .lws-pm-bullets li:nth-child(1) { animation: lws-pm-fade-up 0.5s 0.36s both; }
.lws-pm-panel.is-active .lws-pm-bullets li:nth-child(2) { animation: lws-pm-fade-up 0.5s 0.43s both; }
.lws-pm-panel.is-active .lws-pm-bullets li:nth-child(3) { animation: lws-pm-fade-up 0.5s 0.50s both; }
.lws-pm-panel.is-active .lws-pm-bullets li:nth-child(4) { animation: lws-pm-fade-up 0.5s 0.57s both; }
@keyframes lws-pm-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Robot animate on enter */
.lws-pm-panel.is-active .lws-pm-robot {
  animation: lws-robot-enter 0.6s 0.1s both, lws-robot-float 3.5s 0.7s ease-in-out infinite;
}
@keyframes lws-robot-enter {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Navigation ── */
.lws-pm-nav {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 10001;
}
.lws-pm-nav__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.lws-pm-nav__btn:hover:not(:disabled) {
  background: rgba(244,49,12,0.18);
  border-color: #F4310C;
  transform: scale(1.08);
}
.lws-pm-nav__btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.lws-pm-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lws-pm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, width 0.25s;
  padding: 0;
}
.lws-pm-dot.is-active {
  background: #F4310C;
  width: 28px;
  border-radius: 4px;
  transform: none;
}

/* ── Progress bar ── */
.lws-pm-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  z-index: 10001;
}
.lws-pm-progress__bar {
  height: 100%;
  background: #F4310C;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Step label (top-left corner) ── */
.lws-process-modal::before {
  content: 'OUR PROCESS';
  position: fixed;
  top: 36px;
  left: 40px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.3);
  z-index: 10001;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .lws-pm-panel {
    flex-direction: column;
    justify-content: flex-start;
    gap: 28px;
    padding: 72px 6vw 100px;
    text-align: center;
    overflow-y: auto;
  }
  .lws-pm-robot {
    width: clamp(100px, 28vw, 150px);
    flex-shrink: 0;
  }
  .lws-pm-content {
    max-width: 100%;
  }
  .lws-pm-bullets {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .lws-pm-bullets li {
    text-align: left;
    font-size: 14px;
  }
  .lws-pm-step-title {
    font-size: clamp(32px, 9vw, 52px);
  }
  .lws-pm-step-desc {
    font-size: 15px;
  }
  .lws-pm-nav {
    bottom: 12px;
    gap: 16px;
  }
  .lws-pm-nav__btn {
    width: 44px;
    height: 44px;
  }
  .lws-process-modal::before { display: none; }
  .lws-process-modal__close { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 22px; }
}

@media (max-width: 390px) {
  .lws-pm-panel {
    padding: 64px 5vw 90px;
    gap: 20px;
  }
  .lws-pm-robot {
    width: 90px;
  }
  .lws-pm-step-title {
    font-size: 28px;
  }
  .lws-pm-step-desc {
    font-size: 14px;
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lws-pm-robot,
  .lws-pm-panel.is-active .lws-pm-robot,
  .robot-antenna-dot,
  .robot-chest-pulse,
  .robot-scan,
  .robot-cursor,
  .robot-gear,
  .robot-pulse-line,
  .robot-shield { animation: none !important; }
  .lws-pm-panel { transition: opacity 0.3s ease; }
}