/* ==========================================================================
   HOW WE WORK — section#how-we-work (approved 2026-10-08: Solution 02 "Start With What You Have")
   Markup: how-we-work-section.php · Content: data/how-we-work.php · Behaviour: js/how-we-work.js
     ≥992    [ head: eyebrow + H2 | lead ]
             [ starting point · what to mention · CTA (grey) | three decisions: before / after order ]
     <992    one card: segmented choice → "Mention:" line → three compact decisions → CTA
   Measured (preview): 75% of 1440×900, 94% of 1366×768, 99% of 390×844; height locked across states.
   Palette: neutral greys/charcoal; teal only on the CTA, links and the selected choice; orange accents.
   Every rule is scoped under .hww / .hw2. Resets use :where(.hww) element (0,0,1): they beat Bootstrap
   reboot by order and lose to any component class.
   ========================================================================== */
.hww{
    --hw-ink:#17202a;
    --hw-body:#46505c;
    --hw-muted:#66707c;
    --hw-line:#e1e5e9;
    --hw-line-2:#d0d6dc;
    --hw-surface:#f5f6f7;
    --hw-surface-2:#eceff2;
    --hw-char:#1b2229;
    --hw-teal:var(--primary-color, #006b7a);
    --hw-teal-d:var(--primary-dark, #004a54);
    --hw-teal-t:#e8f2f3;
    --hw-or:var(--accent-color, #ff8a3d);
    --hw-or-d:#a24c0c;
    --hw-r:12px;
    --hw-shadow:0 1px 2px rgba(23,32,42,.04),0 10px 30px rgba(23,32,42,.07);
    position:relative;
    font-family:"Nunito",sans-serif;
    font-size:16px;
    line-height:1.5;
    color:var(--hw-body);
    background:#fff;
    -webkit-font-smoothing:antialiased;
    padding:46px 0;
}
:where(.hww) *, :where(.hww) *::before, :where(.hww) *::after{box-sizing:border-box;}
:where(.hww) h2, :where(.hww) h3, :where(.hww) h4, :where(.hww) p,
:where(.hww) ul, :where(.hww) ol, :where(.hww) dl, :where(.hww) dt, :where(.hww) dd,
:where(.hww) figure, :where(.hww) fieldset, :where(.hww) legend, :where(.hww) label{margin:0;padding:0;}
:where(.hww) ul, :where(.hww) ol{list-style:none;}
:where(.hww) fieldset{border:0;min-width:0;}
:where(.hww) h2, :where(.hww) h3, :where(.hww) h4{font-family:"Poppins","Nunito",sans-serif;color:var(--hw-ink);font-weight:700;}
:where(.hww) dt{font-weight:inherit;}
:where(.hww) button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;border-radius:0;}
:where(.hww) a{color:inherit;text-decoration:none;}
.hww [hidden]{display:none !important;}
.hww :focus-visible{outline:3px solid var(--hw-teal);outline-offset:2px;border-radius:8px;}
.hww .hww-i{width:20px;height:20px;flex:none;}
.hww-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Heading system — matches the live Capabilities / About sections */
.hww-eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 "Poppins",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#4a5560;}
.hww-eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--hw-or);}
.hww-title{font-weight:800;font-size:clamp(26px,2.6vw,37px);line-height:1.14;letter-spacing:-.018em;margin-top:12px;}
.hww-lead{font-size:clamp(15.5px,1.15vw,17px);line-height:1.6;color:var(--hw-muted);}
.hww-k{font:700 11.5px/1.25 "Poppins",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-muted);}

/* Buttons */
.hww-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:10px;font:700 16px/1.2 "Nunito",sans-serif;background:var(--hw-teal);color:#fff;border:0;transition:background .15s ease, transform .15s ease;}
.hww-btn:hover{background:var(--hw-teal-d);color:#fff;}
.hww-btn:active{transform:translateY(1px);}
.hww-btn .hww-i{width:18px;height:18px;}
.hww-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px;color:var(--hw-teal);min-height:44px;}
.hww-link:hover{color:var(--hw-teal-d);text-decoration:underline;text-underline-offset:3px;}
.hww-link .hww-i{width:16px;height:16px;}
.hww-tel{font-weight:800;color:var(--hw-ink);white-space:nowrap;}
.hww-tel:hover{color:var(--hw-teal);}

