:root {
  /* Workbliss palette: orange and charcoal, on white */
  --orange: #F26239; --orange-deep: #C8451F; --charcoal: #1C1A19; --charcoal-deep: #0F0E0D; --cream: #FFFFFF;
  --accent: var(--orange); --accent-ink: var(--orange-deep); --accent-bright: var(--orange); --accent-soft: #FDE4DB; --accent-tint: #FFF4EF;
  --ink: var(--charcoal); --ink-deep: var(--charcoal-deep); --body: #3A3532; --muted: #6E6862; --stone: #F7F4F1; --line: #E9E4DF; --white: #FFFFFF;
  --on-dark: #EAE6E2; --on-dark-muted: #BDB6AF; --dark-line: #3A3532;
  /* Sage and sunshine: the colored bands */
  --sage: #FCE8DF; --sage-deep: #C8451F; --sun: #F26239;
  --band-warm: url(/assets/world-dots.svg?v=8393efdd) right -4% top 24px / min(900px, 62%) auto no-repeat,
    radial-gradient(900px 520px at 88% 0%, rgba(242,98,57,.26), transparent 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(242,98,57,.12), transparent 60%), #1C1A19;
  --r: 20px; --wrap: 2000px; --gutter: max(18px, calc(100% / 12));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }
body { margin: 0; background: var(--cream); color: var(--body); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-optical-sizing: auto; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
p { margin: 0; }
/* Content spans 10 of 12 columns: one column of space on each side. */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 8px; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.brand { display: block; text-decoration: none; }
.brand svg { height: 25px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 1400px) { .nav { gap: 16px; } .nav a { font-size: 14.5px; } .nav .nav-member { padding-left: 16px; } .nav .btn { padding: 12px 16px; font-size: 14.5px; } }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-ink); }
.nav .nav-member { display: inline-flex; align-items: center; gap: 8px; padding-left: 22px; border-left: 1px solid var(--line); }
.nav .nav-member svg { color: var(--accent-ink); }
/* Sign in (a quiet link) and Sign up free (an outlined pill) before Plan my program (Margaret, October 18) */
.nav .btn.nav-signup { margin-left: -8px; padding: 10.5px 18px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.nav .btn.nav-signup:hover { background: var(--ink); color: #fff; }
.is-member .nav .nav-signup, .is-member .menu-signup { display: none; }
@media (max-width: 1400px) { .nav .btn.nav-signup { padding: 10.5px 15px; margin-left: -4px; } }
/* Offer markup that switches on a date (see OFFER_JS): the later version stays hidden until then */
[data-from][hidden] { display: none !important; }
/* Signed in: the member's initial in an orange circle, with "Signed in as …" on hover */
.nav-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--ink); font-style: normal; font-size: 13px; font-weight: 800; line-height: 1; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1; padding: 16px 24px; border-radius: 999px; border: 2px solid var(--ink); transition: background .15s, color .15s, border-color .15s; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-white:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav .btn { padding: 12px 18px; font-size: 15px; color: #fff; }
.nav .btn:hover { color: #fff; }
.menu { display: none; }

/* Shared */
section { padding: clamp(64px, 9vw, 112px) 0 0; }
.eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 16px; }
.h2 { font-weight: 900; font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 48px; margin-bottom: 40px; }
.ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-ink); display: grid; place-items: center; flex: none; }

/* Hero */
.hero { padding-top: clamp(40px, 6vw, 76px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.hero h1 { font-weight: 900; font-size: clamp(2.7rem, 5.1vw, 4.15rem); line-height: .98; letter-spacing: -.04em; text-wrap: pretty; }
.hero h1 em { display: block; font-style: normal; color: var(--accent-bright); }
.lead { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.5; max-width: 34em; margin-top: 24px; color: var(--body); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 36px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.facts li b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.facts li span { font-size: 14.5px; color: var(--muted); }
.hero-art { position: relative; background: var(--ink); border-radius: 28px; padding: 34px 30px; min-height: 470px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.hero-art::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; border: 56px solid rgba(255,255,255,.07); right: -150px; top: -150px; }
.hero-art::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.06); left: -90px; bottom: -110px; }
.moment { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 18px 40px -18px rgba(20, 18, 17, .28); }
.moment:nth-child(2) { margin-left: 34px; }
.moment .ic { width: 48px; height: 48px; }
.moment small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.moment b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.25; margin-top: 2px; }
.moment span:not(.ic) { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

/* Home hero with photo */
.hero-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; }
.hero-top .lead { margin-top: 0; }
.hero-top .facts { margin-top: 28px; }
.hero-pic { position: relative; margin-top: clamp(36px, 4.5vw, 56px); }
.hero-pic img { display: block; width: 100%; height: auto; border-radius: 28px; background: var(--stone); }
.hero-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; }
.hero-cards .moment { box-shadow: none; border: 1px solid var(--line); align-items: start; text-decoration: none; transition: border-color .15s; }
.hero-cards .moment:hover { border-color: var(--accent); }
.hero-cards .moment .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-style: normal; font-size: 14px; font-weight: 800; color: var(--ink); }
.hero-cards .moment:hover .go { color: var(--accent-ink); }
.hero-cards .moment:nth-child(2) { margin-left: 0; }


