@font-face{font-family:"Public Sans";src:url("assets/fonts/PublicSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url("assets/fonts/PublicSans-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Public Sans";src:url("assets/fonts/PublicSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Public Sans";src:url("assets/fonts/PublicSans-Black.ttf") format("truetype");font-weight:900;font-display:swap}

/* Editorial direction: powder blue + cream + navy, Instrument Serif display, Public Sans text */
:root{
  --cream:#FDFBF6;--white:#FFFFFF;--powder:#DFE9F5;--powder-deep:#C9DAEE;
  --navy:#1F2B47;--text:#3A4257;--muted:#6B7285;--button:#4F6E9F;--button-hover:#3F5B87;
  --rule:#C8CEDA;--butter:#F5EBC8;--butter-soft:#FBF6E4;--powder-soft:#EEF3FA;--header-height:72px;
  --serif:"Instrument Serif",Georgia,serif;--sans:"Public Sans",Arial,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 24px)}
body{margin:0;background:var(--cream);color:var(--text);font:400 15px/1.7 var(--sans);letter-spacing:-.2px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--navy);line-height:1;letter-spacing:-.5px;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic}
p+p{margin-top:16px}
:focus-visible{outline:2px solid var(--button);outline-offset:4px}
.wrap{width:min(1080px,calc(100% - 96px));margin-inline:auto}
.section{padding-block:120px}
.center{text-align:center}
.skip-link{position:fixed;top:12px;left:12px;padding:10px 18px;background:var(--white);z-index:100;transform:translateY(-160%)}
.skip-link:focus{transform:none}

/* Buttons: small uppercase pill, like the reference */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 28px;border-radius:999px;background:var(--button);color:var(--white);font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;transition:background .2s}
.button:hover{background:var(--button-hover)}
.button-ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.button-ghost:hover{background:var(--navy);color:var(--white)}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:rgb(253 251 246 / 92%);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav-inner{width:min(1240px,calc(100% - 64px));margin:auto;min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:32px}
.wordmark{font:400 28px/1 var(--serif);color:var(--navy);letter-spacing:-.3px}
.wordmark em{font-style:italic}
.main-nav{display:flex;align-items:center;gap:34px;font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--navy)}
.main-nav>a{padding-block:10px;position:relative}
.main-nav>a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.main-nav>a:hover::after,.main-nav>a[aria-current]::after{transform:scaleX(1)}
.main-nav .nav-contact{padding:11px 20px;border:1px solid var(--navy);border-radius:999px}
.main-nav .nav-contact::after{display:none}
.main-nav .nav-contact:hover{background:var(--navy);color:var(--white)}
.menu-toggle{display:none;width:44px;height:44px;place-items:center;background:none;border:0;cursor:pointer}

/* Hero: big serif name, photo with space around it */
.hero{display:grid;grid-template-columns:1.1fr .9fr;height:clamp(560px,calc(100svh - var(--header-height)),820px);border-bottom:1px solid var(--rule)}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:80px 64px 80px max(48px,calc((100vw - 1080px)/2))}
.hero h1{font-size:clamp(72px,9.4vw,148px);line-height:.88;text-transform:uppercase;letter-spacing:-2px}
.hero h1 em{text-transform:none;letter-spacing:-1px}
.hero-role{margin-top:28px;font:600 11px/1 var(--sans);letter-spacing:2.4px;text-transform:uppercase;color:var(--navy)}
.hero-line{margin-top:22px;max-width:380px;font-size:15px;color:var(--text)}
.hero-text .button{margin-top:34px;align-self:flex-start}
.hero-photo{position:relative;overflow:hidden;background:var(--powder)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* Intro: powder blue band, heading, small centered photo, short text (reference section 2) */
.intro{background:var(--powder)}
.intro h2{font-size:clamp(36px,4.2vw,52px);max-width:760px;margin-inline:auto;line-height:1.05}
.intro-photo{width:220px;margin:48px auto}
.intro-photo img{width:100%;height:auto}
.intro p{max-width:520px;margin-inline:auto;font-size:15px}
.credentials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:40px;font:600 11px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--navy)}
.credentials li:not(:last-child)::after{content:"·";margin-left:28px}

/* Butter pill highlight behind one italic word */
.mark{background:var(--butter);border-radius:999px;padding:0 .28em .04em;margin-inline:-.06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Section titles (reference "THE SERVICES") */
.section-title{font-size:clamp(40px,4.6vw,60px);text-transform:uppercase;letter-spacing:-1px;text-align:center;margin-bottom:72px}
.section-title em{text-transform:none}

/* Guides */
.guides{background:var(--cream)}
.guides .lede{max-width:440px;margin:-48px auto 48px;text-align:center}
.tool-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tool-row li{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--white);font-size:13px;color:var(--navy)}
.tool-row img{width:24px;height:24px;object-fit:contain}
.guides .actions{margin-top:44px;text-align:center}

