/* How We Work (#1510): a calm, classy editorial page in the service-page design language. Everything scoped to .hw-page.
   Hero, buttons, containers and the contact card reuse ecommerce.css (loaded first). Plain CSS: no Tailwind rebuild needed. */
.hw-page {
  --hw-top: 72px; --hw-nav-h: 52px;   /* the site header is 72px (64px on phones); how-we-work.js re-measures it */
  --hw-ink: #04150D; --hw-body: rgba(0, 0, 0, .75); --hw-muted: #55615B; --hw-line: rgba(16, 24, 20, .08);
  --hw-soft: #F4F8F6; --hw-green: #00744A; --hw-brand: #00B26B; --hw-mint: #5BE3A8; --hw-tint: #E6F6EE;
  --hw-ease: cubic-bezier(.2, .7, .2, 1);
  --hw-card: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px -12px rgba(16, 24, 20, .12);
  /* one spacing and radius scale for the whole page */
  --hw-r: 16px; --hw-r-sm: 12px;
  --hw-pad: 24px; --hw-pad-lg: 24px; --hw-gap: 16px; --hw-sub-t: 40px; --hw-sub-b: 16px; --hw-head-b: 32px;
}
@media (max-width: 1023.98px) { .hw-page { --hw-top: 64px; } }
@media (min-width: 768px) { .hw-page { --hw-gap: 20px; --hw-head-b: 40px; } }
@media (min-width: 900px) { .hw-page { --hw-pad-lg: 40px; } }
html.imc-bar-on .hw-page { --hw-top: calc(72px + var(--imc-bar-h, 42px)); }
@media (max-width: 1023.98px) { html.imc-bar-on .hw-page { --hw-top: calc(64px + var(--imc-bar-h, 42px)); } }
@media (prefers-reduced-motion: no-preference) { html:has(.hw-page) { scroll-behavior: smooth; } }
.hw-page [id] { scroll-margin-top: calc(var(--hw-top) + var(--hw-nav-h) + 8px); }
.hw-page :focus-visible { outline: 2px solid var(--hw-green); outline-offset: 3px; }
.hw-page .ec-sec--dark :focus-visible, .hw-page .hw-hero :focus-visible, .hw-page .hw-contact .ec-contact-panel :focus-visible { outline-color: var(--hw-mint); }
.hw-page h3, .hw-page h4 { margin: 0; }
.hw-page .ec-sec:not(.ec-sec--dark) .ec-eyebrow { color: var(--hw-green); }
.hw-page .ec-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hw-page :where(.hw-promise, .hw-who, .hw-tz, .hw-process, .hw-ways, .hw-after, .hw-before, .hw-freesec) a:not(.hw-btn):not(.hw-pdf) { color: var(--hw-green); text-underline-offset: 3px; }
.hw-head { max-width: 760px; margin-bottom: var(--hw-head-b); }
.hw-head .ec-lead { max-width: 640px; }
.hw-page .hw-sub { margin: var(--hw-sub-t) 0 var(--hw-sub-b); font-size: 20px; line-height: 1.4; font-weight: 600; color: #1C2522; }

/* scroll reveal: only when JS is on, never with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html.hw-js .hw-rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--hw-ease) var(--d, 0ms), transform .6s var(--hw-ease) var(--d, 0ms); }
  html.hw-js .hw-rv.is-in { opacity: 1; transform: none; }
}

/* ── hero ── */
.hw-hero { background: radial-gradient(760px 460px at 88% 6%, rgba(0, 178, 107, .22), transparent 70%), radial-gradient(520px 360px at 0% 100%, rgba(0, 178, 107, .1), transparent 70%), #000; }
.hw-hero .ec10-eyebrow { flex-wrap: wrap; }
.hw-eyebrow-sub { color: rgba(255, 255, 255, .72); }
@media (max-width: 559px) { .hw-eyebrow-sub { display: block; flex-basis: 100%; } .hw-page .hw-hero .ec10-eyebrow { border-radius: var(--hw-r); } }
.hw-hero__side { display: flex; align-items: center; }
.hw-hero .ec2-hero-acts { margin-top: 28px; }
.hw-alt { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--hw-brand); text-underline-offset: 5px; padding: 8px 4px; }
.hw-alt:hover { color: var(--hw-mint); }
.hw-fast { margin: 18px 0 0; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.hw-fast a { color: var(--hw-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hw-hero .ec8-proof .ec5-hero-rate { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.hw-hero .ec5-hero-rate .text-black\/75 { color: rgba(255, 255, 255, .78); }

/* live two-clock card */

/* the short version: three glass cards */
.hw-short { width: 100%; padding: var(--hw-pad); border-radius: var(--hw-r); border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.hw-short__h { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-mint); }
.hw-short__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hw-glass { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--hw-r-sm); border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .28); color: #fff; text-decoration: none; transition: transform .25s var(--hw-ease), border-color .25s, background .25s; }
.hw-glass:hover, .hw-glass:focus-visible { transform: translateX(4px); border-color: rgba(0, 178, 107, .6); background: rgba(0, 178, 107, .1); }
.hw-glass__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hw-glass b { font-size: 17px; line-height: 1.35; font-weight: 600; }
.hw-glass i { font-style: normal; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.hw-glass em { padding-top: 4px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--hw-mint); }
@media (max-width: 479px) { .hw-short { padding: 20px; } .hw-glass { padding: 16px; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .hw-glass:hover, .hw-glass:focus-visible { transform: none; } }
.hw-ico { position: relative; display: block; flex: none; width: 44px; height: 44px; border-radius: var(--hw-r-sm); background: rgba(0, 178, 107, .16); }
.hw-ico::before { content: ""; position: absolute; inset: 10px; background: var(--hw-mint); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hw-ico--key { --ico: url("../img/how-we-work/icon-key.svg"); }
.hw-ico--person { --ico: url("../img/how-we-work/icon-person.svg"); }
.hw-ico--clock { --ico: url("../img/how-we-work/icon-clock.svg"); }

/* ── sticky section nav ── */
.hw-nav { position: sticky; top: var(--hw-top); z-index: 20; height: var(--hw-nav-h); margin: 0; border: 0; border-bottom: 1px solid var(--hw-line); background: #fff; box-shadow: none; }
.hw-nav .ec-container { height: 100%; }
.hw-nav__list { display: flex; gap: 2px; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hw-nav__list::-webkit-scrollbar { display: none; }
.hw-nav__list li { flex: none; }
.hw-nav a { display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #3A4540; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.hw-nav a:hover { color: var(--hw-ink); }
.hw-nav a[aria-current="true"] { color: var(--hw-green); font-weight: 600; border-bottom-color: var(--hw-brand); }
.hw-nav a:focus-visible { outline-offset: -3px; }
@media (max-width: 767px) { .hw-nav .ec-container { padding-inline: 12px; } .hw-nav a { padding: 0 12px; } }

/* ── promise band ── */
.hw-promise { background: radial-gradient(700px 360px at 100% 0%, rgba(0, 178, 107, .12), transparent 70%), var(--hw-soft); }
.hw-promise__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: var(--hw-pad-lg); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
@media (min-width: 900px) { .hw-promise__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .hw-promise__r { padding-left: 56px; border-left: 1px solid var(--hw-line); } }
.hw-promise__line { margin: 14px 0 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--hw-ink); text-wrap: balance; }
.hw-pkeys { display: grid; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none; }
.hw-pkeys li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.hw-pkeys b { display: block; font-size: 16px; font-weight: 600; color: #1C2522; }
.hw-pkeys i { display: block; font-style: normal; font-size: 14px; color: var(--hw-muted); }
.hw-promise__r p { margin: 0 0 16px; padding-top: 20px; border-top: 1px solid var(--hw-line); font-size: 16px; line-height: 1.7; color: var(--hw-body); }
.hw-mi, .hw-av:not(.hw-av--photo) { position: relative; flex: none; display: block; width: 48px; height: 48px; border-radius: var(--hw-r-sm); background: var(--hw-tint); }
.hw-mi::before, .hw-av:not(.hw-av--photo)::before { content: ""; position: absolute; inset: 12px; background: var(--hw-green); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hw-mi--code { --ico: url("../img/how-we-work/icon-code.svg"); }
.hw-mi--cloud { --ico: url("../img/how-we-work/icon-cloud.svg"); }
.hw-mi--globe { --ico: url("../img/how-we-work/icon-globe.svg"); }
.hw-link { font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.hw-link:hover { text-decoration: underline; }

/* ── who you deal with ── */
.hw-people { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hw-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hw-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hw-person:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; } .hw-person:nth-child(4) .hw-av { grid-row: span 2; margin: 0; } }
.hw-person { padding: var(--hw-pad); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
.hw-av { margin-bottom: 20px; width: 56px; height: 56px; }
.hw-av:not(.hw-av--photo) { background: var(--hw-green); }
.hw-av:not(.hw-av--photo)::before { inset: 15px; background: #fff; }
.hw-av--photo { display: block; border-radius: 50%; object-fit: cover; object-position: center; background: var(--hw-tint); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0, 178, 107, .45); margin-left: 5px; margin-top: 5px; }
.hw-av--inbox { --ico: url("../img/how-we-work/icon-inbox.svg"); }
.hw-av--people { --ico: url("../img/how-we-work/icon-people.svg"); }
.hw-av--chart { --ico: url("../img/how-we-work/icon-chart.svg"); }
.hw-person h3 { font-size: 19px; line-height: 1.35; font-weight: 600; color: #1C2522; }
.hw-person p { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: var(--hw-body); }

/* ── what you own: keys handed over ── */
.hw-own { background: radial-gradient(640px 320px at 0% 0%, rgba(0, 178, 107, .14), transparent 70%), #04150D; }
.hw-own .ec-lead { color: rgba(255, 255, 255, .8); }
.hw-keys { display: grid; gap: var(--hw-gap); margin: 0; padding: 0; list-style: none; }
.hw-key { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; align-items: center; padding: var(--hw-pad); border-radius: var(--hw-r); border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.hw-key__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--hw-r-sm); background: rgba(0, 178, 107, .14); border: 1px solid rgba(91, 227, 168, .25); }
.hw-key h3 { font-size: 20px; line-height: 1.3; font-weight: 600; color: #fff; }
.hw-key p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.hw-badge { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--hw-mint); background: rgba(0, 178, 107, .16); border: 1px solid rgba(91, 227, 168, .35); }
@media (min-width: 900px) { .hw-key { grid-template-columns: auto minmax(0, 1fr) auto; } .hw-badge { grid-column: 3; } }
.hw-note { display: flex; gap: 16px; margin: 32px 0 0; padding: var(--hw-pad); border-radius: var(--hw-r); border-left: 3px solid var(--hw-brand); background: rgba(255, 255, 255, .06); font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.hw-note__ico { flex: none; align-self: flex-start; margin-top: 3px; }
.hw-note a { color: var(--hw-mint); }
.hw-note b { color: #fff; }

/* ── time zones: picker ── */
.hw-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: var(--hw-pad-lg); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
@media (min-width: 900px) { .hw-picker { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } }
.hw-picker__ctl .ec-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #1C2522; }
.hw-select select { width: 100%; height: 52px; padding: 0 44px 0 16px; border-radius: var(--hw-r-sm); border: 1px solid rgba(16, 24, 20, .2); background: #fff url("../img/ecommerce/icon-select.svg") right 14px center / 20px no-repeat; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px; color: #1C2522; }
.hw-select select:focus-visible { outline: 2px solid var(--hw-green); outline-offset: 2px; }
.hw-toggle { display: inline-flex; margin-top: 20px; padding: 4px; border-radius: 999px; background: var(--hw-soft); border: 1px solid var(--hw-line); }
.hw-toggle__b { padding: 9px 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #3A4540; cursor: pointer; transition: background .2s, color .2s; }
.hw-toggle__b[aria-pressed="true"] { background: var(--hw-ink); color: #fff; }
.hw-toggle__b:disabled { opacity: .45; cursor: not-allowed; }
.hw-picker__fixed { margin: 12px 0 0; font-size: 14px; color: var(--hw-muted); }
.hw-picker__read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hw-picker__read { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.hw-picker__read li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--hw-line); }
.hw-picker__read span { font-size: 13px; color: var(--hw-muted); }
.hw-picker__read b { font-size: 18px; line-height: 1.4; font-weight: 600; color: #1C2522; }
.hw-picker__ov b { color: var(--hw-green); }
.hw-all { margin-top: 24px; border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); }
.hw-all summary { padding: 18px 24px; font-weight: 600; font-size: 16px; color: #1C2522; cursor: pointer; }
.hw-all[open] summary { border-bottom: 1px solid var(--hw-line); }
.hw-table-wrap { padding: 8px 24px 20px; overflow-x: auto; }
.hw-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.hw-table th, .hw-table td { padding: 13px 14px 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hw-line); }
.hw-table thead th { font-size: 13px; color: var(--hw-muted); font-weight: 600; }
.hw-table tbody th { font-weight: 600; color: #1C2522; }
.hw-dl { display: block; font-size: 13px; color: var(--hw-muted); }
@media (max-width: 639px) {
  .hw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hw-table, .hw-table tbody, .hw-table tr, .hw-table th, .hw-table td { display: block; }
  .hw-table tr { padding: 12px 0; border-bottom: 1px solid var(--hw-line); }
  .hw-table th, .hw-table td { padding: 3px 0; border: 0; }
  .hw-table td::before { content: attr(data-label) ": "; color: var(--hw-muted); font-size: 13px; }
  .hw-table-wrap { padding-inline: 18px; }
}

/* the 24-hour bar */
.hw-bar { display: grid; gap: 10px; }
.hw-bar__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.hw-bar__k { font-size: 13px; font-weight: 600; color: #3A4540; }
.hw-bar__t { position: relative; height: 18px; border-radius: 999px; background: #E9F0EC; }
.hw-seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 999px; }
.hw-seg--you { background: #1C2522; }
.hw-seg--us { background: #7FD7B3; }
.hw-seg--both { background: var(--hw-brand); box-shadow: 0 0 0 3px rgba(0, 178, 107, .2); }
.hw-bar__now { position: absolute; top: -4px; bottom: -4px; left: var(--l); width: 2px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); text-decoration: none; }
.hw-bar__axis { display: flex; justify-content: space-between; margin-left: 52px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--hw-muted); }

/* ── how a project runs ── */
.hw-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 64px; }
@media (min-width: 1024px) { .hw-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .hw-split .hw-head { position: sticky; top: calc(var(--hw-top) + var(--hw-nav-h) + 32px); margin-bottom: 0; } }
.hw-hl { padding: 2px 8px; border-radius: 6px; background: var(--hw-tint); color: #064E34; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hw-journey { margin: 0; padding: 0; list-style: none; }
.hw-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 24px; padding-bottom: 40px; }
.hw-step:last-child { padding-bottom: 0; }
.hw-step::before, .hw-step::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: #D5EADF; }
.hw-step::after { background: var(--hw-brand); transform: scaleY(var(--f, 0)); transform-origin: top; }
.hw-step:last-child::before, .hw-step:last-child::after { display: none; }
.hw-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid #D5EADF; font-weight: 600; font-size: 15px; color: var(--hw-muted); transition: background .3s, border-color .3s, color .3s; }
.hw-step.is-on .hw-step__n { background: var(--hw-brand); border-color: var(--hw-brand); color: var(--hw-ink); }
.hw-step__b { padding-top: 6px; }
.hw-step h3 { font-size: 20px; line-height: 1.3; font-weight: 600; color: #1C2522; }
.hw-step p { margin: 8px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--hw-body); }

/* ── ways to work with us ── */
.hw-waygrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hw-waygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hw-waygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hw-way { padding: var(--hw-pad); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
.hw-way::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 20px; border-radius: 3px; background: var(--hw-brand); }
.hw-way h3 { font-size: 19px; line-height: 1.35; font-weight: 600; color: #1C2522; }
.hw-way p { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: var(--hw-body); }
.hw-live { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; padding: var(--hw-pad-lg); border-radius: var(--hw-r); background: #04150D; color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) { .hw-live { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
.hw-live h3 { font-size: 24px; line-height: 1.3; font-weight: 600; color: #fff; }
.hw-live p { margin: 12px 0 0; font-size: 16px; line-height: 1.7; }
.hw-page .hw-ways .hw-live a { color: var(--hw-mint); }
.hw-live__steps { counter-reset: s; margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hw-live__steps li { counter-increment: s; display: flex; gap: 14px; font-size: 16px; line-height: 1.55; color: #fff; }
.hw-live__steps li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hw-brand); color: var(--hw-ink); font-weight: 600; font-size: 14px; }
.hw-live__store { align-self: center; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--hw-r-sm); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.hw-live__store b { color: #fff; font-size: 17px; }

/* ── after launch ── */
/* after launch (06): client cards with an icon header and pill labels, quote card with arcs */
.hw-page .hw-after { position: relative; overflow: hidden; background: radial-gradient(560px 420px at 100% 0%, rgba(0, 178, 107, .11), transparent 70%), radial-gradient(420px 360px at 0% 40%, rgba(0, 178, 107, .05), transparent 70%), #fff; }
.hw-after::before { content: ""; position: absolute; top: -220px; right: -140px; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(0, 178, 107, .12); pointer-events: none; }
.hw-after .ec-container { position: relative; }
.hw-stay { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .hw-stay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-stay__c { display: flex; flex-direction: column; padding: var(--hw-pad); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
.hw-stay__top { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--hw-line); }
.hw-stay__top .hw-mi { width: 52px; height: 52px; }
.hw-stay__top .hw-mi::before { inset: 14px; }
.hw-stay__n { font-size: 20px; line-height: 1.3; font-weight: 600; color: #1C2522; }
.hw-stay__m { margin: 4px 0 0; font-size: 14px; color: var(--hw-muted); }
.hw-stay__r { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 25px; align-items: start; margin: 0; padding: 8px 0; font-size: 15.5px; line-height: 1.6; color: var(--hw-body); }
.hw-stay__r b { padding: 4px 12px; border-radius: 999px; background: var(--hw-tint); font-size: 13.5px; line-height: 1.6; font-weight: 600; color: #064E34; white-space: nowrap; }
.hw-stay__r span { position: relative; padding-top: 2px; }
.hw-stay__r span::before { content: ""; position: absolute; left: -13px; top: 2px; bottom: 2px; width: 1px; background: rgba(16, 24, 20, .12); }
@media (min-width: 768px) { .hw-stay__r { grid-template-columns: 96px minmax(0, 1fr); } }
@media (max-width: 519.98px) { .hw-stay__r { grid-template-columns: minmax(0, 1fr); gap: 8px; } .hw-stay__r b { justify-self: start; } .hw-stay__r span { padding-top: 0; } .hw-stay__r span::before { display: none; } }
.hw-car { margin: 0; }
.hw-car__track { display: grid; gap: var(--hw-gap); }
.hw-car.is-on .hw-car__track { display: block; }
.hw-q { margin: 0; position: relative; padding: 48px 28px 32px; border-radius: var(--hw-r); background: #04150D; color: #fff; overflow: hidden; }
.hw-q::before { content: "\201C"; position: absolute; top: -8px; left: 24px; font-size: 96px; line-height: 1; font-weight: 600; color: rgba(34, 197, 139, .3); }
.hw-q[hidden] { display: none; }
.hw-q blockquote { position: relative; margin: 0; max-width: 62ch; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.5; font-weight: 500; }
.hw-q figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.hw-q figcaption b { font-size: 16px; color: var(--hw-mint); }
@media (min-width: 768px) { .hw-q { padding: 64px 56px 44px; } .hw-q::before { left: 48px; top: -4px; font-size: 120px; } }
.hw-car__ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: var(--hw-gap); }
.hw-car__ctl[hidden] { display: none; }
.hw-car__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(16, 24, 20, .2); background: #fff; font-size: 18px; color: var(--hw-ink); cursor: pointer; transition: background .2s, color .2s; }
.hw-car__btn:hover { background: var(--hw-ink); color: #fff; }
.hw-car__dots { display: flex; gap: 4px; }
.hw-car__dot { position: relative; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; }
.hw-car__dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #B8C7BF; transition: background .2s, transform .2s; }
.hw-car__dot[aria-current="true"]::before { background: var(--hw-green); transform: scale(1.4); }

/* ── before you sign ── */
.hw-qs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1024px) { .hw-qs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } .hw-qs__side { position: sticky; top: calc(var(--hw-top) + var(--hw-nav-h) + 24px); } }
.hw-check { counter-reset: q; margin: 0; padding: 8px 28px; list-style: none; border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
.hw-check li { counter-increment: q; display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hw-line); font-size: 17px; line-height: 1.55; color: #1C2522; }
.hw-check li:last-child { border-bottom: 0; }
.hw-check li::before { content: counter(q); flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -1px; border-radius: 50%; border: 2px solid var(--hw-brand); font-size: 14px; font-weight: 600; color: var(--hw-green); }
.hw-qs__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.hw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--hw-r-sm); font: inherit; font-size: 15.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.hw-btn[hidden] { display: none; }
.hw-btn--solid { background: var(--hw-ink); color: #fff; border: 1px solid var(--hw-ink); }
.hw-btn--solid:hover { background: #0B2A1B; }
.hw-btn--solid.is-done { background: var(--hw-green); border-color: var(--hw-green); }
.hw-btn--ghost { background: #fff; color: var(--hw-ink); border: 1px solid rgba(16, 24, 20, .25); }
.hw-btn--ghost:hover { border-color: var(--hw-ink); }
.hw-qs__status { flex-basis: 100%; min-height: 20px; margin: 0; font-size: 14px; color: var(--hw-green); }
.hw-callout { margin-top: 16px; padding: var(--hw-pad); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); }
.hw-callout h3 { font-size: 17px; font-weight: 600; color: #1C2522; }
.hw-callout p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--hw-body); }
.hw-also { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .hw-also { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-also li { display: flex; flex-direction: column; gap: 6px; padding: var(--hw-pad); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); }
.hw-also b { font-size: 16px; font-weight: 600; color: var(--hw-green); }
.hw-also span { font-size: 15.5px; line-height: 1.65; color: var(--hw-body); }

/* ── free, before you spend ── */
.hw-freesec .hw-head { margin-bottom: 0; }
.hw-pdfs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); }
@media (min-width: 768px) { .hw-pdfs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-pdf { display: flex; gap: 20px; align-items: flex-start; padding: var(--hw-pad); border-radius: var(--hw-r); background: radial-gradient(420px 220px at 100% 0%, rgba(0, 178, 107, .2), transparent 70%), #04150D; color: #fff; text-decoration: none; transition: transform .25s var(--hw-ease), box-shadow .25s; }
.hw-pdf:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); }
.hw-pdf__ico { position: relative; flex: none; width: 52px; height: 52px; border-radius: var(--hw-r-sm); background: rgba(0, 178, 107, .16); }
.hw-pdf__ico::before { content: ""; position: absolute; inset: 12px; background: var(--hw-mint); -webkit-mask: url("../img/how-we-work/icon-doc.svg") center / contain no-repeat; mask: url("../img/how-we-work/icon-doc.svg") center / contain no-repeat; }
.hw-pdf__b { display: flex; flex-direction: column; gap: 6px; }
.hw-pdf__b b { font-size: 19px; line-height: 1.35; font-weight: 600; }
.hw-pdf__b span { font-size: 15px; color: rgba(255, 255, 255, .78); }
.hw-pdf__b em { margin-top: 8px; font-style: normal; font-weight: 600; color: var(--hw-mint); }
.hw-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); }
@media (min-width: 640px) { .hw-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hw-res { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hw-res__c { grid-column: span 2; } .hw-res__c:nth-child(n+4) { grid-column: span 3; } }
.hw-res__c { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: var(--hw-pad); border-radius: var(--hw-r); background: #fff; border: 1px solid var(--hw-line); box-shadow: var(--hw-card); }
.hw-res__c h4 { margin-top: 6px; font-size: 19px; line-height: 1.35; font-weight: 600; color: #1C2522; }
.hw-res__c p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.65; color: var(--hw-body); }
.hw-res__c a { font-weight: 600; font-size: 15px; text-decoration: none; }
.hw-res__c a:hover { text-decoration: underline; }
.hw-tag { padding: 4px 12px; border-radius: 999px; background: var(--hw-tint); color: #064E34; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }

/* misc */
.hw-sr-only { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 767px) { .hw-promise__foot { margin-top: 28px; } }

/* ── contact: reuses the ec- contact card ── */
.hw-page .hw-contact { background: var(--hw-soft); }
.hw-contact .ec-h2 { margin: 0; color: #000; }
.hw-form-sub { margin: 12px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--hw-muted); }
.hw-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.hw-page .hw-contact .ec-form { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1280px) { .hw-pair { grid-template-columns: 1fr 1fr; gap: 16px; } }
.hw-opt { font-weight: 400; color: var(--hw-muted); }
.hw-next-links { display: block; margin-top: 8px; }
.hw-next-a { display: block; padding: 3px 0; }
.hw-next-a { color: var(--hw-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hw-next-a:focus-visible { outline: 2px solid var(--hw-mint); outline-offset: 2px; }
.hw-page .ec5-steps b, .hw-page .ec5-steps li div > span { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.hw-page .ec5-steps span:not(.ec5-step-n) { color: rgba(255, 255, 255, .9); }
.hw-page .ec-contact-panel { gap: 32px; background: linear-gradient(160deg, rgba(4, 21, 13, .8) 0%, rgba(4, 21, 13, .72) 100%), #04150D url("../img/ecommerce/contact-bg.webp") center / cover no-repeat; }
.hw-cal { align-self: flex-start; }
@media (max-width: 1023.98px) { .hw-page .ec-contact-main { order: -1; } }

/* phone bar: out of the way over the hero and the form */

@media (forced-colors: active) {
  .hw-seg--both, .hw-step.is-on .hw-step__n { background: Highlight; }
  .hw-nav a[aria-current="true"] { border-bottom-color: Highlight; }
}
@media print {
  .hw-nav, .hw-mbar, .hw-contact, .hw-car__ctl { display: none !important; }
  html.hw-js .hw-rv { opacity: 1; transform: none; }
  .hw-page .ec-sec, .hw-hero { padding-block: 16px; background: #fff !important; color: #000 !important; }
  .hw-hero *, .hw-own *, .hw-live *, .hw-q, .hw-q * { color: #000 !important; background: none !important; box-shadow: none !important; }
  .hw-person, .hw-way, .hw-stay__c, .hw-q, .hw-step, .hw-res__c, .hw-also li { break-inside: avoid; }
}

/* phone bar: out of the way over the hero and the form */
.hw-page .hw-mbar:not(.is-on) { transform: translateY(110%); visibility: hidden; }

@media (min-width: 1024px) { .hw-nav__list { justify-content: space-between; overflow-x: visible; } .hw-nav a { padding: 0 8px; } }
html:not(.hw-js) .hw-picker { display: none; }
.hw-bar__none { font-size: 12.5px; color: var(--hw-muted); }
.hw-promise__l { align-self: center; }

/* link inside the hero lead: light green on the dark hero, underlined */
.ec-page .rp-hero .ec-hero__lead a, .ec-page .hw-hero .ec-hero__lead a, .ec-page .ec-hero .ec-hero__lead a { color: #6EE7B7; text-decoration: underline; text-underline-offset: 3px; }
.ec-page .ec-hero .ec-hero__lead a:hover { color: #fff; }

/* Icon tiles on the Ways cards (05) and the resource cards (08), same tile as the ownership rows */
.hw-mi--estimate { --ico: url("../img/how-we-work/icon-estimate.svg"); }
.hw-mi--ai { --ico: url("../img/how-we-work/icon-ai.svg"); }
.hw-mi--speed { --ico: url("../img/how-we-work/icon-speed.svg"); }
.hw-mi--book { --ico: url("../img/how-we-work/icon-book.svg"); }
.hw-mi--layers { --ico: url("../img/how-we-work/icon-layers.svg"); }
.hw-mi--target { --ico: url("../img/how-we-work/icon-target.svg"); }
.hw-mi--people { --ico: url("../img/how-we-work/icon-people.svg"); }
.hw-mi--compass { --ico: url("../img/how-we-work/icon-compass.svg"); }
.hw-mi--lifebuoy { --ico: url("../img/how-we-work/icon-lifebuoy.svg"); }
.hw-mi--refresh { --ico: url("../img/how-we-work/icon-refresh.svg"); }
.hw-res__top { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hw-way::before { display: none; }
.hw-way .hw-mi { margin-bottom: 20px; }
.hw-live__a .hw-mi { margin-bottom: 16px; }
.hw-res__c, .hw-way { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hw-res__c:hover, .hw-way:hover { transform: translateY(-3px); border-color: rgba(0, 178, 107, .35); box-shadow: 0 18px 36px -18px rgba(4, 21, 13, .22); }
@media (prefers-reduced-motion: reduce) { .hw-res__c, .hw-way { transition: none; } .hw-res__c:hover, .hw-way:hover { transform: none; } }

/* Track record: a dark band under the team cards (one big stat + a 2012 -> today line) */
/* Track record band: copy + fact chips on the left, a tilted cluster of glass tiles on an orbit on the right */
.hw-track { position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; margin-top: var(--hw-gap); padding: var(--hw-pad-lg); border-radius: var(--hw-r); color: #fff; isolation: isolate;
  background: radial-gradient(55% 90% at 80% 45%, rgba(0,178,107,.34), transparent 70%), radial-gradient(70% 60% at 30% 120%, rgba(0,116,74,.4), transparent 70%), linear-gradient(135deg, #072B1D, #03140D 60%, #062619);
  box-shadow: 0 24px 48px -28px rgba(0,116,74,.55); }
.hw-track::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 240px; height: 120px; background: radial-gradient(rgba(110,231,183,.35) 1px, transparent 1.4px) 0 0 / 12px 12px; -webkit-mask: linear-gradient(135deg, transparent 30%, #000); mask: linear-gradient(135deg, transparent 30%, #000); }
.hw-track__h { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: #6EE7B7; }
.hw-track__stat { margin: 10px 0 0; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.3; font-weight: 500; color: #fff; }
.hw-track__stat b { display: block; margin-bottom: 6px; font-size: clamp(60px, 7vw, 96px); line-height: .95; font-weight: 700; letter-spacing: -.04em; color: #fff; text-shadow: 0 0 40px rgba(110,231,183,.35); }
.hw-track__stat b span { color: #5BE3A8; background: linear-gradient(180deg, #8FF5C9, #22C58B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hw-track__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.hw-track__facts li { display: flex; flex: 1 1 100%; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--hw-r-sm); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.hw-track__facts b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.hw-track__facts li > span:last-child { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); }
.hw-track__i { position: relative; flex: none; width: 40px; height: 40px; border-radius: var(--hw-r-sm); background: rgba(0,178,107,.2); }
.hw-track__i::before, .hw-orb__t::before { content: ""; position: absolute; inset: 10px; background: #D1FAE5; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hw-mi--calendar { --ico: url("../img/how-we-work/icon-calendar.svg"); }
.hw-mi--database { --ico: url("../img/how-we-work/icon-database.svg"); }
.hw-mi--phone { --ico: url("../img/how-we-work/icon-phone.svg"); }
.hw-mi--nodes { --ico: url("../img/how-we-work/icon-nodes.svg"); }
.hw-mi--gear { --ico: url("../img/how-we-work/icon-gear.svg"); }
.hw-orb { display: none; }
@media (min-width: 600px) { .hw-track__facts li { flex: 0 1 auto; } }
@media (min-width: 900px) {
  .hw-track { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 24px; padding: 32px 0 32px var(--hw-pad-lg); }
  .hw-orb { display: block; position: relative; align-self: stretch; min-height: 260px; perspective: 1100px; }
  .hw-orb__stage { position: absolute; inset: -6% -4% -6% -2%; transform: rotateX(24deg) rotateZ(-9deg); transform-style: preserve-3d; }
  .hw-orb__ring { position: absolute; inset: 10% 2% 6% 0; border-radius: 50%; border: 1px dashed rgba(110,231,183,.38); }
  .hw-orb__ring--2 { inset: 24% 14% 18% 12%; border-style: solid; border-color: rgba(110,231,183,.16); }
  .hw-orb__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #6EE7B7; box-shadow: 0 0 0 4px rgba(110,231,183,.18), 0 0 14px #22C58B; }
  .hw-orb__dot--1 { left: 13%; top: 17%; } .hw-orb__dot--2 { left: 96%; top: 36%; } .hw-orb__dot--3 { left: 1%; top: 58%; }
  .hw-orb__dot--4 { left: 88%; top: 86%; } .hw-orb__dot--5 { left: 40%; top: 94%; width: 7px; height: 7px; } .hw-orb__dot--6 { left: 30%; top: 12%; width: 6px; height: 6px; }
  .hw-orb__t { --n: 0; position: absolute; aspect-ratio: 1; border-radius: 22%; border: 1px solid rgba(110,231,183,.5);
    background: linear-gradient(150deg, rgba(110,231,183,.32), rgba(0,178,107,.1) 55%, rgba(4,21,13,.5)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 28px -4px rgba(34,197,139,.55), 0 18px 30px -18px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hw-orb__t::before { inset: 28%; }
  .hw-orb__t--database { left: 14%; top: 22%; width: 17%; }
  .hw-orb__t--cloud { left: 39%; top: 4%; width: 20%; }
  .hw-orb__t--phone { left: 68%; top: 4%; width: 18%; }
  .hw-orb__t--globe { left: 37%; top: 30%; width: 29%; z-index: 1; background: linear-gradient(150deg, rgba(110,231,183,.42), rgba(0,178,107,.16) 55%, rgba(4,21,13,.4)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 60px -6px rgba(34,197,139,.75); }
  .hw-orb__t--globe::before { inset: 24%; background: #8FF5C9; }
  .hw-orb__t--nodes { left: 75%; top: 40%; width: 18%; }
  .hw-orb__t--code { left: 21%; top: 60%; width: 20%; z-index: 2; }
  .hw-orb__t--gear { left: 61%; top: 66%; width: 18%; z-index: 2; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hw-orb__t { animation: hw-bob 6s ease-in-out calc(var(--n) * -.85s) infinite; }
  .hw-orb__t--cloud { --n: 1; } .hw-orb__t--phone { --n: 2; } .hw-orb__t--globe { --n: 3; } .hw-orb__t--nodes { --n: 4; } .hw-orb__t--code { --n: 5; } .hw-orb__t--gear { --n: 6; }
  .hw-orb__dot { animation: hw-glow 3s ease-in-out infinite alternate; }
  .hw-orb__dot:nth-child(odd) { animation-delay: -1.5s; }
}
@keyframes hw-bob { 50% { transform: translateY(-8px); } }
@keyframes hw-glow { to { opacity: .45; } }
@media (min-width: 1200px) { .hw-track { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); } .hw-track__facts { flex-wrap: nowrap; } .hw-track__facts li { white-space: nowrap; } }

/* quotes carousel: deep green card, bold mark, soft arcs; chevron controls */
.hw-page .hw-q { padding: 68px var(--hw-pad-lg) var(--hw-pad-lg); background: radial-gradient(420px 260px at 100% 100%, rgba(0, 178, 107, .3), transparent 70%), linear-gradient(135deg, #0A3726, #04150D 65%); }
.hw-page .hw-q::before { top: 8px; left: 20px; font-size: 104px; font-style: italic; font-weight: 800; color: #22C58B; }
.hw-q::after { content: ""; position: absolute; right: -90px; bottom: -190px; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(110, 231, 183, .22); background: radial-gradient(circle at 30% 30%, rgba(0, 178, 107, .32), transparent 62%); pointer-events: none; }
.hw-q blockquote, .hw-q figcaption { position: relative; z-index: 1; }
.hw-page .hw-q figcaption { color: rgba(255, 255, 255, .62); }
@media (min-width: 768px) { .hw-page .hw-q { padding: 76px var(--hw-pad-lg) var(--hw-pad-lg) 96px; } .hw-page .hw-q::before { top: 14px; left: 44px; font-size: 128px; } }
.hw-car.is-on .hw-car__track { display: grid; }
.hw-chev { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("../img/how-we-work/icon-chevron.svg") center / contain no-repeat; mask: url("../img/how-we-work/icon-chevron.svg") center / contain no-repeat; }
.hw-chev--l { transform: scaleX(-1); }
.hw-mi--box { --ico: url("../img/how-we-work/icon-box.svg"); }
.hw-mi--bag { --ico: url("../img/how-we-work/icon-bag.svg"); }
.hw-mi--chart { --ico: url("../img/how-we-work/icon-chart.svg"); }
.hw-mi--cap { --ico: url("../img/how-we-work/icon-cap.svg"); }
.hw-mi--doc { --ico: url("../img/how-we-work/icon-doc.svg"); }

/* free resources (08): head with document art, PDF bar, dark PDF cards, resource cards with a footer rule */
.hw-page .hw-freesec { background: radial-gradient(640px 400px at 88% 0%, rgba(0, 178, 107, .08), transparent 70%), #fff; }
.hw-free__head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 24px; }
.hw-free__art { display: none; }
@media (min-width: 900px) { .hw-free__head { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } .hw-free__art { display: block; width: 100%; height: auto; margin: -32px 0 -16px; } }
.hw-page .hw-freesec .hw-sub--bar { display: flex; align-items: center; gap: 16px; margin: var(--hw-head-b) 0 var(--hw-sub-b); padding: 10px 20px 10px 10px; border-radius: var(--hw-r); background: #EEF8F2; font-size: 17px; line-height: 1.45; font-weight: 500; }
.hw-sub--bar .hw-mi { width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.hw-sub--bar .hw-mi::before { inset: 12px; }
.hw-pdf { position: relative; overflow: hidden; }
.hw-pdf::after { content: ""; position: absolute; right: 28px; bottom: -14px; width: 84px; height: 104px; border-radius: var(--hw-r-sm); border: 1px solid rgba(110, 231, 183, .2); background: url("../img/how-we-work/icon-estimate.svg") center / 36px no-repeat, linear-gradient(160deg, rgba(110, 231, 183, .16), rgba(110, 231, 183, .03)); box-shadow: -10px 8px 0 -2px rgba(110, 231, 183, .06); transform: rotate(12deg); opacity: .8; pointer-events: none; }
.hw-pdf__b { position: relative; z-index: 1; }
@media (max-width: 1023.98px) { .hw-pdf::after { display: none; } }
@media (min-width: 1024px) { .hw-pdf__b { padding-right: 64px; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .hw-res__c:last-child { grid-column: 1 / -1; } }
.hw-pdf__ico { width: 56px; height: 56px; border-radius: var(--hw-r-sm); background: rgba(0, 178, 107, .22); }
.hw-res__c { position: relative; overflow: hidden; gap: 6px; padding: var(--hw-pad); }
.hw-res__c > * { position: relative; z-index: 1; }
.hw-res__c::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(0, 178, 107, .1), rgba(0, 178, 107, .02) 70%); pointer-events: none; }
.hw-res__c:nth-child(n+4)::before { content: ""; position: absolute; right: 20px; bottom: 10px; width: 88px; height: 88px; background: var(--hw-green); opacity: .06; transform: rotate(-12deg); -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; pointer-events: none; }
.hw-res__c:nth-child(4) { --art: url("../img/how-we-work/icon-book.svg"); }
.hw-res__c:nth-child(5) { --art: url("../img/how-we-work/icon-layers.svg"); }
.hw-res__c .hw-res__top { margin-bottom: 6px; }
.hw-res__c h4 { margin-top: 2px; }
.hw-page .hw-res__c p { margin: 0 0 12px; }
.hw-res__go { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hw-line); }
@media (max-width: 767.98px) { .hw-toggle__b { min-height: 44px; } .hw-alt { display: inline-flex; align-items: center; min-height: 44px; } }