@media (max-width:767.98px){
    .hww{padding:32px 0;}
    .hww-title{font-size:25px;margin-top:10px;}
}
@media (prefers-reduced-motion:reduce){
    .hww *, .hww *::before, .hww *::after{transition:none !important;animation:none !important;}
}

/* ---------- Solution 02 layout ---------- */
.hw2{padding:44px 0;}
.hw2-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);gap:12px 48px;align-items:end;margin-bottom:20px;}
.hw2-head .hww-lead{padding-bottom:4px;}

.hw2-x{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"start path" "cta path";grid-template-rows:auto 1fr;border:1px solid var(--hw-line);border-radius:16px;overflow:hidden;box-shadow:var(--hw-shadow);background:#fff;}
.hw2-start{grid-area:start;padding:20px 22px 0;background:var(--hw-surface);}
.hw2-path{grid-area:path;padding:18px 24px 18px;}
.hw2-cta{grid-area:cta;display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px 16px;padding:14px 22px 18px;background:var(--hw-surface);}

/* starting-point options */
.hw2-opts__k{display:block;margin-bottom:10px;}
.hw2-opts__g{display:grid;gap:6px;}
.hw2-opt{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;min-height:46px;padding:8px 12px;border:1px solid var(--hw-line);border-radius:10px;background:rgba(255,255,255,.55);cursor:pointer;transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;}
.hw2-opt:hover{border-color:var(--hw-line-2);background:#fff;}
.hw2-opt__in{position:absolute;opacity:0;width:1px;height:1px;}
.hw2-opt__dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--hw-line-2);background:#fff;transition:border-color .15s ease, box-shadow .15s ease;}
.hw2-opt__t{display:flex;flex-direction:column;gap:1px;}
.hw2-opt__l{font:700 15px/1.3 "Poppins",sans-serif;color:var(--hw-ink);}
.hw2-opt__s{display:none;}
.hw2-opt small{display:none;}
.hw2-opt:has(.hw2-opt__in:checked){border-color:var(--hw-teal);background:#fff;box-shadow:inset 0 0 0 1px var(--hw-teal);}
.hw2-opt:has(.hw2-opt__in:checked) .hw2-opt__dot{border-color:var(--hw-teal);box-shadow:inset 0 0 0 4px #fff;background:var(--hw-teal);}
.hw2-opt:has(.hw2-opt__in:focus-visible){outline:3px solid var(--hw-teal);outline-offset:2px;}

/* what to mention — a note, not a form */
.hw2-note{margin-top:14px;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid var(--hw-line);}
.hw2-note__h{display:flex;align-items:flex-start;gap:9px;padding-bottom:9px;margin-bottom:8px;border-bottom:1px dashed var(--hw-line-2);}
.hw2-note__i{color:var(--hw-teal);margin-top:1px;}
.hw2-note__h > span:first-of-type{display:flex;flex-direction:column;}
.hw2-note__h b{font:700 14px/1.3 "Poppins",sans-serif;color:var(--hw-ink);}
.hw2-note__h small{font-size:12.5px;color:var(--hw-muted);}
.hw2-note__l{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;}
.hw2-line{display:grid;grid-template-columns:18px minmax(0,1fr);gap:7px;align-items:center;font-size:13.5px;line-height:1.3;min-height:22px;}
.hw2-line__ic{display:flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;}
.hw2-line__ic .hww-i{width:12px;height:12px;stroke-width:2.6;}
.hw2-line[data-state="have"] .hw2-line__ic{background:var(--hw-teal);color:#fff;}
.hw2-line[data-state="have"] .hw2-line__n,.hw2-line[data-state="ask"] .hw2-line__y{display:none;}
.hw2-line[data-state="have"] .hw2-line__t{color:var(--hw-ink);font-weight:700;}
.hw2-line[data-state="ask"] .hw2-line__ic{background:var(--hw-surface-2);color:var(--hw-muted);}
.hw2-line[data-state="ask"] .hw2-line__t{color:var(--hw-muted);}
.hw2-note__key{margin-left:auto;align-self:center;display:flex;flex-direction:row;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--hw-muted);white-space:nowrap;}
.hw2-note__key i{display:inline-flex;width:15px;height:15px;border-radius:50%;align-items:center;justify-content:center;}
.hw2-note__key i .hww-i{width:10px;height:10px;stroke-width:2.8;}
.hw2-k-y{background:var(--hw-teal);color:#fff;}
.hw2-k-n{background:var(--hw-surface-2);color:var(--hw-muted);margin-left:6px;}
.hw2-note__m{display:none;}

/* the three decisions */
.hw2-path__h{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:end;margin-bottom:10px;}
.hw2-path__h .hww-k{grid-column:1 / -1;margin-bottom:8px;}
.hw2-cols{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:16px;font:700 12px/1.2 "Nunito",sans-serif;color:var(--hw-muted);padding:0 14px;}
.hw2-grp{border-radius:12px;padding:6px 14px 4px;}
.hw2-grp + .hw2-grp{margin-top:10px;}
.hw2-grp--a{border:1px solid var(--hw-line);}
.hw2-grp--b{background:var(--hw-surface);}
.hw2-grp__row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hw2-grp__k{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--hw-muted);margin:6px 0 2px;}
.hw2-grp__k span{font:700 11px/1 "Poppins",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--hw-surface-2);color:var(--hw-ink);}
.hw2-grp--b .hw2-grp__k span{background:var(--hw-char);color:#fff;}
.hw2-mv{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 14px;padding:10px 0;}
.hw2-mv + .hw2-mv{border-top:1px solid var(--hw-line);}
.hw2-mv__n{grid-row:1 / 3;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 14px/1 "Poppins",sans-serif;background:var(--hw-ink);color:#fff;}
.hw2-mv--commit .hw2-mv__n{background:var(--hw-or);}
.hw2-grp--b .hw2-mv__n{background:#fff;color:var(--hw-ink);box-shadow:inset 0 0 0 1.5px var(--hw-line-2);}
.hw2-mv__t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:16px;line-height:1.3;}
.hw2-mv__dec{display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1.2 "Nunito",sans-serif;color:var(--hw-or-d);background:#fff1e4;padding:3px 8px;border-radius:999px;}
.hw2-mv__io{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.hw2-mv__io dt{display:none;}
.hw2-mv__io dd{font-size:14.5px;line-height:1.45;color:var(--hw-body);}
.hw2-mv__get dd{color:var(--hw-ink);}

.hw2-after{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;padding:9px 0 9px 44px;border-top:1px solid var(--hw-line-2);}
.hw2-after__l{display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;font-weight:700;color:var(--hw-body);}
.hw2-after__l li{display:inline-flex;align-items:center;}
.hw2-after__l li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hw-line-2);margin:0 10px;}
.hw2-after__more{min-height:44px;font-size:14.5px;flex:none;}

/* CTA */
.hw2-cta__btn{flex:1 1 auto;}
.hw2-cta__alt{font-size:14.5px;color:var(--hw-muted);}
.hw2-cta__r{flex-basis:100%;display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--hw-muted);}
.hw2-cta__r .hww-i{width:17px;height:17px;color:var(--hw-or);}

@media (max-width:1399.98px){
    .hw2-after{display:none;}
}
@media (max-width:1199.98px){
    .hw2-x{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
    .hw2-note__l{grid-template-columns:1fr;}
    .hw2-note__key{display:none;}
    .hw2-mv__io{grid-template-columns:1fr;gap:4px;}
    .hw2-mv__io dt{display:inline;font-weight:800;color:var(--hw-ink);font-size:13px;}
    .hw2-mv__io > div{display:block;}
    .hw2-mv__io dt::after{content:": ";}
    .hw2-mv__io dd{display:inline;font-size:14px;}
    .hw2-cols{display:none;}
    .hw2-after{padding-left:0;}
}

/* below 992: one card — choice → mention → three decisions → CTA */
@media (max-width:991.98px){
    .hw2-head{grid-template-columns:1fr;gap:8px;margin-bottom:18px;}
    .hw2-x{display:flex;flex-direction:column;border-radius:14px;}
    .hw2-start{padding:14px 14px 12px;}
    .hw2-opts__k{margin-bottom:8px;}
    .hw2-opts__g{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--hw-surface-2);}
    .hw2-opt{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px;border:0;background:none;text-align:center;}
    .hw2-opt:hover{background:rgba(255,255,255,.5);}
    .hw2-opt__dot,.hw2-opt__l,.hw2-opt small{display:none;}
    .hw2-opt__s{display:block;font:700 13.5px/1.2 "Poppins",sans-serif;color:var(--hw-muted);}
    .hw2-opt:has(.hw2-opt__in:checked){background:#fff;box-shadow:0 1px 3px rgba(23,32,42,.12);border:0;}
    .hw2-opt:has(.hw2-opt__in:checked) .hw2-opt__s{color:var(--hw-ink);}
    .hw2-note{margin-top:10px;padding:0;border:0;background:none;}
    .hw2-note__h,.hw2-note__l{display:none;}
    .hw2-note__m{display:block;font-size:14px;line-height:1.45;color:var(--hw-body);}
    .hw2-note__m [data-hw2-mention]{font-weight:800;color:var(--hw-ink);}
    .hw2-path{padding:4px 14px 2px;flex:1 0 auto;}
    .hw2-path__h{display:none;}
    .hw2-grp{padding:0;border:0;background:none;border-radius:0;}
    .hw2-grp + .hw2-grp{margin-top:0;border-top:1px solid var(--hw-line);}
    .hw2-grp__k{display:none;}
    .hw2-grp__row{display:contents;}
    .hw2-grp--b{display:flex;flex-direction:column;}
    .hw2-grp--b .hw2-mvs{order:1;}
    .hw2-grp--b .hw2-after__more{order:2;align-self:flex-start;margin:-6px 0 4px 40px;}
    .hw2-mv{grid-template-columns:28px minmax(0,1fr);gap:2px 12px;padding:10px 0;}
    .hw2-mv__n{width:28px;height:28px;font-size:13px;}
    .hw2-mv__t{font-size:15px;}
    .hw2-mv__you{display:none !important;}
    .hw2-mv__io dt{font-size:12.5px;}
    .hw2-mv__io dd{font-size:13.5px;}
    .hw2-mv__io > div{font-size:13.5px;line-height:1.42;}
    .hw2-mv--commit .hw2-mv__t::after{content:"";}
    .hw2-mv__dec{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
    .hw2-after{display:none;}
    .hw2-after__more{font-size:14px;}
    .hw2-cta{padding:12px 14px 16px;border-top:1px solid var(--hw-line);}
    .hw2-cta__btn{flex-basis:100%;}
    .hw2-cta{gap:8px 12px;justify-content:space-between;}
    .hw2-cta__alt{order:3;font-size:14px;}
    .hw2-cta__r{flex-basis:auto;order:2;font-size:13px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .hw2-cta__btn{flex-basis:auto;flex-grow:0;}
}
@media (max-width:575.98px){
    .hw2-xs-hide{display:none;}
    .hw2-head .hww-lead{font-size:15px;}
}
@media (max-width:359.98px){
    .hw2-opt__s{font-size:12.5px;}
    .hw2-cta__r,.hw2-cta__alt{flex-basis:100%;justify-content:center;text-align:center;}
}