/* Saie Beauty — Find Your Shade, independent campaign concept */
.saie-page { --saie-ivory:#faf8f4; --saie-ink:#231f1c; --saie-rose:#e8c6d2; --saie-rose-light:#f6e9ed; --saie-muted:#716968; background:var(--saie-ivory); color:var(--saie-ink); overflow:clip; font-family:"DM Sans",Arial,sans-serif; }
.saie-page * { box-sizing:border-box; }
.saie-page a { color:inherit; }
.saie-page .saie-label { font-size:.66rem; letter-spacing:.26em; line-height:1.5; font-weight:600; text-transform:uppercase; color:#54494a; }
.saie-page .saie-display { font:400 clamp(3.8rem,6.5vw,7.6rem)/1.01 "Libre Caslon Display",Georgia,serif; letter-spacing:-.05em; margin:18px 0 26px; }
.saie-page .saie-display em { font-style:italic; color:#b77e91; }
.saie-page .saie-body p { margin:0 0 1.15em; font:normal clamp(1.12rem,1.45vw,1.34rem)/1.78 "Libre Caslon Display",Georgia,serif; color:#534747; }
.saie-page .saie-body p:last-child { margin-bottom:0; }
.saie-ribbon { padding:17px clamp(23px,5vw,86px); display:flex; justify-content:space-between; gap:15px; background:#faeff1; border-bottom:1px solid #f2dfe5; font-size:.64rem; letter-spacing:.23em; line-height:1.6; font-weight:600; }
.saie-ribbon span:first-child { display:flex; align-items:center; gap:13px; }
.saie-ribbon i { width:5px; height:5px; border-radius:50%; background:#c69ba9; display:inline-block; }
.saie-hero { padding:clamp(75px,8vw,130px) 0 36px; text-align:center; }
.saie-headline-wrap { padding:0 clamp(20px,4vw,60px); max-width:1500px; margin:0 auto 57px; }
.saie-headline-wrap .saie-label { margin:0 0 25px; }
.saie-huge { font:500 clamp(4.7rem,10.3vw,11.9rem)/.96 "DM Sans",Arial,sans-serif; letter-spacing:-.088em; white-space:normal; margin:0; }
.saie-huge em { font:italic 400 .96em/.95 "Libre Caslon Display",Georgia,serif; letter-spacing:-.085em; color:#b47b91; }
.saie-dot { color:#bf8193; }
.saie-lead { font:400 clamp(1.45rem,2.15vw,2.35rem)/1.38 "Libre Caslon Display",Georgia,serif; margin:28px auto 30px; max-width:720px; color:#554849; }
.saie-text-link { display:inline-flex; gap:24px; align-items:center; padding:0 0 8px; border-bottom:1px solid #9b8187; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; transition:gap .25s ease; }
.saie-text-link:hover { gap:35px; }
.saie-hero-art { max-width:1430px; margin:0 auto; padding:0 clamp(18px,4vw,70px); }
.saie-hero-art img { width:100%; height:auto; display:block; object-fit:contain; }
.saie-art-caption { max-width:1430px; margin:20px auto 0; padding:0 clamp(18px,4vw,70px); display:flex; justify-content:space-between; gap:16px; color:#776e6d; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; }
.saie-art-placeholder { display:grid; place-items:center; min-height:350px; background:linear-gradient(145deg,#f9ecf0,#e8d8d8); font:600 .72rem "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#947480; text-align:center; padding:25px; }
.saie-section { padding:clamp(94px,11vw,165px) 0; }
.saie-intro-inner,.saie-story-inner { width:min(1330px,calc(100% - clamp(36px,8vw,140px))); margin:0 auto; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(55px,8vw,145px); align-items:center; }
.saie-intro .saie-copy-block { max-width:650px; }
.saie-intro .saie-display { font-size:clamp(4.2rem,6vw,7.3rem); }
.saie-intro-visual { margin:0; }
.saie-intro-visual img { width:100%; height:auto; display:block; }
.saie-intro-visual .saie-art-placeholder { aspect-ratio:1.35; }
.saie-intro-visual figcaption,.saie-social-visual figcaption { font:600 .61rem/1.5 "DM Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#86737a; padding-top:20px; }
.saie-interlude { display:flex; justify-content:space-evenly; gap:20px; align-items:center; text-align:center; min-height:98px; padding:22px; background:#edd2da; color:#5f454b; text-transform:uppercase; font-size:clamp(.58rem,.8vw,.76rem); font-weight:600; letter-spacing:.25em; }
.saie-social-intro { text-align:center; background:#fffdfb; padding-bottom:110px; }
.saie-social-intro .saie-display { max-width:1100px; margin:24px auto 30px; font-size:clamp(3.9rem,6.9vw,7.3rem); }
.saie-social-intro>p:last-child { font:1.5rem/1.5 "Libre Caslon Display",Georgia,serif; color:#6a5a5c; margin:0 auto; max-width:700px; }
.saie-story { background:#fffdfb; }
.saie-story-rose { background:#f6e9ec; }
.saie-story-cream { background:#f7f3ed; }
.saie-story .saie-story-inner { grid-template-columns:1fr 1fr; }
.saie-story-copy { max-width:610px; }
.saie-story .saie-display { font-size:clamp(4rem,6vw,6.8rem); }
.saie-story-flipped .saie-story-copy { order:2; }
.saie-story-flipped .saie-social-visual { order:1; }
.saie-social-visual { margin:0; display:flex; flex-direction:column; align-items:center; }
.saie-social-visual figcaption { width:min(100%,360px); }
.saie-social-crop { background-repeat:no-repeat; background-size:478.4% auto; background-position-y:57%; background-color:#f7f3f1; width:min(100%,360px); aspect-ratio: .44; filter:saturate(.97); box-shadow:0 23px 63px rgba(64,43,50,.1); }
.saie-crop-one { background-position-x:5.8%; }
.saie-crop-two { background-position-x:35.4%; }
.saie-crop-three { background-position-x:65.2%; }
.saie-crop-four { background-position-x:94.8%; }
.saie-social-placeholder { display:grid; place-items:center; text-align:center; padding:20px; background-image:linear-gradient(160deg,#f8ebee,#eddce1); font-size:.88rem; letter-spacing:.2em; font-weight:500; color:#a87585; }
.saie-cta { background:#efd8e0; padding:clamp(100px,12vw,170px) clamp(25px,6vw,90px); text-align:center; }
.saie-cta-inner { max-width:1100px; margin:auto; }
.saie-cta .saie-display { font-size:clamp(5rem,9vw,10rem); margin:22px 0 26px; }
.saie-cta .saie-display em { color:#a9687c; }
.saie-cta-inner>p:nth-of-type(2) { max-width:620px; margin:0 auto 32px; font:1.5rem/1.65 "Libre Caslon Display",Georgia,serif; color:#68505a; }
.saie-button { display:inline-flex; padding:20px 28px; gap:48px; align-items:center; background:#211d1b; color:#fef9f7!important; letter-spacing:.16em; font-size:.65rem; line-height:1.6; font-weight:600; text-transform:uppercase; transition:transform .25s ease,background .25s ease; }
.saie-button:hover { transform:translateY(-3px); background:#473137; }
.saie-disclaimer { background:#faf8f4; padding:33px clamp(25px,5vw,85px); display:flex; justify-content:space-between; align-items:center; gap:28px; color:#817575; }
.saie-disclaimer span { font:600 .64rem/1.6 "DM Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; flex-shrink:0; }
.saie-disclaimer p { margin:0; font:normal .77rem/1.5 "DM Sans",sans-serif; max-width:450px; }
.saie-disclaimer a { font:.64rem/1.5 "DM Sans",sans-serif; letter-spacing:.13em; text-transform:uppercase; border-bottom:1px solid #a89999; flex-shrink:0; }
.saie-reveal { animation:saie-arrive .75s ease-out both; }
.saie-headline-wrap .saie-huge { animation-delay:.13s; }
.saie-headline-wrap .saie-lead { animation-delay:.26s; }
.saie-hero-art.saie-reveal { animation-delay:.3s; }
@keyframes saie-arrive { from { opacity:0; transform:translateY(15px) } to { opacity:1; transform:translateY(0) } }
@media(min-width:800px) {
  @supports(animation-timeline:view()) {
    .saie-intro-visual img,.saie-social-visual .saie-social-crop { animation:saie-ease-in both; animation-timeline:view(); animation-range:entry 0% cover 24%; }
    @keyframes saie-ease-in { from { opacity:.55; transform:translateY(15px) } to { opacity:1; transform:translateY(0) } }
  }
}
@media(max-width:1050px) {
 .saie-intro-inner,.saie-story-inner { gap:clamp(34px,5vw,72px); }
 .saie-story .saie-display { font-size:clamp(3.5rem,5.7vw,5.4rem); }
}
@media(max-width:780px) {
 .saie-ribbon span:last-child { display:none; }
 .saie-hero { padding-top:75px; }
 .saie-huge { font-size:clamp(4.4rem,14vw,7rem); }
 .saie-hero-art { padding:0 12px; }
 .saie-art-caption { flex-direction:column; gap:5px; padding:0 19px; }
 .saie-intro-inner,.saie-story .saie-story-inner { grid-template-columns:1fr; }
 .saie-intro-visual { max-width:630px; }
 .saie-social-visual { margin-top:12px; }
 .saie-story-flipped .saie-story-copy,.saie-story-flipped .saie-social-visual { order:unset; }
 .saie-story .saie-display { font-size:clamp(3.9rem,10vw,6rem); }
 .saie-story-copy { max-width:660px; }
 .saie-interlude span:last-child { display:none; }
 .saie-disclaimer { align-items:flex-start; flex-direction:column; gap:12px; }
}
@media(max-width:480px) {
 .saie-huge { font-size:clamp(3.65rem,14vw,5.2rem); letter-spacing:-.09em; }
 .saie-hero { padding-top:70px; }
 .saie-headline-wrap { margin-bottom:43px; }
 .saie-hero-art { padding:0 8px; }
 .saie-page .saie-display { font-size:clamp(3.3rem,11vw,5rem); }
 .saie-social-crop { width:min(100%,300px); }
 .saie-social-intro { padding-left:20px; padding-right:20px; }
 .saie-interlude { flex-direction:column; gap:5px; }
 .saie-cta .saie-display { font-size:clamp(4rem,13vw,6rem); }
}
/* Strategic portfolio layer: subtle, editorial, clearly separate from ad creative. */
.saie-strategy { background:#fffdfb; padding:clamp(95px,11vw,170px) 0; }
.saie-strategy-inner { width:min(1280px,calc(100% - clamp(40px,9vw,150px))); margin:0 auto; }
.saie-strategy-heading { max-width:920px; margin-bottom:60px; }
.saie-strategy-heading .saie-display { font-size:clamp(4.4rem,7vw,8rem); }
.saie-strategy-heading>p:last-child { font:400 clamp(1.3rem,2.1vw,2rem)/1.5 "Libre Caslon Display",Georgia,serif; color:#655557; max-width:700px; }
.saie-strategy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #d5c7c6; border-bottom:1px solid #d5c7c6; }
.saie-strategy-grid article { padding:clamp(28px,4.3vw,55px) clamp(26px,5vw,65px); }
.saie-strategy-grid article:nth-child(odd) { border-right:1px solid #d5c7c6; padding-left:0; }
.saie-strategy-grid article:nth-child(-n+2) { border-bottom:1px solid #d5c7c6; }
.saie-strategy-number { font:600 .65rem/1.5 "DM Sans",sans-serif; letter-spacing:.18em; color:#9e6d7b; }
.saie-strategy-grid h3 { font:400 clamp(2rem,3vw,3.1rem)/1.2 "Libre Caslon Display",Georgia,serif; margin:22px 0 12px; }
.saie-strategy-grid p { font:400 clamp(1.06rem,1.3vw,1.27rem)/1.6 "Libre Caslon Display",Georgia,serif; color:#706163; margin:0; }
.saie-strategy-footnote { margin-top:32px; font:.78rem/1.75 "DM Sans",sans-serif; color:#897e7d; max-width:780px; }
@media(max-width:650px) {
 .saie-strategy-heading { margin-bottom:35px; }
 .saie-strategy-grid { grid-template-columns:1fr; }
 .saie-strategy-grid article:nth-child(odd) { border-right:0; }
 .saie-strategy-grid article { border-bottom:1px solid #d5c7c6; padding:28px 0; }
 .saie-strategy-grid article:last-child { border-bottom:0; }
}
@media(prefers-reduced-motion:reduce) { .saie-page *, .saie-page *::before, .saie-page *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }