/* ================================
   3-Day Website - Styles
   Design: Editorial Warmth (Focus on This inspired)
   Framework: StoryBrand 8-Block
   ================================ */

/* === 1. Custom Properties === */
:root {
    --color-primary: #272524;
    --color-cta: #F36212;
    --color-cta-hover: #d9540e;

    --color-dark: #272524;
    --color-text: #3d3b3a;
    --color-text-light: #6b6864;
    --color-light: #f7f7f5;
    --color-warm: #ebe8e3;
    --color-white: #ffffff;
    --color-border: #ddd9d4;

    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;

    --fs-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 1.8vw, 1rem);
    --fs-base: clamp(1rem, 2vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 2.5vw, 1.375rem);
    --fs-xl: clamp(1.5rem, 3.5vw, 2.25rem);
    --fs-2xl: clamp(2rem, 5vw, 3rem);
    --fs-3xl: clamp(2.5rem, 6vw, 4rem);
    --fs-hero: clamp(2.75rem, 7vw, 4.5rem);

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-10: 5rem;
    --space-12: 6rem;
    --space-16: 8rem;
    --space-20: 10rem;

    --max-width: 1200px;
    --max-width-text: 720px;
    --nav-height: 72px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-nav: 0 2px 8px rgba(0,0,0,0.06);

    --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    --z-base: 1;
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
}

/* === 2. Reset & Base === */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-height)}
body{
    min-height:100vh;
    font-family:var(--font-body);
    font-size:var(--fs-base);
    line-height:var(--lh-normal);
    color:var(--color-text);
    background-color:var(--color-light);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.visually-hidden{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
    position:absolute;left:-9999px;top:var(--space-2);
    padding:var(--space-1) var(--space-4);
    background:var(--color-cta);color:var(--color-white);
    border-radius:var(--radius-md);z-index:var(--z-modal);
    font-weight:var(--fw-semibold);
}
.skip-link:focus{left:var(--space-2)}

/* === 3. Typography === */
h1,h2,h3{
    font-family:var(--font-display);
    color:var(--color-dark);
    line-height:var(--lh-tight);
    font-weight:var(--fw-normal);
}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl)}
p{max-width:65ch}
.text-center p{margin-inline:auto}

.overline{
    font-family:var(--font-body);
    font-size:var(--fs-xs);
    font-weight:var(--fw-semibold);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--color-text-light);
}

/* === 4. Layout === */
.section{padding-block:var(--space-8)}
@media(min-width:768px){.section{padding-block:var(--space-10)}}
@media(min-width:1024px){.section{padding-block:var(--space-12)}}

.container{
    width:100%;max-width:var(--max-width);
    margin-inline:auto;padding-inline:var(--space-4);
}
@media(min-width:768px){.container{padding-inline:var(--space-6)}}
@media(min-width:1024px){.container{padding-inline:var(--space-8)}}

.container--text{max-width:var(--max-width-text)}
.text-center{text-align:center}

/* === 5. Buttons === */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    gap:0.5em;padding:0.875rem 1.75rem;
    font-family:var(--font-body);font-size:var(--fs-sm);
    font-weight:var(--fw-semibold);letter-spacing:0.06em;
    text-transform:uppercase;border:none;
    border-radius:var(--radius-full);cursor:pointer;
    transition:transform var(--duration-fast) ease,box-shadow var(--duration-fast) ease;
    text-decoration:none;line-height:1;
}
.btn:hover{transform:scale(1.03);box-shadow:var(--shadow-md)}

.btn--primary{background-color:var(--color-cta);color:var(--color-white)}
.btn--primary:hover{background-color:var(--color-cta-hover)}

.btn--secondary{
    background-color:transparent;color:var(--color-dark);
    border:2px solid var(--color-border);
}
.btn--secondary:hover{border-color:var(--color-dark)}

.btn--nav{padding:0.625rem 1.25rem;font-size:var(--fs-xs)}

/* === 6. Navigation === */
.site-header{
    position:fixed;top:0;left:0;right:0;
    z-index:var(--z-nav);
    background-color:var(--color-dark);
    transition:box-shadow var(--duration-normal) ease;
}
.site-header.is-scrolled{box-shadow:var(--shadow-nav)}