/* Courses: photo + details with hairline rows (reference services blocks) */
.courses{background:var(--white);border-block:1px solid var(--rule)}
.course{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center;padding:56px;background:var(--powder-soft);border:1px solid #D6E1EF}
.course+.course{margin-top:32px}
.course.capcut{background:var(--butter-soft);border-color:#EADFB8}
.course.reverse{grid-template-columns:1.2fr .8fr}
.course.reverse .course-photo{order:2}
.course-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.course-photo.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.course-photo.pair img{aspect-ratio:9/16}
.course-photo figcaption{font-size:12px;color:var(--muted);margin-top:8px}
.course h3{font-size:clamp(38px,3.8vw,50px);display:flex;align-items:center;gap:14px}
.course h3 img{width:34px;height:34px}
.course .summary{margin-top:18px;max-width:460px}
.facts{margin-top:30px;border-top:1px solid var(--navy)}
.facts li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--navy);font:400 24px/1.1 var(--serif);color:var(--navy)}
.facts li span{font:400 13px/1 var(--sans);color:var(--muted)}
.course .actions{margin-top:30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.price{font:400 34px/1 var(--serif);color:var(--navy)}
.price small{display:block;margin-top:6px;font:600 10px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.soon{display:inline-block;margin-bottom:18px;padding:7px 14px;border-radius:999px;background:var(--butter);font:600 10px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--navy)}

/* About */
.about{background:var(--cream)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:center}
.about-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%}
.about h2{font-size:clamp(44px,4.6vw,62px)}
.about .lead{margin-top:24px;font:400 26px/1.25 var(--serif);color:var(--navy)}
.about-copy p:not(.lead){font-size:15px}
.about-copy strong{color:var(--navy);font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:100px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{margin-top:12px;font:italic 400 20px/1.2 var(--serif);color:var(--navy);text-align:center}

/* Contact */
.contact{background:var(--powder)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin-inline:auto}
.contact-card{background:var(--cream);padding:44px 40px;text-align:center}
.contact-card h3{font-size:36px}
.contact-card p{margin-top:12px}
.contact-card .prompt{margin-top:28px;font:italic 400 20px/1 var(--serif);color:var(--navy)}
.contact-card .email{display:inline-block;margin-top:10px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:2px}

/* Closing: navy band, white serif */
.closing{background:var(--navy);padding-block:140px;text-align:center}
.closing h2{font-size:clamp(40px,5vw,68px);max-width:820px;margin-inline:auto;color:var(--white)}
.closing .button{margin-top:36px;background:var(--powder);color:var(--navy)}
.closing .button:hover{background:var(--white)}

/* Footer */
.site-footer{background:var(--navy);color:var(--powder);padding-block:56px;border-top:1px solid rgb(223 233 245 / 18%)}
.footer-main{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-name{font:400 32px/1 var(--serif);color:var(--white)}
.footer-name em{font-style:italic}
.site-footer p{font-size:13px}
.site-footer a.ig{font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;border-bottom:1px solid var(--powder);padding-bottom:4px}

@media (max-width:809px){
  .wrap{width:calc(100% - 40px)}
  .section{padding-block:80px}
  .has-menu .menu-toggle{display:grid}
  .has-menu .main-nav{display:none;position:absolute;left:0;right:0;top:var(--header-height);flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 24px;background:var(--cream);border-bottom:1px solid var(--rule)}
  .has-menu .main-nav.is-open{display:flex}
  .has-menu .main-nav>a{font-size:13px;padding:16px 0;border-bottom:1px solid var(--rule)}
  .has-menu .main-nav .nav-contact{border-radius:999px;text-align:center;margin-top:16px;border:1px solid var(--navy)}
  .nav-inner{width:calc(100% - 40px)}
  .hero{grid-template-columns:1fr;height:auto}
  .hero-text{padding:56px 20px 48px;order:2}
  .hero-photo{height:clamp(420px,72svh,640px)}
  .hero h1{font-size:clamp(64px,18vw,96px)}
  .course,.course.reverse,.about-grid{grid-template-columns:1fr;gap:40px}
  .course.reverse .course-photo{order:0}
  .course{padding:28px 20px}
  .course-photo{max-width:420px}
  .gallery{grid-template-columns:1fr;max-width:300px;margin:64px auto 0}
  .contact-grid{grid-template-columns:1fr}
  .closing{padding-block:100px}
  .credentials{flex-direction:column;align-items:center;gap:14px}
  .credentials li::after{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Power titles: Public Sans Bold for the top of the hierarchy, serif italic word as the accent */
.hero h1,.section-title{font-family:var(--sans);font-weight:900;letter-spacing:-.04em;line-height:.92}
.hero h1{font-size:clamp(64px,8vw,128px)}
.section-title{font-size:clamp(40px,4.4vw,60px)}
.hero h1 em,.section-title em{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:1.08em}

/* Canva Create photo: trim sky only, keep the full arch */
.course-photo.arch img{aspect-ratio:1440/1460;object-position:50% 100%}

/* Image 1: trim the empty right side so she sits in the center */
.intro-photo.centered img{aspect-ratio:853/1280;object-fit:cover;object-position:5% 30%}
.intro-photo.centered{width:180px}

/* Logo: Nati Estrada in Public Sans, header and footer */
.wordmark,.footer-name{font-family:var(--sans);font-weight:700;font-style:normal;letter-spacing:-.04em}
.wordmark{font-size:22px}
.footer-name{font-size:26px}
.wordmark em,.footer-name em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.12em}