/* /how-consultations-work: the two formats of the Bespoke Personal Brand Consultation and Strategy,
   Virtual and In Person, side by side in one switch (Isaac, 2026-10-22). Without JavaScript both
   formats read in full, one after the other; the switch only hides the format not chosen. */

/* ---------- the switch ---------- */
.fmt-switch{display:none;}
.js .fmt-switch{display:inline-flex;border:1px solid var(--ink);margin:0 0 clamp(36px,4vw,52px);max-width:100%;}
.fmt-switch button{appearance:none;border:0;border-radius:0;background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:18px clamp(20px,3vw,40px);min-height:56px;transition:background .3s var(--ease),color .3s var(--ease);}
.fmt-switch button + button{border-left:1px solid var(--ink);}
.fmt-switch button span{display:block;font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-label);margin-top:4px;transition:color .3s var(--ease);}
.fmt-switch button[aria-selected="true"]{background:var(--ink);color:var(--white);}
.fmt-switch button[aria-selected="true"] span{color:var(--platinum);}
.fmt-switch button:hover:not([aria-selected="true"]){box-shadow:inset 0 -3px 0 var(--ink);}
.fmt-switch button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media (max-width:560px){.js .fmt-switch{display:flex;width:100%}.fmt-switch button{flex:1 1 50%;padding:16px 12px}}

/* ---------- a format ---------- */
.fmt-panel + .fmt-panel{margin-top:clamp(72px,8vw,110px);padding-top:clamp(48px,6vw,72px);border-top:1px solid var(--rule-light);}
.js .fmt-panel + .fmt-panel{margin-top:0;padding-top:0;border-top:0;}
.fmt-panel[hidden]{display:none !important;}
.fmt-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(30px,4vw,44px);}
.fmt-head h3{font-family:var(--display);font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:10px 0 16px;}
.fmt-head p{color:var(--ink-body);margin:0;}
.fmt-best{border-left:2px solid var(--ink);padding:4px 0 4px 20px;}
.fmt-best b{display:block;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-label);margin-bottom:8px;}
.fmt-best p{font-size:15px;line-height:1.7;}
@media (max-width:860px){.fmt-head{grid-template-columns:1fr;align-items:start}}

.fmt-sub{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-label);
  margin:clamp(48px,5vw,64px) 0 20px;}
.fmt-panel .stats{margin-top:0;}

/* ---------- your workload, phase by phase ---------- */
.wl{border-top:1px solid var(--ink);}
.wl-row{display:grid;grid-template-columns:minmax(120px,.55fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:clamp(18px,3vw,40px);
  padding:24px 0;border-bottom:1px solid var(--rule-light);}
.wl-row.wl-headrow{padding:14px 0;}
.wl-headrow span{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-label);}
.wl-phase b{display:block;font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.wl-phase span{display:block;font-size:13px;color:var(--ink-label);margin-top:4px;line-height:1.5;}
.wl-row ul{list-style:none;margin:0;padding:0;}
.wl-row li{position:relative;padding-left:18px;font-size:15px;line-height:1.65;color:var(--ink-body);}
.wl-row li + li{margin-top:8px;}
.wl-row li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--ink);}
.wl-cell-label{display:none;}
@media (max-width:760px){
  .wl-row{grid-template-columns:1fr;gap:14px}
  .wl-headrow{display:none !important}
  .wl-cell-label{display:block;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-label);margin-bottom:8px;}
}

/* ---------- good to know ---------- */
.fmt-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);border-top:1px solid var(--rule-light);}
.fmt-notes p{margin:0;padding:18px 0;border-bottom:1px solid var(--rule-light);font-size:15px;line-height:1.7;color:var(--ink-body);}
.fmt-notes p b{color:var(--ink);font-weight:600;}
@media (max-width:760px){.fmt-notes{grid-template-columns:1fr}}

.fmt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(36px,4vw,48px);}
.fmt-cta .fine{margin:0;max-width:52ch;}

/* ---------- we do, you do ---------- */
.dwy .cell-list li{color:var(--platinum);}

/* ---------- the brand audit in numbers, on ink ---------- */
.audit-bands{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule-dark);margin-top:28px;}
.audit-bands span{flex:1 1 150px;background:var(--ink);padding:16px 18px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--platinum);}
.audit-bands span em{display:block;font-style:normal;font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--steel);margin-top:4px;}

/* ---------- the home page and the rest of the site: two formats, one call to action ---------- */
.fmt-cards .cell h3 a{text-decoration:none;}
.fmt-cards .cell h3 a:hover,.fmt-cards .cell h3 a:focus-visible{text-decoration:underline;text-underline-offset:4px;}
.fmt-cards .cell .btn{margin-top:26px;}