.nav{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--nav-height);max-width:var(--max-width);
    margin-inline:auto;padding-inline:var(--space-4);
}
@media(min-width:768px){.nav{padding-inline:var(--space-6)}}
@media(min-width:1024px){.nav{padding-inline:var(--space-8)}}

.nav__logo{
    display:flex;align-items:baseline;gap:0;
    color:var(--color-white);text-decoration:none;
    line-height:1;
}
.nav__logo-num{
    font-family:var(--font-display);font-size:1.75rem;
    font-weight:400;color:var(--color-cta);
    line-height:1;
}
.nav__logo-text{
    font-family:var(--font-body);font-size:0.8rem;
    font-weight:700;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--color-white);
    line-height:1;
}

.nav__links{display:none;gap:var(--space-5);align-items:center}
@media(min-width:768px){.nav__links{display:flex}}

.nav__links a{
    font-size:var(--fs-xs);font-weight:var(--fw-medium);
    color:rgba(255,255,255,0.7);letter-spacing:0.08em;
    text-transform:uppercase;transition:color var(--duration-fast) ease;
}
.nav__links a:hover{color:var(--color-white)}

.nav__right{display:flex;align-items:center;gap:var(--space-3)}

/* Hamburger */
.hamburger{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:none;cursor:pointer;padding:8px;
}
@media(min-width:768px){.hamburger{display:none}}

.hamburger__line{
    display:block;width:24px;height:2px;
    background-color:var(--color-white);
    transition:all var(--duration-normal) ease;border-radius:2px;
}
.hamburger.is-active .hamburger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-active .hamburger__line:nth-child(2){opacity:0}
.hamburger.is-active .hamburger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
    position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;
    background-color:var(--color-dark);
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:var(--space-6);
    opacity:0;pointer-events:none;
    transition:opacity var(--duration-normal) ease;z-index:var(--z-overlay);
}
.mobile-menu.is-open{opacity:1;pointer-events:auto}
.mobile-menu a{
    font-size:var(--fs-xl);font-weight:var(--fw-medium);
    color:var(--color-white);letter-spacing:0.05em;text-transform:uppercase;
}

/* === 7. Hero === */
.section--hero{
    position:relative;min-height:100svh;
    display:flex;align-items:center;
    background-color:var(--color-warm);
    padding-top:calc(var(--nav-height) + var(--space-8));
    padding-bottom:var(--space-8);overflow:hidden;
}
.hero__content{position:relative;z-index:2;max-width:640px}

.hero__overline{margin-bottom:var(--space-3)}
.hero__title{color:var(--color-dark);margin-bottom:var(--space-4)}
.hero__subtitle{
    font-size:var(--fs-lg);color:var(--color-text);
    margin-bottom:var(--space-6);line-height:var(--lh-relaxed);
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

.hero__proof{
    margin-top:var(--space-8);display:flex;
    align-items:center;gap:var(--space-3);
}
.hero__stars{color:var(--color-cta);font-size:1.25rem;letter-spacing:2px}
.hero__proof-text{font-size:var(--fs-sm);color:var(--color-text-light);font-style:italic}

.hero__image{display:none}

@media(min-width:1024px){
    .section--hero{min-height:90vh}
}

.section--hero .container{
    display:flex;align-items:center;justify-content:center;
}
.hero__content{text-align:center;max-width:720px;margin-inline:auto}
.hero__ctas{justify-content:center}
.hero__proof{justify-content:center}

/* === 8. Stakes === */
.section--stakes{background-color:var(--color-white)}

.stakes__header{max-width:var(--max-width-text);margin-bottom:var(--space-8)}
.stakes__header h2{margin-bottom:var(--space-3)}
.stakes__header p{font-size:var(--fs-lg);color:var(--color-text-light)}

.stakes__grid{display:grid;gap:var(--space-6)}
@media(min-width:768px){.stakes__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}}

.stake-card{
    padding:var(--space-5);background:var(--color-light);
    border-radius:var(--radius-lg);border-left:4px solid var(--color-cta);
}
.stake-card__icon{font-size:2rem;margin-bottom:var(--space-3)}
.stake-card__title{
    font-family:var(--font-display);font-size:var(--fs-lg);
    color:var(--color-dark);margin-bottom:var(--space-2);
}
.stake-card__text{font-size:var(--fs-base);color:var(--color-text);line-height:var(--lh-relaxed)}

