/* Smile Plus site — layout + motion utilities built on the design system tokens */
/* WhatsApp — actual brand green, actual logo icon */
.sp-wa-btn{background:#25D366;color:#fff;border:1px solid #1DA851;box-shadow:var(--shadow-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)}
.sp-wa-btn:hover{background:#1DA851}
.sp-wa-btn:active{transform:scale(.985)}
.sp-wa-iconbtn{background:#25D366;border:1px solid #1DA851;box-shadow:var(--shadow-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.sp-wa-iconbtn:hover{background:#1DA851}
html,body{max-width:100%;overflow-x:hidden}
img,iframe,svg{max-width:100%}
.sp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sp-wrap{max-width:var(--container-max);margin:0 auto;padding:0 clamp(20px,4vw,32px);width:100%}
.sp-wrap--narrow{max-width:860px}
.sp-sec{padding:clamp(56px,7.5vw,96px) 0}
.sp-sec--compact{padding:clamp(40px,5.5vw,64px) 0}
.sp-display{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,5.2vw,68px);line-height:1.05;letter-spacing:-.028em;color:var(--text-heading);margin:0;text-wrap:balance}
.sp-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.022em;color:var(--text-heading);margin:0;text-wrap:balance}
.sp-h3{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.016em;color:var(--text-heading);margin:0}
.sp-lead{margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.62;color:var(--text-body);text-wrap:pretty}
.sp-body{margin:0;font-size:16px;line-height:1.62;color:var(--text-body);text-wrap:pretty}
.sp-data{font:var(--type-data);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-muted)}
.sp-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.sp-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3.5vw,48px);align-items:center}
.sp-stack{display:flex;flex-direction:column}
.sp-row{display:flex;flex-wrap:wrap;align-items:center}
a.sp-plain{color:inherit;text-decoration:none}
a.sp-plain:hover{color:var(--text-link-hover);text-decoration:none}
/* Scroll reveal — fade + 14px rise, per the motion spec (no scale, no spring) */
.sp-rev{opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease-entrance),transform var(--dur-reveal) var(--ease-entrance)}
.sp-rev.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sp-rev{opacity:1;transform:none;transition:none}.sp-kb{animation:none!important}}
/* Hero slideshow — slow crossfade with a restrained Ken Burns drift */
.sp-hero{position:relative;overflow:hidden;background:var(--green-950);min-height:clamp(540px,76vh,740px)}
.sp-sticky{position:static}
@media (min-width:1024px){.sp-sticky{position:sticky;top:100px}}
.sp-hero__layer{position:absolute;inset:0;opacity:0;transition:opacity 1400ms var(--ease-standard)}
.sp-hero__layer.is-on{opacity:1}
.sp-kb{position:absolute;inset:-3%;background-position:center;background-size:cover;animation:sp-kb 22s ease-in-out infinite alternate}
@keyframes sp-kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.4%,-1.6%,0)}}
.sp-hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,36,26,.92) 0%,rgba(4,36,26,.74) 42%,rgba(4,36,26,.22) 100%)}
.sp-hero__dots{display:flex;gap:6px}
.sp-hero__dot{width:34px;height:20px;border:0;padding:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-hero__dot::after{content:"";display:block;width:30px;height:3px;border-radius:999px;background:rgba(255,255,255,.32);transition:background var(--dur-fast) var(--ease-standard)}
.sp-hero__dot.is-on::after{background:var(--teal-400)}
/* Parallax image block — gentle, capped at 40px of travel */
.sp-para{overflow:hidden;position:relative}
.sp-para img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
/* Photography frames */
.sp-shot{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-hairline);background:var(--ink-150);display:block}
.sp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sp-shot--gold{border:1px solid var(--border-gold);outline:1px solid var(--gold-100);outline-offset:8px;border-radius:var(--radius-xl)}
.sp-slot{border:1.5px dashed var(--teal-400);background:var(--teal-100);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px}
.sp-slot__t{font:var(--type-data);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--teal-700)}
.sp-slot__d{font-size:13px;line-height:1.5;color:var(--ink-600);max-width:320px}
.sp-note{display:flex;gap:9px;align-items:flex-start;border:1px dashed var(--teal-400);background:var(--teal-100);border-radius:var(--radius-md);padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--teal-700)}
/* Before / after, side by side */
.sp-ba2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-ba2__img{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-hairline);background:var(--ink-150)}
.sp-ba2__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sp-ba2__tag{position:absolute;bottom:12px;left:12px;font:var(--type-data);letter-spacing:var(--ls-mono);text-transform:uppercase;background:rgba(255,255,255,.88);border:1px solid var(--border-hairline);border-radius:999px;padding:4px 10px;color:var(--ink-700)}
/* FAQ */
.sp-faq{border-top:1px solid var(--border-hairline)}
.sp-faq__row{border-bottom:1px solid var(--border-hairline)}
.sp-faq__q{width:100%;display:flex;gap:16px;align-items:center;justify-content:space-between;background:none;border:0;padding:20px 4px;text-align:left;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.4vw,18px);color:var(--text-heading);transition:color var(--dur-fast) var(--ease-standard)}
.sp-faq__q:hover{color:var(--brand-primary)}
.sp-faq__a{overflow:hidden;max-height:0;transition:max-height var(--dur-base) var(--ease-standard)}
.sp-faq__a.is-open{max-height:520px}
.sp-faq__a p{margin:0 0 20px;padding-right:48px;font-size:15.5px;line-height:1.65;color:var(--text-body)}
.sp-faq__chev{transition:transform var(--dur-base) var(--ease-standard);flex:none}
.sp-faq__chev.is-open{transform:rotate(180deg)}
/* Header */
.sp-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-gold)}
.sp-head__in{max-width:var(--container-max);margin:0 auto;padding:0 clamp(16px,3vw,32px);height:74px;display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.sp-head__nav{display:flex;gap:clamp(12px,1.6vw,24px);margin-left:auto;align-items:center}
.sp-head__nav a{font-family:var(--font-display);font-weight:600;font-size:14px;text-decoration:none;color:var(--text-muted);white-space:nowrap;transition:color var(--dur-fast) var(--ease-standard)}
.sp-head__nav a:hover{color:var(--text-heading);text-decoration:none}
.sp-head__nav a.is-on{color:var(--text-heading)}
.sp-head__menu{display:none}
@media (max-width:880px){.sp-head__nav{display:none}.sp-head__menu{display:flex;margin-left:auto;gap:10px;align-items:center}}
.sp-drawer{border-bottom:1px solid var(--border-gold);background:var(--white)}
.sp-drawer a{display:flex;align-items:center;min-height:54px;padding:14px clamp(16px,3vw,32px);font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-heading);text-decoration:none;border-top:1px solid var(--border-hairline)}
.sp-drawer a:active{background:var(--ink-100)}
/* Misc */
.sp-chip{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--border-hairline);background:var(--white);border-radius:999px;padding:7px 13px;font-size:13.5px;color:var(--ink-700)}
.sp-bullet{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.6;color:var(--text-body)}
.sp-hr-gold{height:1px;background:var(--rule-gold);border:0;width:100%}
.sp-quote{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--text-heading);margin:0;text-wrap:pretty}
.sp-reply{border-left:2px solid var(--teal-400);background:var(--teal-100);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:14px 16px;font-size:14.5px;line-height:1.6;color:var(--teal-700)}
/* ---------- tablet ---------- */
@media (max-width:1024px){
  .sp-grid-2{gap:32px}
  .sp-grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
}
/* ---------- mobile: readable type, comfortable targets ---------- */
@media (max-width:768px){
  .sp-sec{padding:52px 0}
  .sp-body{font-size:16px!important;line-height:1.62!important}
  .sp-lead{font-size:17px!important}
  .sp-quote{font-size:17px!important}
  .sp-chip{font-size:14.5px!important;padding:9px 14px!important}
  .sp-bullet{font-size:16px!important}
  .sp-note{font-size:14.5px!important;padding:14px 16px!important}
  .sp-slot__d{font-size:14px!important}
  .sp-reply{font-size:15px!important;padding:14px 16px!important}
  .sp-faq__q{font-size:17px!important;padding:18px 2px!important;min-height:58px;gap:12px}
  .sp-faq__a p{font-size:16px!important;padding-right:4px!important;margin-bottom:18px!important}
  .sp-shot--gold{outline:0!important;border-radius:var(--radius-lg)!important}
  .sp-hero{min-height:auto!important;padding-top:8px}
  .sp-ba2__tag{font-size:11px;bottom:10px}
  .sp-data{font-size:12px}
  input,select,textarea{font-size:16px!important}
  button{min-height:44px}
  .sp-head__menu button{min-width:44px}
  .sp-hero__dot{height:30px;min-height:30px}
  .sp-hero__dot::after{width:26px}
}
/* ---------- small phones: full-width primary actions ---------- */
@media (max-width:560px){
  .sp-cta-row{width:100%}
  .sp-cta-row>a,.sp-cta-row>a.sp-plain{flex:1 1 100%;display:block}
  .sp-cta-row>a>button{width:100%!important}
  .sp-grid-3{grid-template-columns:1fr}
  .sp-grid-2{grid-template-columns:1fr;gap:26px}
  .sp-wrap{padding:0 18px}
  .sp-sec{padding:44px 0}
}