/* ---------- /certified-partners ---------- */
.partner-cell{position:relative;}
.partner-seal{position:absolute;top:clamp(24px,3vw,38px);right:clamp(24px,3vw,38px);width:72px;height:72px;}
.badge-show{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;}
.badge-show img{width:min(180px,40%);height:auto;}
.badge-show .badge-lockup{width:min(440px,100%);}

@media print{.fmt-switch{display:none !important}.fmt-panel[hidden]{display:block !important}}

/* ---------- the standard: both sides, all in (Isaac, 2026-10-23) ---------- */
.hc-commit{margin:0;display:flex;flex-direction:column;align-items:center;gap:26px;}
.hc-donut{width:min(300px,72vw);height:auto;display:block;overflow:visible;}
.hc-donut circle{fill:none;stroke-width:26;transition:stroke-dashoffset 1.4s var(--ease),opacity .6s var(--ease);}
.hc-donut .d1{stroke:var(--ink);}
.hc-donut .d2{stroke:var(--platinum);}
.hc-donut-big{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em;fill:var(--ink);}
.hc-donut-small{font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.24em;fill:var(--ink-label);}
.hc-commit-key{display:grid;gap:14px;width:100%;max-width:420px;}
.hc-key{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start;}
.hc-key b{display:block;font-family:var(--display);font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.hc-key span{font-size:14.5px;line-height:1.6;color:var(--ink-body);}
.hc-swatch{display:inline-block;width:14px;height:14px;margin-top:3px;}
.hc-swatch.d1{background:var(--ink);}
.hc-swatch.d2{background:var(--platinum);}
.js .hc-commit:not(.in) circle,.js .hc-pillars:not(.in) circle{opacity:0;}

/* ---------- your team: who carries what ---------- */
.hc-flow{display:flex;flex-direction:column;align-items:stretch;}
.hc-node{border:1px solid var(--rule-light);background:var(--white);padding:16px 18px;display:flex;flex-direction:column;gap:4px;}
.hc-node-k{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
.hc-node-v{font-size:14.5px;line-height:1.55;color:var(--ink-body);}
.hc-node-firm{border-color:var(--ink);}
.hc-node-you{background:var(--ink);border-color:var(--ink);}
.hc-node-you .hc-node-k{color:var(--white);}
.hc-node-you .hc-node-v{color:var(--platinum);}
.hc-link{position:relative;height:54px;display:flex;align-items:center;padding-left:34px;}
.hc-link::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;background:var(--ink);}
.hc-link::after{content:"";position:absolute;left:14px;bottom:0;border-top:7px solid var(--ink);border-left:4.5px solid transparent;border-right:4.5px solid transparent;}
.hc-link span{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-label);}
.hc-team-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.hc-team-row .hc-node{border-style:dashed;border-color:var(--ink-label);}
@media (max-width:640px){.hc-team-row{grid-template-columns:minmax(0,1fr);}}

/* ---------- the brand audit's weights, on ink ---------- */
.hc-pillars{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;margin-top:clamp(40px,5vw,60px);}
.hc-donut-ink .hc-donut-big{fill:var(--white);}
.hc-donut-ink .hc-donut-small{fill:var(--steel);}
.hc-donut-ink .p1,.hc-swatch.p1{stroke:#FFFFFF;background:#FFFFFF;}
.hc-donut-ink .p2,.hc-swatch.p2{stroke:#C8C5BE;background:#C8C5BE;}
.hc-donut-ink .p3,.hc-swatch.p3{stroke:#8E8B84;background:#8E8B84;}
.hc-donut-ink .p4,.hc-swatch.p4{stroke:#5E5C57;background:#5E5C57;}
.hc-donut-ink .p5,.hc-swatch.p5{stroke:#3B3A37;background:#3B3A37;}
.hc-swatch.p5{outline:1px solid #5E5C57;}
.hc-pillars-h{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--platinum);margin-bottom:16px;}
.hc-pillar-key{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark);}
.hc-pillar-key li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule-dark);}
.hc-pillar-key .hc-swatch{margin-top:0;}
.hc-pk{font-family:var(--display);font-size:15px;font-weight:600;color:var(--white);}
.hc-pv{font-family:var(--display);font-size:18px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums;}
@media (max-width:760px){.hc-pillars{grid-template-columns:minmax(0,1fr);justify-items:center;}.hc-pillars > div{width:100%;}}
@media (prefers-reduced-motion:reduce){.hc-donut circle{transition:none;}}

/* ---------- /certified-partners: the report form ---------- */
.form .opt{font-weight:400;letter-spacing:0;text-transform:none;opacity:.75;}
.form label.check{display:flex;align-items:center;gap:12px;cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:15px;font-weight:400;color:var(--ink-body);}
.form label.check input{-webkit-appearance:checkbox;appearance:auto;width:20px;height:20px;min-height:0;padding:0;margin:0;border:0;background:none;accent-color:var(--ink);flex:0 0 auto;}