.stakes__closer{
    margin-top:var(--space-8);font-size:var(--fs-xl);
    font-family:var(--font-display);color:var(--color-dark);
    max-width:var(--max-width-text);
}

/* === 9. Value === */
.section--value{background-color:var(--color-light)}

.value__header{text-align:center;margin-bottom:var(--space-10)}
.value__header h2{margin-bottom:var(--space-3)}
.value__header p{
    font-size:var(--fs-lg);color:var(--color-text-light);
    max-width:var(--max-width-text);margin-inline:auto;
}

.value__grid{display:grid;gap:var(--space-6)}
@media(min-width:768px){.value__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}}

.value-card{text-align:center;padding:var(--space-6)}
.value-card__icon{
    width:64px;height:64px;margin-inline:auto;margin-bottom:var(--space-4);
    background-color:var(--color-warm);border-radius:var(--radius-full);
    display:flex;align-items:center;justify-content:center;font-size:1.75rem;
}
.value-card__title{
    font-family:var(--font-display);font-size:var(--fs-lg);
    color:var(--color-dark);margin-bottom:var(--space-2);
}
.value-card__text{color:var(--color-text);line-height:var(--lh-relaxed)}

/* === 10. Guide === */
.section--guide{background-color:var(--color-warm)}

.guide__layout{display:grid;gap:var(--space-8);align-items:center}
@media(min-width:1024px){.guide__layout{grid-template-columns:1fr 1.2fr;gap:var(--space-12)}}

.guide__layout--no-photo{display:block;max-width:none}

@media(min-width:1024px){
    .guide__layout--no-photo{
        display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);
    }
    .guide__layout--no-photo .guide__content{max-width:none}
}

.guide__content{max-width:560px}
.guide__empathy{
    font-size:var(--fs-lg);font-style:italic;color:var(--color-text);
    line-height:var(--lh-relaxed);margin-bottom:var(--space-6);
    padding-left:var(--space-4);border-left:3px solid var(--color-cta);
}
.guide__bio{margin-bottom:var(--space-6)}
.guide__bio p{margin-bottom:var(--space-3)}

.guide__credentials{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.credential-badge{
    display:inline-flex;align-items:center;gap:0.5em;
    padding:0.5rem 1rem;background-color:var(--color-white);
    border-radius:var(--radius-full);font-size:var(--fs-sm);
    font-weight:var(--fw-medium);color:var(--color-dark);
}

/* === 11. Plan === */
.section--plan{background-color:var(--color-dark);color:var(--color-white)}

.plan__header{text-align:center;margin-bottom:var(--space-10)}
.plan__header h2{color:var(--color-white);margin-bottom:var(--space-3)}
.plan__header p{
    font-size:var(--fs-lg);color:rgba(255,255,255,0.6);
    max-width:var(--max-width-text);margin-inline:auto;
}

.plan__steps{display:grid;gap:var(--space-6);max-width:960px;margin-inline:auto}
@media(min-width:768px){.plan__steps{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}}

.step-card{text-align:center;padding:var(--space-5);border-top:1px solid rgba(255,255,255,0.15)}

.step-card__number{
    display:flex;align-items:center;justify-content:center;
    width:56px;height:56px;margin-inline:auto;margin-bottom:var(--space-4);
    background-color:var(--color-cta);color:var(--color-white);
    border-radius:var(--radius-full);font-family:var(--font-display);font-size:var(--fs-xl);
}
.step-card__title{
    font-family:var(--font-display);font-size:var(--fs-lg);
    color:var(--color-white);margin-bottom:var(--space-2);
}
.step-card__text{color:rgba(255,255,255,0.6);line-height:var(--lh-relaxed)}

.plan__cta{text-align:center;margin-top:var(--space-8)}

/* === 12. About / Explanatory === */
.section--about{background-color:var(--color-light)}

.about__content{max-width:var(--max-width-text);margin-inline:auto}
.about__content h2{margin-bottom:var(--space-6)}
.about__content p{
    font-size:var(--fs-lg);line-height:var(--lh-relaxed);
    margin-bottom:var(--space-4);color:var(--color-text);
}
.about__content p:last-of-type{margin-bottom:var(--space-6)}

/* === 13. Transformation === */
.section--transformation{background-color:var(--color-white)}

.transformation__header{text-align:center;margin-bottom:var(--space-10)}
.transformation__header h2{margin-bottom:var(--space-3)}

.transformation__grid{display:grid;gap:var(--space-6)}
@media(min-width:768px){.transformation__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}}