.clients { margin-top: clamp(56px, 7vw, 84px); padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients-in { display: flex; align-items: center; gap: 18px 40px; }
.clients-in .eyebrow { margin: 0; color: var(--muted); flex: none; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; }
.logos li { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #8C857E; white-space: nowrap; }

/* What we do */
.offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { border-radius: var(--r); padding: 34px 32px 32px; background: var(--stone); display: flex; flex-direction: column; }
.card .tag { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--accent); color: var(--ink); margin-bottom: 22px; }
.card h3 { font-weight: 900; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.04; letter-spacing: -.03em; }
.card > p { margin-top: 14px; font-size: 17px; }
.card .list { margin-top: 18px; display: grid; gap: 10px; }
.card .list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.card .list svg { color: var(--accent-ink); margin-top: 2px; }
.card .more { margin-top: auto; padding-top: 26px; font-weight: 800; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.card .more:hover { color: var(--accent-ink); }
.card.feature { grid-column: 1 / -1; background: var(--ink); color: var(--on-dark); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head list" "more list"; gap: 0 56px; padding: 44px 44px 40px; }
.card.feature .f-head { grid-area: head; }
.card.feature .list { grid-area: list; }
.card.feature .more { grid-area: more; align-self: start; }
.card.feature h3 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.card.feature .f-head p { margin-top: 16px; font-size: 18px; color: var(--on-dark); }
.card.feature .list { grid-template-columns: 1fr 1fr; gap: 12px 26px; margin-top: 4px; align-content: start; }
.card.feature .list svg { color: var(--accent); }
.card.feature .more { color: #fff; }
.card.feature .more:hover { color: var(--accent); }
.big-num { font-size: clamp(3.4rem, 7vw, 5rem); font-weight: 900; letter-spacing: -.06em; line-height: .9; color: var(--accent-ink); margin-top: 18px; }
.brochure { margin-top: auto; padding-top: 26px; }
.brochure-in { background: #fff; border-radius: 16px; padding: 22px 22px 20px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.brochure b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.brochure p { margin-top: 4px; font-size: 15.5px; color: var(--body); }
.brochure a { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 800; color: var(--accent-ink); text-decoration: none; }
.brochure a:hover { text-decoration: underline; }
.card .brochure + .more { margin-top: 0; padding-top: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li, .tags li { font-size: 14px; font-weight: 700; padding: 8px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); }

/* Why */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.why-item { border-top: 3px solid var(--ink); padding-top: 22px; }
.why-item h3 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin-top: 18px; }
.why-item p { margin-top: 8px; font-size: 16px; color: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.steps li { position: relative; background: var(--stone); border-radius: var(--r); padding: 28px 24px 30px; }
.steps .num { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 19px; }
.steps p { margin-top: 22px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -14px; width: 10px; height: 10px; border-top: 3px solid var(--accent-ink); border-right: 3px solid var(--accent-ink); transform: rotate(45deg); z-index: 1; }

/* Who */
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.group { border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; }
.group h3 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 18px 0 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { background: var(--stone); border-color: transparent; }

/* Proof */
.award { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: center; background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: var(--r); padding: 26px 30px; margin-bottom: 18px; }
.award .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.award p { font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 700; color: var(--ink); line-height: 1.45; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quote { margin: 0; background: var(--stone); border-radius: var(--r); padding: 26px 28px 28px; display: flex; flex-direction: column; }
.qmark { font-size: 64px; line-height: .8; font-weight: 900; color: var(--accent-bright); height: 34px; }
.quote blockquote { margin: 14px 0 0; }
.quote blockquote p { font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.quote figcaption { margin-top: auto; padding-top: 22px; font-size: 14.5px; line-height: 1.4; }
.quote figcaption b { display: block; color: var(--ink); }
.quote figcaption span { color: var(--muted); }

/* Platform band */
.platform { margin-top: clamp(64px, 9vw, 112px); padding: 0; }
.platform-in { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); border-radius: 28px; padding: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 28px 56px; align-items: end; }
.platform-in::after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; border: 70px solid rgba(242, 98, 57, .16); }
.platform-in > * { position: relative; z-index: 1; }
.platform .eyebrow { color: var(--accent); }
.platform h2 { color: #fff; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.platform h2 em { font-style: normal; color: var(--accent); }
.platform p { margin-top: 18px; font-size: 18px; max-width: 36em; }
.platform .btn { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.platform .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.platform-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; text-decoration: none; }
.text-link:hover { color: var(--accent); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.faq-grid > div > p { margin-top: 16px; color: var(--muted); max-width: 26em; }
.faq-grid > div > p a { color: var(--accent-ink); font-weight: 700; }
.faq-grid details { border-bottom: 1px solid var(--line); }
.faq-grid details:first-of-type { border-top: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; }
summary::-webkit-details-marker { display: none; }
summary h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.pm { width: 30px; height: 30px; border-radius: 50%; background: var(--stone); position: relative; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
details[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
details p { padding: 0 52px 24px 0; font-size: 17px; }

/* Closing */
.closing { margin-top: clamp(64px, 9vw, 112px); padding: 0; }
.closing-in { background: var(--ink); border-radius: 28px; padding: clamp(40px, 6vw, 76px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 36px 56px; align-items: center; position: relative; overflow: hidden; }
.closing-in::after { content: ""; position: absolute; left: -80px; bottom: -140px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.06); }
.closing-in > * { position: relative; z-index: 1; }
.closing h2 { color: #fff; font-weight: 900; font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1; letter-spacing: -.038em; }
.closing .btn-white { margin-top: 30px; }
.closing h2 + p { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.74); }
.news { background: #fff; border-radius: var(--r); padding: 28px; }
.news h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.news p { margin-top: 8px; font-size: 16px; color: var(--muted); }
.news .btn { margin-top: 18px; width: 100%; white-space: nowrap; padding-left: 16px; padding-right: 16px; }

/* Footer */
.site-foot { margin-top: clamp(64px, 9vw, 112px); background: var(--ink); color: var(--on-dark-muted); padding: 56px 0 40px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-foot .brand svg { height: 28px; }
.site-foot p { margin-top: 16px; max-width: 30em; line-height: 1.55; }
.site-foot h2 { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.site-foot ul { display: grid; gap: 9px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--dark-line); font-size: 13.5px; }

/* Responsive */
/* The menu folds into the round button once the links no longer fit on one line. */
@media (max-width: 1279px) {
  .nav > a:not(.btn), .nav > .nav-signup { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { padding: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); justify-content: center; }
  .menu summary span { width: 18px; height: 2px; background: var(--ink); position: relative; display: block; }
  .menu summary span::before, .menu summary span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
  .menu summary span::before { top: -6px; } .menu summary span::after { top: 6px; }
  .menu[open] .menu-panel { display: grid; }
  .menu-panel { display: none; position: absolute; right: 0; top: 56px; width: min(320px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.25); }
  .menu-panel a { display: block; text-decoration: none; font-weight: 700; color: var(--ink); padding: 13px 14px; border-radius: 12px; }
  .menu-panel a:hover { background: var(--stone); }
}
@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: 1fr; margin: 14px 0 0; gap: 10px; }
  .hero-pic img { border-radius: 20px; }
  .hero h1 { font-size: clamp(2.7rem, 7.4vw, 4.15rem); }
  .hero-art { min-height: 0; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li::after { display: none; }
  .groups, .quotes { grid-template-columns: 1fr; }
  .faq-grid, .closing-in, .platform-in { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .clients-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .nav .btn { display: none; }
  .hero-pic img { border-radius: 16px; }
  .offer { grid-template-columns: 1fr; }
  .card.feature { grid-template-columns: 1fr; grid-template-areas: "head" "list" "more"; padding: 32px 26px; }
  .card.feature .list { margin-top: 22px; }
  .card.feature .list { grid-template-columns: 1fr; }
  .card { padding: 30px 24px 28px; }
  .facts { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .facts li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .facts li b { font-size: 22px; }
  .facts li span { font-size: 15px; }
  .steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 20px; }
  .steps p { margin-top: 0; font-size: 19px; }
  .platform-in::after { width: 260px; height: 260px; border-width: 46px; right: -110px; top: -120px; }
  .brochure-in { grid-template-columns: 1fr; gap: 12px; }
  .moment:nth-child(2) { margin-left: 0; }
  .hero-art { padding: 22px 18px; border-radius: 22px; }
  .why, .steps { grid-template-columns: 1fr; }
  .award { grid-template-columns: 1fr; }
  .logos li { font-size: 17px; }
  .foot-grid { grid-template-columns: 1fr; }
  details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Home video hero (full width) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vhero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: clamp(56px, 7vw, 96px) 0;
  min-height: clamp(560px, calc(100svh - 157px), 880px); background: var(--charcoal-deep); color: #fff; }
.vhero-media { position: absolute; inset: 0; z-index: -2; }
.vhero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vhero-cover { position: absolute; inset: 0; z-index: 1; background: var(--charcoal-deep) 70% 30% / cover no-repeat; transition: opacity .35s ease; }
.vhero.is-playing .vhero-cover { opacity: 0; }
.vhero-poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: 0; transition: opacity .5s ease; }
.vhero.is-fallback .vhero-poster { opacity: 1; }
.vhero.is-playing .vhero-poster { opacity: 0; }
/* YouTube background: scaled to cover the hero like a photo, underneath the still image, which fades away once it plays. */
.vhero-yt { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; pointer-events: none; background: var(--charcoal-deep); }
.vhero-yt iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%) scale(1.15); border: 0; }
/* Light overlay: the video already has its own darkening. The still image is darkened separately, for when the video can't play. */
/* Dark overlay over the video (and the still), strongest behind the words on the left, so white text always reads clearly,
   whatever the brightness of the footage. */
.vhero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,13,12,.84) 0%, rgba(14,13,12,.72) 38%, rgba(14,13,12,.5) 68%, rgba(14,13,12,.36) 100%),
              linear-gradient(0deg, rgba(14,13,12,.35) 0%, rgba(14,13,12,0) 45%); }
.vhero-in { width: 100%; }
.vhero-copy { max-width: 1320px; }
/* The promise sits small on top; the rotating value proposition is the big, white headline. */
.vhero h1 { color: #fff; font-weight: 800; font-size: clamp(1.45rem, 2.2vw, 2.15rem); line-height: 1.2; letter-spacing: -.02em; }
.vhero h1 em { font-style: normal; color: var(--accent); }
.vhero-rotor { margin-top: clamp(28px, 3.2vw, 46px); }
.rotor-pre { display: block; font-size: clamp(1.25rem, 1.9vw, 1.85rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--accent); }
.rotor { display: block; margin-top: 8px; min-height: 2.06em; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.03;
  color: #fff; text-wrap: balance; transition: opacity .28s ease, transform .28s ease; }
.rotor.out { opacity: 0; transform: translateY(.35em); }
.vhero .cta-row { margin-top: clamp(28px, 3.2vw, 46px); }
.btn-orange { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-orange:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.vhero + .clients { margin-top: 0; border-top: 0; }
.glance { padding-top: clamp(28px, 3.5vw, 44px); padding-bottom: clamp(48px, 6vw, 80px); }
.glance .hero-cards { margin: 0; }
@media (max-width: 760px) {
  .vhero { min-height: 0; padding: 56px 0 84px; }
  .vhero::before { background: linear-gradient(0deg, rgba(14,13,12,.78) 0%, rgba(14,13,12,.62) 100%); }
  .vhero-poster { object-position: 72% 30%; }
  .vhero h1 { font-size: 1.2rem; text-wrap: balance; }
  .rotor { min-height: 3.09em; font-size: clamp(1.6rem, 8.6vw, 2.5rem); }
  .vhero .cta-row .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .rotor, .vhero-poster, .vhero-cover { transition: none; } }
/* Band header: icon, rule and a button, above a band's heading */
.band-top { display: flex; align-items: center; gap: 22px; margin-bottom: clamp(32px, 4vw, 52px); }
.band-mark { width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 10px 30px -18px rgba(28, 26, 25, .4); }
.band-rule { flex: 1; border-top: 1.5px dashed rgba(28, 26, 25, .25); }
.band-top .btn { flex: none; }
@media (max-width: 600px) { .band-rule { display: none; } .band-top { justify-content: space-between; } }
/* Colored bands between sections */
/* Dark band: light text for the band's own heading area; cards inside keep their own colors */
.band-warm .eyebrow { color: var(--accent); }
.band-warm .sec-head .h2, .band-warm .sec-head h2 { color: #fff; }
.band-warm .sec-head .lead, .band-warm .sec-head p { color: #CFC7BF; }
.band-warm .band-rule { border-color: rgba(255,255,255,.22); }
.band-warm .band-top .btn-line { color: #fff; border-color: rgba(255,255,255,.8); }
.band-warm .band-top .btn-line:hover { background: #fff; color: var(--ink); }
.band-warm .band-mark { box-shadow: none; }
.band { margin-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }
.band-warm { background: var(--band-warm); }
.band-stone { background: var(--stone); }
.band + .band { margin-top: 0; }
.band-stone .steps li, .band-stone .quote, .band-stone .flow li, .band-stone .theme, .band-stone .year > li { background: #fff; }
/* Testimonials: one featured quote, two beside it */
.proof .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof .quote { padding: clamp(26px, 3vw, 40px); }
.proof .quote blockquote p { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; }
.proof .quote-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 18px 56px; align-items: end; }
.proof .quote-lead .qmark { grid-column: 1 / -1; }
.proof .quote-lead blockquote { margin: 0; }
.proof .quote-lead blockquote p { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.28; }
.proof .quote-lead figcaption { padding: 0 0 6px; border-left: 3px solid var(--accent); padding-left: 18px; }
@media (max-width: 1060px) { .proof .quote-lead { grid-template-columns: 1fr; } .proof .quote-lead figcaption { padding-top: 6px; } }
@media (max-width: 720px) { .proof .quotes { grid-template-columns: 1fr; } }
/* Everything we deliver: the full service list, grouped */
.svc-cols { column-count: 4; column-gap: clamp(28px, 3vw, 48px); }
.svc { break-inside: avoid; padding-bottom: 34px; }
.svc h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--accent); }
.svc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.svc li { font-size: 15.5px; line-height: 1.4; color: var(--body); }
@media (max-width: 1280px) { .svc-cols { column-count: 3; } }
@media (max-width: 1060px) { .svc-cols { column-count: 2; } }
@media (max-width: 600px) {
  .svc-cols { column-count: 1; }
  .svc { padding-bottom: 26px; }
  .svc ul { display: block; }                       /* phones: each group reads as one short paragraph */
  .svc li { display: inline; font-size: 15px; line-height: 1.55; }
  .svc li:not(:last-child)::after { content: " / "; color: var(--accent); font-weight: 700; }
}

/* Split section heading: title left, short intro right */
.split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px 64px; align-items: end; }
.split-head .lead { margin: 0; }
@media (max-width: 1060px) { .split-head { grid-template-columns: 1fr; } }

/* Area carousel */
.car { position: relative; margin-top: 8px; }
.car-view { overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 0 8px; }
.car-track { display: flex; column-gap: 22px; padding: 0 var(--gutter); }
.car.is-on .car-view { overflow: hidden; }
.car.is-on .car-track { padding: 0; will-change: transform; }
.area { flex: 0 0 clamp(270px, 25vw, 380px); scroll-snap-align: center; background: #fff; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -36px rgba(28, 26, 25, .45); transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease, filter .45s ease; cursor: pointer; }
.car.is-on .area { opacity: .55; transform: scale(.93); }
.band-warm .car.is-on .area { opacity: 1; filter: brightness(.5) saturate(.8); }
.band-warm .car.is-on .area.is-active { filter: none; }
.car.is-on .area.is-active { opacity: 1; transform: none; box-shadow: 0 34px 70px -34px rgba(28, 26, 25, .55); cursor: default; }
.area-vis { position: relative; height: clamp(170px, 14vw, 210px); display: grid; place-items: center; overflow: hidden; }
.area-vis::before, .area-vis::after { content: ""; position: absolute; border-radius: 50%; }
.area-vis::before { width: 260px; height: 260px; right: -70px; top: -110px; }
.area-vis::after { width: 160px; height: 160px; left: -50px; bottom: -80px; }
.tone-light .area-vis { background: linear-gradient(160deg, #FBF8F5, #EFE8E1); }
.tone-light .area-vis::before { background: rgba(242, 98, 57, .14); } .tone-light .area-vis::after { background: rgba(28, 26, 25, .06); }
.tone-ember .area-vis { background: linear-gradient(160deg, #F7845F, #E5532B); }
.tone-ember .area-vis::before { background: rgba(255, 255, 255, .18); } .tone-ember .area-vis::after { background: rgba(28, 26, 25, .14); }
.tone-ink .area-vis { background: linear-gradient(160deg, #2A2725, #1C1A19); }
.tone-ink .area-vis::before { background: rgba(242, 98, 57, .22); } .tone-ink .area-vis::after { background: rgba(255, 255, 255, .06); }
.area-ic { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: #fff; color: var(--sage-deep); box-shadow: 0 16px 34px -18px rgba(28, 26, 25, .5); }
.tone-ink .area-ic { background: var(--accent); color: #fff; }
.area-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; text-align: center; }
.area-body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 1.7vw, 1.6rem); line-height: 1.15; letter-spacing: -.012em; }
.area-body p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.area-more { margin: auto auto 0; padding: 18px 0 2px; background: none; border: 0; font: inherit; font-weight: 800; font-size: 15.5px; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.area-more:hover { color: var(--sage-deep); }
.car:not(.is-on) .car-ctl { display: none; }
.car-ctl { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.car-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(28, 26, 25, .5); }
.car-btn:hover { background: var(--ink); color: #fff; }
.car-btn span { display: grid; place-items: center; }
.car-pause .i-play, .car-pause.is-paused .i-pause { display: none; }
.car-pause.is-paused .i-play { display: grid; }
@media (max-width: 720px) { .area { flex-basis: 78vw; } .car-track { column-gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .area, .car-track { transition: none !important; } }

/* Area details */
.area-dlg { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 28px; padding: clamp(26px, 4vw, 48px); color: var(--body); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .5); }
.area-dlg::backdrop { background: rgba(28, 26, 25, .55); backdrop-filter: blur(3px); }
.dlg-x { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--stone); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dlg-x:hover { background: var(--ink); color: #fff; }
.dlg-head { display: flex; align-items: center; gap: 18px; padding-right: 48px; }
.dlg-head .area-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--sage); box-shadow: none; flex: none; }
.dlg-head .eyebrow { margin: 0 0 6px; color: var(--sage-deep); }
.dlg-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; color: var(--ink); }
.dlg-value { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--body); }
.dlg-cols { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px 40px; }
.dlg-cols h4 { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--ink); margin-bottom: 12px; }
.dlg-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dlg-cols li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15.5px; color: var(--ink); }
.dlg-cols li svg { color: var(--sage-deep); margin-top: 2px; }
.dlg-formats { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.dlg-formats li { display: inline-block; background: var(--sage); color: var(--sage-deep); font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 999px; }
.dlg-note { margin-top: 16px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.dlg-more { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--sage); font-size: 15px; line-height: 1.5; color: var(--ink); }
.dlg-more a { color: var(--sage-deep); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dlg-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) { .dlg-cols { grid-template-columns: 1fr; } .area-dlg { border-radius: 22px; } }

/* Why HR teams choose us */
.why2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.why-intro { position: sticky; top: 110px; }
.why-intro .lead { margin-top: 20px; }
.why-intro .btn { margin-top: 30px; }
.why-list { list-style: none; margin: 0; padding: 0; }
.why-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 28px 0; border-top: 1px solid var(--line); }
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--sage); color: var(--sage-deep); display: grid; place-items: center; }
.why-list li:nth-child(2n) .why-ic { background: var(--ink); color: #fff; }
.why-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.012em; color: var(--ink); }
.why-list p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 36em; }
@media (max-width: 1060px) { .why2 { grid-template-columns: 1fr; } .why-intro { position: static; } }

/* Strip under the hero: charcoal cards that stand out on white */
.glance .hero-cards { gap: 12px; }
.glance .moment { background: var(--ink); border-color: var(--ink); border-radius: 20px; padding: 22px 22px 20px; grid-template-columns: 48px minmax(0, 1fr); }
.glance .moment:hover { border-color: var(--accent); transform: translateY(-2px); }
.glance .moment { transition: border-color .15s, transform .2s; }
.glance .moment .ic { background: var(--accent); color: #fff; }
.glance .moment small { color: var(--accent); }
.glance .moment b { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin-top: 4px; }
.glance .moment span:not(.ic) { color: #BDB6AF; font-size: 14.5px; margin-top: 6px; }
.glance .moment .go { color: #fff; }
.glance .moment:hover .go { color: var(--accent); }

/* What is Workbliss? */
/* What is Workbliss: a one-line answer, then four challenges HR teams bring us, each with how we help */
.what-is-head { align-items: end; }
.what-is .h2 { max-width: 12ch; }
.what-is-lead { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.5; color: var(--ink); max-width: 34em; }
.wi-grid { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto; gap: 0 18px; }
.wi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; border-radius: 24px; overflow: hidden; position: relative;
  box-shadow: 0 24px 44px -34px rgba(28,26,25,.55); opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .3s; transition-delay: calc(var(--i) * .12s); }
.wi-grid.is-in .wi { opacity: 1; transform: none; }
.wi:hover { box-shadow: 0 30px 50px -30px rgba(28,26,25,.6); }
.wi-q { background: var(--stone); padding: 26px 26px 34px; }
.wi-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--accent-ink); margin-bottom: 20px; }
.wi small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wi-q h3 { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.65vw, 1.6rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.wi-arrow { position: relative; z-index: 1; height: 0; }
/* The round arrow between challenge and answer: a round span (not the icon itself), so it stays round in every browser. */
.wi-dot { position: absolute; left: 26px; top: -21px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; box-shadow: 0 0 0 5px #fff; }
.wi-dot svg { display: block; }
.wi-a { background: var(--ink); padding: 36px 26px 28px;
  background: radial-gradient(320px 200px at 100% 100%, rgba(242,98,57,.22), transparent 70%), var(--ink); }
.wi-a small { color: var(--accent); }
.wi-a p { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: #F3EFEB; }
.wi-foot { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; }
.wi-foot p { font-family: var(--serif); font-size: clamp(1.15rem, 1.4vw, 1.3rem); line-height: 1.4; color: var(--ink); }
.what-is-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.what-is-link:hover { color: var(--accent-ink); }
@media (max-width: 1180px) { .wi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 18px; } .wi { margin-bottom: 18px; } .wi-foot { margin-top: 12px; } }
@media (max-width: 640px) {
  .wi-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .wi { display: block; margin-bottom: 0; }
  .wi-q { padding: 22px 20px 30px; } .wi-a { padding: 32px 20px 24px; }
  .wi-arrow { display: block; } .wi-dot { left: 20px; }
}
@media (prefers-reduced-motion: reduce) { .wi { opacity: 1; transform: none; transition: none; } }

/* Three ways: image cards; the one you point at widens and shows its details */
.ways { display: flex; gap: 12px; height: clamp(460px, 34vw, 620px); }
.way { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--ink); color: #fff; text-decoration: none;
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1); }
.way img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.way::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,14,13,.9) 0%, rgba(15,14,13,.5) 34%, rgba(15,14,13,0) 62%); }
.way-text { position: absolute; z-index: 1; left: clamp(22px, 2.2vw, 34px); right: clamp(22px, 2.2vw, 34px); bottom: clamp(22px, 2.2vw, 32px); display: block; }
.way small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.way b { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.012em; color: #fff; max-width: 16em; }
.way-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s ease, opacity .35s ease; }
.way-more .wm { overflow: hidden; min-height: 0; display: block; }
.way-more .wd { display: block; padding-top: 10px; font-size: 16.5px; line-height: 1.5; color: #E9E4DF; max-width: 30em; }
.way-more em { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-style: normal; font-weight: 700; color: #fff; }
.way:hover .way-more, .way:focus-visible .way-more { grid-template-rows: 1fr; opacity: 1; }
.way:hover img, .way:focus-visible img { transform: scale(1.04); }
@media (hover: hover) and (min-width: 1061px) {
  .ways:hover .way, .ways:focus-within .way { flex-grow: .85; }
  .ways .way:hover, .ways .way:focus-visible { flex-grow: 1.9; }
}
@media (hover: none), (max-width: 1060px) { .way-more { grid-template-rows: 1fr; opacity: 1; } }
/* Tablets and phones: picture on top, words underneath, so they never sit on top of each other */
@media (max-width: 1060px) {
  .ways { flex-direction: column; height: auto; gap: 14px; }
  .way { flex: none; display: flex; flex-direction: column; }
  .way img { position: relative; height: clamp(220px, 52vw, 380px); }
  .way::after { display: none; }
  .way-text { position: relative; left: auto; right: auto; bottom: auto; padding: 22px 24px 26px; }
}
@media (prefers-reduced-motion: reduce) { .way, .way img, .way-more { transition: none; } }

/* How it works: a route with numbered stops */
/* "How it works": the route. A dark band; white cards hang beneath their stations and open one by one. */
.band-route { position: relative; overflow: hidden; color: var(--on-dark);
  background: radial-gradient(760px 460px at 0% 100%, rgba(242,98,57,.22), transparent 64%),
              radial-gradient(520px 340px at 100% 0%, rgba(242,98,57,.10), transparent 60%), #1C1A19; }
.band-route .eyebrow { color: var(--accent); }
.band-route .sec-head .h2 { color: #fff; }
.band-route .sec-head .lead { color: #CFC7BF; }
.rt { --node: 54px; position: relative; margin-top: 8px; }
.rt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto auto; gap: 0 clamp(14px, 1.6vw, 24px); }
.rt-line { position: absolute; z-index: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 7px, transparent 7px 14px); }
.rt.is-vert .rt-line { background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 7px, transparent 7px 14px); }
.rt-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 0; transform: scaleX(0); box-shadow: 0 0 14px rgba(242,98,57,.55); }
.rt.is-vert .rt-fill { transform: scaleY(0); transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.rt:not(.js) .rt-fill { transform: none; }
/* the light: a bright streak with a glowing head, moved along the route by JavaScript */
.rt-comet { position: absolute; top: 50%; left: 0; width: 150px; height: 4px; margin: -2px 0 0 -150px; border-radius: 4px; opacity: 0; will-change: transform;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9)); }
.rt-comet::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(242,98,57,.35), 0 0 22px 6px rgba(242,98,57,.75); }
.rt.is-vert .rt-comet { top: 0; left: 50%; width: 4px; height: 110px; margin: -110px 0 0 -2px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9)); }
.rt.is-vert .rt-comet::after { right: auto; left: 50%; top: auto; bottom: -6px; margin: 0 0 0 -6px; }
/* each step lines up with its neighbours: labels, titles, text and "you get" all sit on the same lines */
.rt-step { position: relative; z-index: 1; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
.rt-node { width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center; position: relative;
  background: #1C1A19; border: 2px solid rgba(255,255,255,.28); color: rgba(255,255,255,.6); font-family: var(--serif); font-size: 23px;
  transition: background .5s, color .5s, border-color .5s, transform .5s cubic-bezier(.3,1.6,.5,1), box-shadow .5s; }
.rt-step.on .rt-node, .rt:not(.js) .rt-node { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); box-shadow: 0 0 0 6px rgba(242,98,57,.16); }
.rt-node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.rt-node.shine { animation: rt-shine 1.1s cubic-bezier(.2,.7,.3,1); }
.rt-node.shine::after { animation: rt-ring 1.1s ease-out; }
@keyframes rt-shine {
  0% { background: var(--accent); color: #fff; }
  18% { background: #fff; color: var(--accent-ink); border-color: #fff; transform: scale(1.24); box-shadow: 0 0 0 7px rgba(255,255,255,.25), 0 0 40px 12px rgba(242,98,57,.7); }
  100% { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.06); box-shadow: 0 0 0 6px rgba(242,98,57,.16); }
}
@keyframes rt-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
/* the stem the card hangs from, then the card unfolds downwards */
.rt-stem { justify-self: start; margin-left: calc(var(--node) / 2 - 1px); width: 2px; height: 30px; background: var(--accent); transform-origin: top; transform: scaleY(0); transition: transform .35s ease; }
.rt-step.on .rt-stem, .rt:not(.js) .rt-stem { transform: none; }
.rt-card { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; position: relative; background: #fff; color: var(--body);
  border-radius: 20px; padding: 22px 22px 20px; box-shadow: 0 34px 60px -34px rgba(0,0,0,.75);
  clip-path: inset(-14px -60px 100% -60px); opacity: .001; transform: translateY(-10px);
  transition: clip-path .75s cubic-bezier(.2,.8,.2,1) .2s, opacity .3s ease .2s, transform .75s cubic-bezier(.2,.8,.2,1) .2s; }
.rt-step.on .rt-card, .rt:not(.js) .rt-card { clip-path: inset(-14px -60px -90px -60px); opacity: 1; transform: none; }
.rt-card::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 7px); top: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.rt-card small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.rt-card h3 { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.55vw, 1.55rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.rt-card p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
.rt-get { margin-top: 16px; align-self: stretch; display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--accent-tint);
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.rt-get svg { flex: none; margin-top: 1px; color: var(--accent-ink); }
.rt-trust { margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 48px); }
.rt-trust > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.rt-ti { width: 48px; height: 48px; border-radius: 14px; background: rgba(242,98,57,.16); color: var(--accent); display: grid; place-items: center; }
.rt-trust h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; color: #fff; }
.rt-trust p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: #BDB6AF; }
@media (max-width: 1180px) {
  .rt-steps { grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; }
  .rt-step { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); grid-template-rows: none; grid-row: auto; gap: 0 18px; align-items: start; }
  .rt-stem { display: none; }
  .rt-card { grid-row: auto; display: block; transform: translateX(-10px); clip-path: inset(-60px 100% -90px -14px); }
  .rt-step.on .rt-card { clip-path: inset(-60px -60px -90px -14px); }
  .rt-card::before { left: -6px; top: calc(var(--node) / 2 - 7px); }
  .rt-get { display: inline-flex; }
  .rt-trust { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .rt { --node: 44px; } .rt-node { font-size: 19px; } .rt-card { padding: 18px 16px 16px; } .rt-step { gap: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .rt-node, .rt-card, .rt-stem, .rt-fill { transition: none; } .rt-node.shine, .rt-node.shine::after { animation: none; } .rt-comet { display: none; } }

/* Proof: a bold orange band — big numbers on rules, a charcoal award plaque, and the lead quote in charcoal */
.band-ember { background: var(--accent); color: var(--ink); }
.band-ember .eyebrow { color: var(--ink); }
.band-ember .sec-head .h2 { color: var(--ink); }
.proof-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; }
.band-ember .award { margin: 0; background: var(--ink); border: 0; border-radius: 22px; padding: 22px 26px; grid-template-columns: 56px minmax(0, 1fr); gap: 18px;
  box-shadow: 0 30px 50px -34px rgba(60,20,0,.7); }
.band-ember .award .ic { width: 56px; height: 56px; background: var(--accent); color: #fff; }
.band-ember .award p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.4; color: #F3EFEB; }
.band-ember .stats { gap: 0 clamp(24px, 4vw, 64px); margin: clamp(8px, 1vw, 16px) 0 clamp(48px, 6vw, 80px); }
.band-ember .stat { background: none; box-shadow: none; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.band-ember .stat b { font-size: clamp(2.8rem, 4.3vw, 4.6rem); letter-spacing: -.03em; color: var(--ink); }
.band-ember .stat span { margin-top: 12px; font-size: 16.5px; color: #2B1A12; max-width: 24em; }
.band-ember .quote { background: #fff; box-shadow: 0 30px 50px -36px rgba(60,20,0,.6); }
.band-ember .quote-lead { background: var(--ink); }
.band-ember .quote-lead blockquote p { color: #fff; }
.band-ember .quote-lead figcaption b { color: #fff; }
.band-ember .quote-lead figcaption span { color: #BDB6AF; }
@media (max-width: 1060px) { .proof-head { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .band-ember .stats { gap: 28px; } }

/* Industries we work with: pick an industry on the left, see what we bring on the right */
.ind-x { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: space-between; }
.ind-list button { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 14px; border: 0; border-radius: 12px; background: none;
  text-align: left; font-family: var(--serif); font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.2; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.ind-list button:hover { color: var(--ink); background: var(--stone); }
.ind-list button[aria-selected=true] { color: var(--ink); background: var(--stone); }
.ind-list button[aria-selected=true]::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent); transform: rotate(45deg); }
.ind-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--stone); color: var(--accent-ink); transition: background .2s, color .2s; }
.ind-list button:hover .ind-i, .ind-list button[aria-selected=true] .ind-i { background: var(--accent); color: #fff; }
/* The panel is exactly as tall as the list: every panel shares one space, the tallest sets the height */
.ind-panels { display: grid; }
.ind-p { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(30px, 3.4vw, 48px); color: #fff; display: flex; flex-direction: column;
  background: linear-gradient(90deg, #1C1A19 0%, rgba(28,26,25,.94) 50%, rgba(28,26,25,.55) 100%),
    url(/assets/world-dots.svg?v=8393efdd) right -12% bottom -10% / 95% auto no-repeat,
    radial-gradient(600px 380px at 100% 0%, rgba(242,98,57,.32), transparent 62%), #1C1A19; }
.ind-p + .ind-p { margin-top: 16px; }
/* The dark box stays put; only what's inside it changes, with a soft crossfade (no flash of white between industries). */
.ind-x.js .ind-panels { position: relative; overflow: hidden; border-radius: 28px;
  background: linear-gradient(90deg, #1C1A19 0%, rgba(28,26,25,.94) 50%, rgba(28,26,25,.55) 100%),
    url(/assets/world-dots.svg?v=8393efdd) right -12% bottom -10% / 95% auto no-repeat,
    radial-gradient(600px 380px at 100% 0%, rgba(242,98,57,.32), transparent 62%), #1C1A19; }
.ind-x.js .ind-p { grid-area: 1 / 1; margin: 0; background: none; border-radius: 0; visibility: hidden; opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s; }
.ind-x.js .ind-p.on { visibility: visible; opacity: 1; transition: opacity .35s ease .08s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .ind-x.js .ind-p, .ind-x.js .ind-p.on { transition: none; } }
@keyframes ind-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ind-top { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 22px; align-items: start; }
.ind-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.ind-p h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.ind-c { margin-top: 10px; font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.5; color: #E9E4DF; max-width: 32em; }
.ind-p h4 { margin-top: 28px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ind-b { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.ind-b li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; color: #fff; }
.ind-b svg { color: var(--accent); margin-top: 2px; }
.ind-s ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ind-s li { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 16px 14px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(2px); }
.ind-s li b { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.25; color: #fff; }
.ind-s li span { font-size: 13px; color: #BDB6AF; }
.ind-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; }
.ind-all svg { width: 16px; height: 16px; color: var(--accent); transition: transform .2s; }
.ind-all:hover { color: var(--accent); } .ind-all:hover svg { transform: translateX(3px); }
.ind-end { margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ind-cl { flex: 1 1 100%; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; color: #BDB6AF; }
.ind-cl b { color: #fff; font-weight: 700; }
.ind-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.ind-go:hover { color: var(--accent); }
@media (max-width: 1060px) {
  .ind-x { grid-template-columns: 1fr; }
  .ind-x.js .ind-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .ind-x.js .ind-list::-webkit-scrollbar { display: none; }
  .ind-x.js .ind-list li { flex: none; }
  .ind-x.js .ind-list button { white-space: nowrap; font-size: 16px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); }
  .ind-x.js .ind-list button[aria-selected=true]::after { display: none; }
  .ind-x.js .ind-i { width: 30px; height: 30px; border-radius: 9px; }
  .ind-s ul { grid-template-columns: 1fr; gap: 8px; }
  .ind-s li { flex-direction: row; align-items: baseline; flex-wrap: wrap; padding: 12px 14px; }
}
@media (max-width: 640px) { .ind-b { grid-template-columns: 1fr; } .ind-top { grid-template-columns: 1fr; gap: 16px; } }

/* Proof numbers */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.stat { background: #fff; border-radius: var(--r); padding: 30px 30px 28px; box-shadow: inset 0 4px 0 var(--accent); }
.stat b { display: block; white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 3.3vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--body); max-width: 22em; }
@media (max-width: 1060px) and (min-width: 761px) { .stat { padding: 26px 22px 24px; } .stat b { font-size: clamp(2rem, 4.4vw, 2.6rem); } }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ind-x.js .ind-p.on { animation: none; } }


/* ---- What is Workbliss: its own section, heading and answer side by side, and a bold "today / next" strip */
.band-whatis { background: radial-gradient(900px 480px at 92% -10%, rgba(242, 98, 57, .12), transparent 65%),
  radial-gradient(700px 420px at -5% 110%, rgba(242, 98, 57, .08), transparent 60%), linear-gradient(180deg, #FBF6F2 0%, #F6EEE7 100%); }
.band-whatis { padding-bottom: clamp(56px, 7vw, 96px); }
.band-whatis .wi-q { background: #fff; }
.band-whatis .wi-ic { background: var(--accent-tint); }
.wi-head { display: grid; grid-template-columns: auto minmax(0, 36em); gap: 20px clamp(32px, 4.5vw, 64px); align-items: center; justify-content: start; }
.wi-head .h2 { max-width: 9ch; margin: 0; }
.wi-head .what-is-lead { border-left: 3px solid var(--accent); padding-left: clamp(18px, 2vw, 28px); }
.wi-next { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 18px 26px;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 36px); border-radius: 24px; color: #fff;
  background: radial-gradient(600px 240px at 100% 0%, rgba(242, 98, 57, .38), transparent 70%), radial-gradient(500px 200px at 0% 100%, rgba(242, 98, 57, .16), transparent 70%), var(--ink);
  box-shadow: 0 30px 60px -40px rgba(28, 26, 25, .7); }
.wi-now { display: flex; align-items: center; gap: 14px; }
.wi-now p { font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; color: #fff; }
.wi-tag { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; padding: 6px 12px; }
/* Next is labeled the same way as Today (an outline, in orange), so neither reads as a button; a thin line separates them */
.wi-tag-next { color: #FF8A63; border-color: rgba(242, 98, 57, .6); }
.wi-sep { align-self: stretch; width: 1px; background: rgba(255, 255, 255, .16); }
.wi-next .btn { white-space: nowrap; }
@media (max-width: 1060px) {
  .wi-head { grid-template-columns: 1fr; } .wi-head .h2 { max-width: none; }
  .wi-next { grid-template-columns: 1fr; } .wi-sep { width: auto; height: 1px; } .wi-next .btn { justify-self: start; }
}

/* ---- Proof: dark, with a slow glowing aurora and glass cards */
.band-aurora { position: relative; overflow: hidden; isolation: isolate; color: #F3EFEB; background: #131110; }
.band-aurora::before { content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
  background: radial-gradient(38% 46% at 16% 22%, rgba(242, 98, 57, .55), transparent 70%), radial-gradient(34% 42% at 86% 30%, rgba(200, 69, 31, .5), transparent 70%),
    radial-gradient(44% 48% at 58% 96%, rgba(255, 138, 99, .3), transparent 70%);
  filter: blur(24px); animation: aurora 24s ease-in-out infinite alternate; }
.band-aurora::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent); }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.08); } 100% { transform: translate3d(-4%, 3%, 0) scale(1.02); } }
.band-aurora .eyebrow { color: #FF8A63; }
.band-aurora .sec-head .h2 { color: #fff; }
.band-aurora .award { margin: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 20px 24px;
  grid-template-columns: 56px minmax(0, 1fr); gap: 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.band-aurora .award .ic { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #FF8A63, #C8451F); color: #fff; box-shadow: 0 0 34px rgba(242, 98, 57, .55); }
.band-aurora .award p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.4; color: #F3EFEB; }
.band-aurora .stats { gap: 16px; margin: clamp(28px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); }
.band-aurora .stat { position: relative; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); padding: 28px 28px 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.band-aurora .stat::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #FF8A63, transparent); }
.band-aurora .stat b { font-size: clamp(2.6rem, 3.6vw, 3.9rem); letter-spacing: -.03em; color: #fff;
  background: linear-gradient(180deg, #FFFFFF 35%, #FFB89E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.band-aurora .stat span { margin-top: 12px; font-size: 16px; color: #CFC7BF; }
.band-aurora .quote { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.band-aurora .quote blockquote p { color: #F3EFEB; }
.band-aurora .quote figcaption b { color: #fff; }
.band-aurora .quote figcaption span { color: #BDB6AF; }
.band-aurora .quote-lead { background: linear-gradient(135deg, rgba(242, 98, 57, .24), rgba(255, 255, 255, .04) 60%); border-color: rgba(255, 138, 99, .35); }
.band-aurora .quote-lead blockquote p { color: #fff; }
@media (max-width: 760px) { .band-aurora .stats { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .band-aurora::before { animation: none; } }

/* Workbliss glow: an ember-and-sand sunrise behind a section (no pinks), with faint ripples moving out from its center.
   Place the center with --gx / --gy and the soft blush wash with --wx / --wy. It fades out before the section ends, so there's never a hard edge. */
@property --ripple { syntax: '<length>'; initial-value: 0px; inherits: false; }
.glow { position: relative; isolation: isolate; overflow: hidden; --gx: 80%; --gy: 38%; --wx: 6%; --wy: 18%; }
.glow::before, .glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 55%, transparent 100%); }
.glow::before {
  background:
    radial-gradient(32% 44% at var(--gx) var(--gy), rgba(242, 98, 57, .28), transparent 72%),
    radial-gradient(36% 48% at calc(var(--gx) + 6%) calc(var(--gy) - 22%), rgba(255, 200, 160, .6), transparent 74%),
    radial-gradient(58% 70% at var(--wx) var(--wy), rgba(250, 230, 210, .9), transparent 70%),
    radial-gradient(52% 62% at 46% 92%, rgba(255, 214, 186, .7), transparent 72%);
  transform-origin: var(--gx) var(--gy); animation: glowDrift 16s ease-in-out infinite alternate; }
.glow::after {
  background: repeating-radial-gradient(circle at var(--gx) var(--gy), transparent 0, transparent var(--ripple),
    rgba(242, 98, 57, .2) var(--ripple), rgba(242, 98, 57, .2) calc(var(--ripple) + 1px), transparent calc(var(--ripple) + 1px), transparent 64px);
  -webkit-mask-image: radial-gradient(40% 56% at var(--gx) var(--gy), #000 15%, transparent 82%); mask-image: radial-gradient(40% 56% at var(--gx) var(--gy), #000 15%, transparent 82%);
  animation: ripple 7s linear infinite; }
@keyframes glowDrift { from { transform: translate3d(0, 0, 0) scale(1); opacity: .9; } to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.07); opacity: 1; } }
@keyframes ripple { to { --ripple: 64px; } }
@media (prefers-reduced-motion: reduce) { .glow::before, .glow::after { animation: none; } }
@media (max-width: 760px) { .glow { --gx: 82%; --gy: 22%; } }

/* Video testimonial (Vimeo): the video beside a short introduction; stacked on smaller screens */
.vt { margin: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: center;
  background: #fff; border-radius: 26px; padding: clamp(14px, 1.6vw, 20px); box-shadow: 0 30px 60px -40px rgba(28, 26, 25, .35); }
.vt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--ink); }
.vt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vt-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.vt-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s ease; }
.vt-play:hover img, .vt-play:focus-visible img { transform: scale(1.025); filter: brightness(1.08); }
.vt-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Story page: Vimeo's player under our thumbnail; clicks go through to the player, so it plays with sound */
.vt-live .vt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease, filter .3s ease; }
.vt-live:hover .vt-poster { filter: brightness(1.08); }
.vt-live .vt-poster.off { opacity: 0; visibility: hidden; }
.vt-live:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.vt-cap { padding: 8px clamp(4px, 1vw, 16px) 8px 0; }
.vt-h { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1.15; letter-spacing: -.012em; color: var(--ink); }
.vt-cap p { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.vt-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14.5px; font-weight: 700; color: var(--accent-ink); }
.proof .vt { margin: clamp(26px, 3vw, 40px) 0; }
/* The card on the homepage and pricing page links to the client story page (the video plays there) */
.vt-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.vt-link .vt-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s ease; }
.vt-link .vt-meta svg { transition: transform .2s ease; }
.vt-link:hover { transform: translateY(-2px); box-shadow: 0 36px 70px -40px rgba(28, 26, 25, .45); }
.vt-link:hover .vt-frame img { transform: scale(1.025); filter: brightness(1.08); }
.vt-link:hover .vt-meta svg { transform: translateX(4px); }
.vt-link:hover .vt-meta { text-decoration: underline; text-underline-offset: 3px; }
.vt-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { .vt, .vt-link { grid-template-columns: 1fr; } .vt-cap { padding: 4px 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .vt-link, .vt-link .vt-frame img, .vt-link .vt-meta svg { transition: none; } .vt-link:hover { transform: none; } }

.nav-dd { position: relative; }
.dd-b { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.dd-b svg { color: var(--muted); transition: transform .2s ease, color .2s; }
.nav-dd:hover .dd-b, .nav-dd.on .dd-b, .dd-b[aria-expanded="true"] { color: var(--accent-ink); }
.nav-dd:hover .dd-b svg, .dd-b[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--accent-ink); }
.dd-p { position: absolute; left: 50%; top: calc(100% + 12px); width: 390px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(28, 26, 25, .35); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 40; }
.dd-p::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd:hover .dd-p, .nav-dd:focus-within .dd-p, .dd-b[aria-expanded="true"] + .dd-p { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .dd-i { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; white-space: normal; text-decoration: none; }
.nav .dd-i:hover, .nav .dd-i[aria-current="page"] { background: #FFF4EF; }
.dd-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF1EC; color: var(--accent-ink); }
.nav .dd-i:hover .dd-ic { background: var(--accent); color: #fff; }
.dd-i b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.dd-i small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.menu-panel .menu-h { margin: 14px 14px 2px !important; padding: 0; font-size: 11.5px; font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-panel .menu-h:first-child { margin-top: 6px !important; }
.menu-panel { max-height: calc(100vh - 96px); overflow-y: auto; }
.menu-panel a.menu-sub { padding-left: 30px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--body) !important; }
/* Mega menus (MEGA): a wide card under the header, with columns and a picture card */
.nav-dd.mega { position: static; }
.dd-p.mg { position: absolute; left: 50%; top: calc(100% - 6px); width: min(1200px, calc(100vw - 48px)); padding: 28px 28px 26px; border-radius: 22px; }
.dd-p.mg::before { top: -22px; height: 22px; }
.mg-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, .95fr); gap: 8px 22px; }
.mg-in.two { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(250px, .95fr); }
.mg-col { display: flex; flex-direction: column; min-width: 0; }
.nav a.mg-h { display: flex; align-items: center; gap: 6px; margin: 0 12px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav a.mg-h svg { opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.nav a.mg-h:hover { color: var(--accent-ink); }
.nav a.mg-h:hover svg { opacity: 1; transform: none; }
.mg-col .dd-i { padding: 8px 12px; }
.mg-col .dd-ic { width: 36px; height: 36px; border-radius: 11px; }
.mg-col .dd-i { grid-template-columns: 36px minmax(0, 1fr); }
.mg-list { list-style: none; margin: 0; padding: 0 0 0 0; display: grid; gap: 2px; }
.mg-col.wide .mg-list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.nav .mg-list a { display: block; padding: 7px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: normal; }
.nav .mg-list a:hover { background: #FFF4EF; color: var(--accent-ink); }
.nav a.mg-more { display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 0; font-size: 14px; font-weight: 800; color: var(--accent-ink); }
.nav a.mg-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav a.mg-feat { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--ink); color: #fff; white-space: normal; }
.mg-feat img { display: block; flex: none; width: 100%; height: auto; max-width: none; transition: transform .4s ease; }
.mg-feat.fill img { flex: 1 1 auto; height: 100px; min-height: 150px; object-fit: cover; object-position: 50% 45%; }
.nav a.mg-feat:hover img { transform: scale(1.03); }
.mg-ft { display: block; padding: 16px 18px 18px; }
.mg-ft small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FF8A63; }
.mg-ft b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; color: #fff; }
.mg-ft span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: #CFC7BF; }
.mg-ft i { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-style: normal; font-size: 13.5px; font-weight: 800; color: #fff; }
@media (max-width: 1279px) { .nav .nav-dd { display: none; } }

.offer-bar { position: relative; z-index: 21; background: var(--ink); color: #EAE6E2; font-size: 14px; line-height: 1.4; }
.offer-bar .ob-in { display: flex; align-items: center; justify-content: center; gap: 8px 14px; min-height: 44px; padding: 8px 44px; flex-wrap: wrap; text-align: center; }
.offer-bar .ob-tag { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.offer-bar b { color: #fff; font-weight: 800; }
.offer-bar .ob-left { color: #FF8A63; font-weight: 700; white-space: nowrap; }
.offer-bar a.ob-go { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; white-space: nowrap; }
.offer-bar a.ob-go:hover { text-decoration-color: var(--accent); }
.offer-bar .ob-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: #BDB6AF; font-size: 20px; line-height: 1; cursor: pointer; }
.offer-bar .ob-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.offer-bar .ob-short { display: none; }
@media (max-width: 860px) { .offer-bar .ob-long { display: none; } .offer-bar .ob-short { display: inline; } .offer-bar .ob-in { gap: 6px 10px; font-size: 13.5px; } }

/* Serif headlines */
:root { --serif: "Newsreader", "Iowan Old Style", Georgia, serif; }
.h2, .hero h1, .vhero h1, .card h3, .platform h2, .closing h2, .rotor, .global h2, .case h2, .p-hero h1, .mom h3,
.plan-copy h1, .q legend, .qdone h2, .tabpanel h3, .legal h2, .su-card h2, .big-num, .facts li b, .glance > b, .qmark,
.services .h2, .award p, .quote blockquote p {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; font-optical-sizing: auto; }
.h2, .hero h1, .platform h2, .closing h2, .global h2, .case h2, .p-hero h1, .plan-copy h1 { line-height: 1.06; }
.hero h1 em, .plan-copy h1 em, .h2 em { font-style: normal; }
/* Over the video the words need more weight to stand out; the rest of the site stays light. */
.vhero h1 { line-height: 1.2; font-size: clamp(1.5rem, 2.3vw, 2.25rem); font-weight: 600; }
.rotor { line-height: 1.06; letter-spacing: -.022em; font-weight: 700; }
.vhero .rotor-pre { font-weight: 800; }
.card h3, .tabpanel h3, .mom h3 { line-height: 1.1; }
/* Card and list titles: the serif at a slightly heavier weight, so they hold their own at smaller sizes */
.steps p, .group h3, summary h3, .news h3, .why-item h3, .moment b, .brochure b, .mcard h3, .sig-card h3, .g-points b,
.formats b, .year > li > b, .kit h3, .theme h3, .live li b, .flow h3, .mnav b, .mcal > b, .ctile b, .bk.front b, .svc h3 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.steps p { font-size: 23px; line-height: 1.2; }
.moment b, .brochure b, .mcard h3, .sig-card h3, .g-points b, .formats b, .kit h3, .live li b { font-size: 20px; line-height: 1.2; }
summary h3 { font-size: 20px; }
.ctile b { font-size: 28px; }
/* Small labels and links: Inter, a step lighter than before, so they sit quietly beside the serif */
.eyebrow, .moment small, .card .tag { font-weight: 700; }
.logos li { font-weight: 700; }
.card .more, .brochure a, .text-link, .hero-cards .moment .go, .area-more, .tabpanel .more, .live .text-more { font-weight: 700; }

/* Session outlines */
.op-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 56px); background: radial-gradient(700px 320px at 92% 0%, rgba(242, 98, 57, .14), transparent 70%), var(--stone); }
.op-crumbs { font-size: 14px; color: var(--muted); }
.op-crumbs a { color: var(--ink); font-weight: 700; text-decoration: none; }
.op-crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.op-hero h1 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; }
.op-hero .lead { margin-top: 16px; max-width: 46em; }
.op-facts { margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 780px; }
.op-facts div { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.op-facts dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.op-facts dd { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.op-hero .cta-row { margin-top: 26px; }
.op-body { padding-top: clamp(40px, 5vw, 64px); }
.op-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px clamp(32px, 4vw, 64px); align-items: start; }
.op-main section { padding: 0; }
.op-main > section + section { margin-top: clamp(40px, 4.5vw, 60px); }
.op-main h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin-bottom: 14px; }
.op-about { display: grid; gap: 12px; max-width: 68ch; }
.op-about p { font-size: 16.5px; line-height: 1.65; color: var(--body); }
.op-about p:first-child { font-size: 18px; line-height: 1.55; font-weight: 600; color: var(--ink); }
.op-take { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.op-take li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.op-take svg { color: var(--accent-ink); margin-top: 2px; }
.op-lens { display: grid; gap: 12px; }
.op-len { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.op-len h3 { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.op-len b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); }
.op-len p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.op-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.op-topics li { padding: 6px 10px; border-radius: 999px; background: var(--stone); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.op-weeks { margin-top: 12px; font-size: 15px; color: var(--body); }
.op-weeks a { color: var(--accent-ink); font-weight: 700; }
.op-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.op-card { padding: 20px 20px 20px; border-radius: 18px; background: var(--stone); }
.op-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.op-card h3 { font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.op-qa { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 18px; border: 1.5px dashed var(--line); }
.op-qa-i { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #FFF1EC; color: var(--accent-ink); font-weight: 800; }
.op-qa div { flex: 1; min-width: 0; }
.op-qa b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.op-qa div span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 560px) { .op-qa { flex-wrap: wrap; } .op-qa .op-chip { margin-left: 48px; } }
.op-chip { flex: none; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.op-card h4 { margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.op-card ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--body); }
.op-card li { position: relative; padding-left: 17px; }
.op-card li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); }
.op-card ul.op-pts { margin-top: 12px; gap: 12px; }
.op-pts strong { display: block; font-size: 15.5px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.op-pts span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.op-cov { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink); }
.op-len > h3 + .op-cov { margin-top: 8px; padding-top: 0; border-top: 0; }
.op-res { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.op-res li { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; }
.op-who { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--body); }
.op-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: st; }
.op-steps li { counter-increment: st; position: relative; padding: 18px 18px 18px 58px; border-radius: 16px; border: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--body); }
.op-steps li::before { content: counter(st); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--ink); font-weight: 800; font-size: 14px; }
.op-steps b { color: var(--ink); }
.op-faq details { border-bottom: 1px solid var(--line); }
.op-faq summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq summary h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.op-faq details p { padding: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 68ch; }
.op-side { position: sticky; top: 96px; display: grid; gap: 14px; }
.op-box { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -32px rgba(28, 26, 25, .5); }
.op-box-h { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--ink); }
.op-dl { margin: 14px 0 0; display: grid; gap: 8px; font-size: 14.5px; }
.op-dl div { display: flex; justify-content: space-between; gap: 12px; } .op-dl dt { color: var(--muted); } .op-dl dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.op-box .btn { width: 100%; justify-content: center; margin-top: 16px; }
.op-box .op-small { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.is-member .op-guest { display: none; }
.op-share { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--accent-ink); cursor: pointer; }
.op-share:hover { background: #FFF4EF; }
.op-share svg { width: 18px; height: 18px; }
.op-packs { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink); text-align: center; text-decoration: none; }
.op-packs:hover { color: var(--accent-ink); }
/* Shared links (?shared=1) for people without a profile: the start of the outline, then sign up for the rest */
.op-gate { display: none; }
.op-gated .op-gate { display: block; padding: clamp(24px, 3vw, 34px); border-radius: 22px; background: radial-gradient(520px 220px at 100% 0%, rgba(242, 98, 57, .16), transparent 70%), var(--stone); }
.op-gated .op-main > section:not(.op-keep), .op-gated .op-related { display: none; }
.op-gated .op-about p:nth-child(n+3) { display: none; }
.op-gate-eye { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.op-gate h2 { margin-top: 8px; }
.op-gate p.op-gate-t { max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.op-gate ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.op-gate li { display: flex; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.op-gate li svg { flex: none; color: var(--accent-ink); margin-top: 2px; }
.op-gate .cta-row { margin-top: 22px; }
.op-gate .op-small { margin-top: 12px; font-size: 14px; color: var(--muted); }
.op-gate .op-small a { color: var(--accent-ink); font-weight: 700; }
.op-box .op-small a { color: var(--accent-ink); font-weight: 700; }
.op-expert b { display: block; font-size: 15.5px; color: var(--ink); }
.op-expert p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.op-related { padding-bottom: clamp(56px, 7vw, 96px); }
.op-rel { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.op-rel a { display: block; height: 100%; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.op-rel a:hover { border-color: var(--ink); transform: translateY(-2px); }
.op-rel b { display: block; font-size: 16px; color: var(--ink); line-height: 1.3; }
.op-rel span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.op-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 800; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
/* Topic pages */
.tp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tp-list a { display: block; height: 100%; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.tp-list a:hover { border-color: var(--ink); transform: translateY(-2px); }
.tp-list b { display: block; font-size: 17px; line-height: 1.3; color: var(--ink); }
.tp-list p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--body); }
.tp-list small { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.tp-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tp-cats a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 17px; transition: border-color .15s, transform .15s; }
.tp-cats a:hover { border-color: var(--ink); transform: translateY(-2px); }
.tp-cats span { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--accent-ink); }
.tp-body { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.tp-note { margin-top: 22px; font-size: 15px; color: var(--muted); }
.tp-note a { color: var(--accent-ink); font-weight: 700; }
@media (max-width: 1060px) {
  .op-grid { grid-template-columns: 1fr; } .op-side { position: static; }
  .op-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-rel, .tp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .op-take, .op-sec, .op-steps, .op-rel, .tp-list, .tp-cats { grid-template-columns: 1fr; }
}