@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Memberflow brand palette: orange #F46624, navy #14243E, white #FFFFFF, warm off-white #FAF8F5.
   Orange is reserved for accents, large type and text on navy (small orange text on light backgrounds fails contrast). */
:root{--orange:#F46624;--navy:#14243E;--white:#FFFFFF;--paper:#FAF8F5;--ink:var(--navy);--muted:#4A5568;--line:#E6E1DA;--line-strong:#8A93A3;--on-dark:#FFFFFFC7;--line-dark:#FFFFFF24;--radius:14px;--radius-sm:8px;--shadow:0 1px 2px #14243E0D,0 18px 48px #14243E12}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--white);color:var(--ink);font:16px/1.7 'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:var(--navy)}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--orange)}
.container{width:min(1180px,calc(100% - 80px));margin:auto}

/* Header + navigation */
header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 4%;min-height:84px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#FFFFFFF2;backdrop-filter:blur(10px);z-index:20}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo{display:block;height:40px;width:auto}
nav{display:flex;gap:30px;align-items:center}
nav a{font-size:14px;font-weight:500;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:2px}
nav a:not(.button):hover{text-decoration:underline;text-decoration-color:var(--orange)}
.menu{display:none}

/* Buttons */
.button{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--white);padding:15px 24px;border:1px solid var(--navy);border-radius:var(--radius-sm);text-decoration:none;font-size:15px;font-weight:600;line-height:1.3;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.button:hover{background:var(--orange);border-color:var(--orange);color:var(--navy);transform:translateY(-2px)}
.button.compact{padding:11px 18px;font-size:14px}
.button.accent{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.button.accent:hover{background:var(--white);border-color:var(--white);color:var(--navy)}

/* Type */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--navy);margin:0 0 24px}
.eyebrow:before{content:'';width:28px;height:2px;background:var(--orange);flex-shrink:0}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif;line-height:1.1;letter-spacing:-.03em;margin:0 0 25px;font-weight:700;color:inherit}
h1{font-size:clamp(49px,5.7vw,74px);font-weight:800}
h2{font-size:clamp(34px,3.9vw,48px)}
h3{font-size:21px;line-height:1.3;letter-spacing:-.01em;margin-bottom:12px}
em{font-style:normal;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.09em;text-underline-offset:.14em;text-decoration-skip-ink:none}
p{margin:0 0 20px}
.lead{font:600 24px/1.4 'Manrope',Arial,sans-serif;letter-spacing:-.01em}
.hero-copy{font-size:18px;max-width:520px;color:var(--muted)}
.underlink{font-size:15px;font-weight:600;text-underline-offset:6px;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.micro,.fine{font-size:13px;color:var(--muted);line-height:1.65}
.micro{max-width:470px}

/* Hero */
.hero{padding-top:80px;padding-bottom:84px;display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin:30px 0 20px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.pills span{font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 14px}
.hero-art{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.art-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em}
.dot:before{content:'●';color:var(--orange);font-size:8px;margin-right:6px;vertical-align:2px}
.orbit{height:270px;position:relative;display:grid;place-items:center;margin:10px 0}
.orbit:before{content:'';position:absolute;width:215px;height:215px;border:1.5px solid #F4662466;border-radius:50%}
.orbit:after{content:'';position:absolute;width:244px;height:244px;border:1px dashed var(--line);border-radius:50%}
.orbit-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:170px;height:170px;background:var(--white);border:1px solid var(--line);border-radius:50%;box-shadow:0 10px 30px #14243E14}
.orbit-center img{width:88px;height:88px}
.orbit-center small{font-size:9px;font-weight:700;letter-spacing:.18em;margin-top:10px}
.orbit-label{position:absolute;bottom:0;letter-spacing:.14em;font-size:10px;font-weight:700}
.journey-row{display:flex;gap:18px;align-items:center;border-top:1px solid var(--line);padding:15px 0}
.journey-row>span{font-size:12px;font-weight:700}
.journey-row>div{font-size:15px;font-weight:600}
.journey-row small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.journey-row b{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#F466241F;color:var(--navy);font-weight:600}
.hero-art>.micro{font-size:12px;margin:10px 0 0}
.ribbon{display:flex;align-items:center;justify-content:center;gap:35px;background:var(--navy);color:var(--white);padding:22px;font-size:12px;font-weight:600;letter-spacing:.14em}
.ribbon i{color:var(--orange);font-size:18px;font-style:normal}

/* Sections + cards */
.section{padding-top:100px;padding-bottom:100px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.large{font-size:22px;line-height:1.5}
.cards{display:grid;gap:20px;margin-top:44px}
.four{grid-template-columns:repeat(4,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
.cards article{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color .2s,box-shadow .2s}
.cards article:hover{border-color:#F4662499;box-shadow:var(--shadow)}
.cards h3{font-size:21px}
.cards p{font-size:15px;color:var(--muted)}
.cards p:last-child{margin-bottom:0}
.number{display:block;color:var(--navy);font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:28px}
.dark{background:var(--navy);color:var(--white)}
.dark .eyebrow{color:var(--white)}
.dark .number,.dark em{color:var(--orange)}
.dark em{text-decoration:none}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:70px;margin-bottom:40px}
.section-heading>p{max-width:380px;color:var(--on-dark);font-size:15px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}
.services article{background:var(--navy);padding:34px;transition:background .2s}
.services article:hover{background:#1A2D4C}
.services p{color:var(--on-dark);font-size:15px}
.service-tag{font-size:13px;font-weight:600;color:var(--orange);border-top:1px solid var(--line-dark);padding-top:15px;margin-top:25px}
.fine.light{color:var(--on-dark);margin-top:25px}
.mini-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#F466241F;font-size:26px;line-height:1;color:var(--orange);margin-bottom:22px}
.soft{background:var(--paper)}
.industry article{padding:33px;background:var(--white)}
.industry h3{font-size:26px}
.industry .eyebrow{font-size:11px}
.industry ul{padding-left:18px;font-size:14px;line-height:1.9;color:var(--muted)}
.industry li::marker{color:var(--orange)}
.industry+.fine{margin-top:25px}

/* Process */
.process{padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:44px}
.process li{position:relative;padding-top:25px;border-top:2px solid var(--line)}
.process li:before{content:'';position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--orange)}
.process li>span{font-size:12px;font-weight:700;letter-spacing:.1em;display:block;margin-bottom:24px}
.process h3{font-size:20px}
.process p{font-size:15px;color:var(--muted)}
.process small{font-size:13px;font-weight:600}

/* Multi-location */
.expansion p{color:var(--on-dark)}
.location-stack>div{border:1px solid var(--line-dark);border-radius:var(--radius);padding:24px;margin-bottom:12px;background:#FFFFFF08}
.location-stack span{color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.12em}
.location-stack h3{margin:12px 0 8px}
.location-stack p{font-size:14px;margin:0}

/* Metrics + calculator */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.metrics span{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);font-size:15px;font-weight:500;padding:13px 0}
.metrics span:before{content:'';width:8px;height:8px;border-radius:2px;background:var(--orange);flex-shrink:0}
.calc-panel{padding:32px;background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.calc-panel label{display:block;font-size:14px;font-weight:600;margin-bottom:10px}
.calc-panel output{float:right;font-weight:700}
.calc-panel input[type=range]{width:100%;accent-color:var(--orange);margin:0 0 25px}
.calc-panel input[type=number]{width:100%;border:1px solid var(--line-strong);padding:11px 12px;border-radius:var(--radius-sm);background:var(--white)}
.calc-result{padding-top:22px;margin-top:25px;border-top:1px solid var(--line)}
.calc-result>span{font-size:11px;font-weight:700;letter-spacing:.12em}
.calc-result strong{display:block;font:800 50px/1.2 'Manrope',sans-serif;letter-spacing:-.03em;color:var(--orange);margin:10px 0}
.calc-result p{font-size:14px}
.calc-panel>.fine{font-size:12px;margin-bottom:0}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;font:600 18px/1.4 'Manrope',Arial,sans-serif;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);color:var(--orange);font-size:20px;font-weight:500;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding-top:16px;font-size:15px;color:var(--muted);max-width:850px;margin-bottom:5px}

/* Contact + form */
.contact{background:var(--paper)}
.contact form{padding:34px;background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.contact label{display:block;font-size:14px;font-weight:600;margin-bottom:18px}
.contact input,.contact select,.contact textarea{display:block;width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--white);padding:12px;margin-top:7px;font-weight:400;transition:border-color .2s,box-shadow .2s}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px #F4662459;outline:none}
.contact input:focus-visible,.contact select:focus-visible,.contact textarea:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.contact form .button{width:100%;justify-content:center;margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hidden{display:none}
.agenda{padding-left:20px;font-size:15px;margin:28px 0;line-height:2.1}
.agenda li::marker{color:var(--orange)}

/* Footer */
footer{padding-top:44px;padding-bottom:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line)}
footer .logo{height:34px}
footer>p{margin:0;font:600 15px 'Manrope',Arial,sans-serif}
footer>div{display:flex;flex-direction:column;font-size:13px;gap:4px;color:var(--muted)}
footer>div a{text-underline-offset:4px}
footer>div a:hover{text-decoration-color:var(--orange)}

.skip{position:absolute;top:-100px;left:10px;padding:12px 16px;background:var(--navy);color:var(--white);border-radius:var(--radius-sm);z-index:100}
.skip:focus{top:10px}

/* Legal + thank-you pages */
.legal-header{position:static}
.legal{max-width:780px;padding-top:70px;padding-bottom:80px}
.legal h1{font-size:44px}
.legal h2{font-size:24px;margin-top:36px}
.legal .button{margin-top:20px}

@media(max-width:1050px){.container{width:calc(100% - 48px)}
nav{gap:18px}
.hero{gap:35px}
.split{gap:40px}
.ribbon{gap:20px;font-size:11px}
.four{grid-template-columns:repeat(2,1fr)}
.process{grid-template-columns:repeat(2,1fr)}
.services article{padding:26px}
.industry article{padding:26px}
}
@media(max-width:760px){header{padding:14px 24px;min-height:72px}
.logo{height:32px}
.menu{display:block;border:1px solid var(--line-strong);padding:8px 14px;background:transparent;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer}
.menu[aria-expanded=true]{background:var(--navy);border-color:var(--navy);color:var(--white)}
nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);padding:16px 24px 24px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px #14243E14;flex-direction:column;align-items:stretch;gap:4px}
nav.open{display:flex}
nav a{padding:10px 8px;font-size:16px}
nav a.button{justify-content:center;margin-top:8px}
.hero{grid-template-columns:1fr;padding-top:48px;padding-bottom:56px;gap:40px}
h1{font-size:clamp(38px,11vw,52px)}
h2{font-size:clamp(30px,8vw,36px)}
.lead{font-size:21px}
.hero-copy{font-size:16px}
.section{padding-top:64px;padding-bottom:64px}
.split{grid-template-columns:1fr;gap:24px}
.section-heading{display:block}
.services{grid-template-columns:1fr}
.three{grid-template-columns:1fr}
.ribbon{flex-direction:column;gap:8px;padding:20px;text-align:center}
.ribbon i{display:none}
.hero-art{max-width:490px;width:100%;margin:auto;padding:22px}
.cards{gap:12px}
.cards article{padding:24px}
.four h3{font-size:18px}
.four p{font-size:14px}
.large{font-size:19px}
.metrics{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr;gap:0}
.contact form,.calc-panel{padding:24px}
.calc-result strong{font-size:42px}
footer{flex-direction:column;align-items:flex-start}
.eyebrow{font-size:11px}
.process{gap:22px}
.process h3{font-size:18px}
.legal h1{font-size:36px}
}
@media(max-width:480px){.four{grid-template-columns:1fr}
.process{grid-template-columns:1fr}
.actions .button{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}