.transform-panel{padding:var(--space-6);border-radius:var(--radius-lg)}

.transform-panel--failure{background-color:#f5f0eb;border:1px solid var(--color-border)}
.transform-panel--success{background-color:var(--color-dark);color:var(--color-white)}

.transform-panel__label{
    font-family:var(--font-body);font-size:var(--fs-xs);
    font-weight:var(--fw-semibold);letter-spacing:0.15em;
    text-transform:uppercase;margin-bottom:var(--space-4);
}
.transform-panel--failure .transform-panel__label{color:var(--color-text-light)}
.transform-panel--success .transform-panel__label{color:var(--color-cta)}

.transform-panel h3{margin-bottom:var(--space-4)}
.transform-panel--success h3{color:var(--color-white)}

.transform-panel__list{display:flex;flex-direction:column;gap:var(--space-3)}
.transform-panel__item{
    display:flex;align-items:flex-start;gap:var(--space-2);
    font-size:var(--fs-base);line-height:var(--lh-normal);
    padding-bottom:var(--space-3);border-bottom:1px solid rgba(0,0,0,0.06);
}
.transform-panel__item:last-child{border-bottom:none;padding-bottom:0}

.transform-panel--failure .transform-panel__item{color:var(--color-text)}
.transform-panel--failure .transform-panel__icon{color:var(--color-text-light)}

.transform-panel--success .transform-panel__item{
    color:rgba(255,255,255,0.85);border-bottom-color:rgba(255,255,255,0.1);
}
.transform-panel--success .transform-panel__icon{color:var(--color-cta)}

.transform-panel__icon{flex-shrink:0;margin-top:2px;font-size:1.1em}

/* === 14. Application Form === */
.section--apply{background-color:var(--color-white)}

.apply__content{max-width:680px;margin-inline:auto;text-align:center}
.apply__content h2{margin-bottom:var(--space-3)}
.apply__subtitle{
    font-size:var(--fs-lg);color:var(--color-text-light);
    margin-bottom:var(--space-8);line-height:var(--lh-relaxed);
    max-width:560px;margin-inline:auto;
}

.apply-form{text-align:left}

.apply-form__row{
    display:grid;gap:var(--space-4);margin-bottom:var(--space-4);
}
@media(min-width:600px){.apply-form__row{grid-template-columns:1fr 1fr}}

.apply-form__field{display:flex;flex-direction:column;gap:var(--space-1)}
.apply-form__field--full{margin-bottom:var(--space-4)}

.apply-form__field label{
    font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-dark);
}

.apply-form__field input,
.apply-form__field textarea{
    padding:0.75rem 1rem;border:2px solid var(--color-border);
    border-radius:var(--radius-md);font-size:var(--fs-base);
    background-color:var(--color-light);
    transition:border-color var(--duration-fast) ease,background-color var(--duration-fast) ease;
    font-family:var(--font-body);
}
.apply-form__field input:focus,
.apply-form__field textarea:focus{
    outline:none;border-color:var(--color-cta);background-color:var(--color-white);
}
.apply-form__field input::placeholder,
.apply-form__field textarea::placeholder{color:var(--color-text-light)}
.apply-form__field textarea{resize:vertical;min-height:100px}

.apply-form__submit{text-align:center;margin-top:var(--space-6)}
.apply-form__note{
    font-size:var(--fs-sm);color:var(--color-text-light);
    margin-top:var(--space-3);
}

.btn--lg{padding:1rem 2.25rem;font-size:var(--fs-base)}

/* === 15. Testimonial === */
.section--testimonial{background-color:var(--color-warm)}

.testimonial{
    max-width:var(--max-width-text);margin-inline:auto;
    text-align:center;padding:var(--space-4) 0;
}
.testimonial__quote{
    font-family:var(--font-display);font-size:var(--fs-xl);
    color:var(--color-dark);line-height:var(--lh-snug);
    margin-bottom:var(--space-4);position:relative;
}
.testimonial__quote::before{
    content:'\201C';font-size:4rem;color:var(--color-cta);
    line-height:0;position:relative;top:0.3em;margin-right:0.1em;
}
.testimonial__author{font-size:var(--fs-sm);color:var(--color-text-light);font-weight:var(--fw-medium)}

/* === 15. CTA Final === */
.section--cta{background-color:var(--color-warm);text-align:center}

.cta__content{max-width:var(--max-width-text);margin-inline:auto}
.cta__content h2{margin-bottom:var(--space-3)}

.cta__subtitle{
    font-size:var(--fs-lg);color:var(--color-text);
    margin-bottom:var(--space-6);line-height:var(--lh-relaxed);
    max-width:560px;margin-inline:auto;
}

.cta__buttons{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:var(--space-3);margin-bottom:var(--space-8);
}

.cta__divider{
    display:flex;align-items:center;gap:var(--space-3);
    margin-bottom:var(--space-6);max-width:480px;margin-inline:auto;
}
.cta__divider::before,.cta__divider::after{content:'';flex:1;height:1px;background-color:var(--color-border)}
.cta__divider span{font-size:var(--fs-sm);color:var(--color-text-light);white-space:nowrap}

.cta__lead-magnet{
    max-width:480px;margin-inline:auto;padding:var(--space-5);
    background-color:var(--color-white);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}
.cta__lead-magnet h3{font-size:var(--fs-lg);margin-bottom:var(--space-2)}
.cta__lead-magnet p{
    font-size:var(--fs-sm);color:var(--color-text-light);
    margin-bottom:var(--space-4);margin-inline:auto;
}

.lead-form{display:flex;gap:var(--space-2);align-items:stretch}
.lead-form__input{
    flex:1;min-width:0;padding:0.75rem 1rem;border:2px solid var(--color-border);
    border-radius:var(--radius-md);font-size:var(--fs-base);
    background-color:var(--color-white);transition:border-color var(--duration-fast) ease;
}
.lead-form__input:focus{outline:none;border-color:var(--color-cta)}
.lead-form__input::placeholder{color:var(--color-text-light)}
.lead-form__btn{flex-shrink:0;white-space:nowrap;padding:0.75rem 1.5rem}

@media(max-width:480px){.lead-form{flex-direction:column}}

/* === 16. Footer === */
.site-footer{
    background-color:var(--color-dark);color:rgba(255,255,255,0.7);
    padding:var(--space-8) 0 var(--space-4);
}

.footer__top{
    display:flex;flex-wrap:wrap;justify-content:space-between;
    align-items:flex-start;gap:var(--space-6);
    margin-bottom:var(--space-6);padding-bottom:var(--space-6);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.footer__brand{max-width:320px}
.footer__logo{
    font-family:var(--font-body);font-size:var(--fs-lg);
    font-weight:var(--fw-bold);color:var(--color-white);
    letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-2);
}
.footer__logo span{color:var(--color-cta)}
.footer__tagline{font-size:var(--fs-sm);line-height:var(--lh-relaxed)}

.footer__contact{display:flex;flex-direction:column;gap:var(--space-2)}
.footer__contact a{
    font-size:var(--fs-sm);color:rgba(255,255,255,0.7);
    transition:color var(--duration-fast) ease;
}
.footer__contact a:hover{color:var(--color-white)}

.footer__bottom{font-size:var(--fs-xs);color:rgba(255,255,255,0.4);text-align:center}

/* === 17. Animations === */
.animate-in{
    opacity:0;transform:translateY(30px);
    transition:opacity var(--duration-slow) var(--ease-default),
               transform var(--duration-slow) var(--ease-default);
}
.animate-in.is-visible{opacity:1;transform:translateY(0)}
.animate-in.is-visible:nth-child(2){transition-delay:100ms}
.animate-in.is-visible:nth-child(3){transition-delay:200ms}
.animate-in.is-visible:nth-child(4){transition-delay:300ms}

/* === 18. Reduced Motion === */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:0.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:0.01ms!important;
        scroll-behavior:auto!important;
    }
    .animate-in{opacity:1;transform:none}
}