/* ============================================================
   SUNSHINE — Playful Creative Studio / Gallery Template
   Self-hosted fonts, CSS-only graphics, no CDNs, no frameworks.

   Hook: a bright, friendly horizontal scroll-snap gallery with
   super-rounded cards and a "jelly dot" cursor (desktop, fine
   pointer only). All motion respects reduced-motion.

   1.Fonts 2.Tokens 3.Base 4.A11y 5.Cursor 6.Header 7.Buttons
   8.Hero 9.Gallery 10.About 11.Services 12.Marquee 13.Voices
   14.FAQ 15.CTA 16.Forms 17.Footer 18.404 19.Responsive 20.Motion
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }

/* ---------- 2. TOKENS ---------- */
:root {
  --cream:#fcf9f1;
  --butter:#fcdd85;
  --sky:#85c1fc;
  --coral:#ffb4a2;
  --mint:#b5e48c;
  --ink:#2d2d2d;
  --dim:#73706a;
  --maxw:1180px;
  --r:28px;
  --r-lg:40px;
  --head:"Outfit", system-ui, Arial, sans-serif;
  --body:"Inter", system-ui, Arial, sans-serif;
  --ease:cubic-bezier(0.175,0.885,0.32,1.275);
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.06rem; line-height:1.7;
  overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
h1,h2,h3 { font-family:var(--head); font-weight:700; line-height:1.02; letter-spacing:-0.02em; }

/* ---------- 4. A11Y ---------- */
.skip-link { position:absolute; left:8px; top:-52px; background:var(--ink); color:var(--cream); font-family:var(--head); font-weight:700; padding:10px 18px; border-radius:14px; z-index:400; transition:top .2s ease; }
.skip-link:focus { top:8px; }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; border-radius:8px; }
.vh { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 5. JELLY CURSOR (desktop fine-pointer only) ---------- */
#cursor { display:none; }
@media (hover:hover) and (pointer:fine) {
  #cursor { display:block; width:28px; height:28px; background:var(--sky); border-radius:50%; position:fixed; top:0; left:0; transform:translate(-50%,-50%); pointer-events:none; z-index:999; opacity:.7; box-shadow:0 4px 15px rgba(133,193,252,0.4); transition:width .2s, height .2s, background .2s; }
  #cursor.big { width:54px; height:54px; background:var(--butter); }
}

/* ---------- 6. HEADER ---------- */
.site-header { position:sticky; top:0; z-index:200; background:rgba(252,249,241,0.86); backdrop-filter:blur(10px); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:var(--maxw); margin:0 auto; }
.brand { font-family:var(--head); font-weight:700; font-size:1.5rem; display:flex; align-items:center; gap:9px; }
.brand .sun { width:20px; height:20px; border-radius:50%; background:var(--butter); box-shadow:0 0 0 4px rgba(252,221,133,0.4); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-family:var(--head); font-weight:500; font-size:.92rem; }
.nav-links a:hover { color:var(--sky); }
.nav-cta { background:var(--ink); color:var(--cream)!important; padding:11px 20px; border-radius:50px; }
.nav-cta:hover { background:var(--sky); color:var(--ink)!important; }
.nav-toggle { display:none; background:var(--butter); border:none; width:46px; height:42px; border-radius:14px; font-size:1.2rem; cursor:pointer; }

/* ---------- 7. BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--head); font-weight:700; font-size:1rem; padding:16px 32px; border:none; border-radius:50px; cursor:pointer; transition:transform .25s var(--ease), background .25s; }
.btn-ink { background:var(--ink); color:var(--cream); }
.btn-ink:hover { transform:translateY(-3px) scale(1.03); background:var(--sky); color:var(--ink); }
.btn-butter { background:var(--butter); color:var(--ink); }
.btn-butter:hover { transform:translateY(-3px) scale(1.03); }
.btn-outline { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn-outline:hover { background:var(--ink); color:var(--cream); transform:translateY(-3px); }

/* ---------- 8. HERO ---------- */
.hero { max-width:var(--maxw); margin:0 auto; padding:70px 28px 40px; text-align:center; position:relative; }
.hero .blob { position:absolute; border-radius:50%; filter:blur(2px); opacity:.7; z-index:-1; }
.hero .blob.b1 { width:160px; height:160px; background:var(--coral); top:20px; left:6%; }
.hero .blob.b2 { width:120px; height:120px; background:var(--sky); top:120px; right:9%; }
.hero .blob.b3 { width:90px; height:90px; background:var(--mint); bottom:-10px; left:24%; }
.hero .eyebrow { font-family:var(--head); font-weight:500; font-size:.86rem; text-transform:uppercase; letter-spacing:.22em; color:var(--sky); margin-bottom:18px; }
.hero h1 { font-size:clamp(2.6rem,8vw,5.6rem); letter-spacing:-0.03em; }
.hero h1 .wink { display:inline-block; background:var(--butter); border-radius:18px; padding:0 .25em; transform:rotate(-2deg); }
.hero p { font-size:1.2rem; color:var(--dim); max-width:46ch; margin:24px auto 32px; }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 9. HORIZONTAL SCROLL-SNAP GALLERY ---------- */
.gallery-head { max-width:var(--maxw); margin:70px auto 22px; padding:0 28px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.gallery-head h2 { font-size:clamp(1.8rem,4vw,2.8rem); }
.gallery-head .nav-btns { display:flex; gap:10px; }
.gallery-head .gbtn { width:48px; height:48px; border-radius:50%; border:none; background:var(--ink); color:var(--cream); font-size:1.2rem; cursor:pointer; transition:transform .2s var(--ease), background .2s; }
.gallery-head .gbtn:hover { transform:scale(1.1); background:var(--sky); color:var(--ink); }
.rail { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 28px 30px; scroll-padding-left:28px; -webkit-overflow-scrolling:touch; }
.rail::-webkit-scrollbar { height:10px; }
.rail::-webkit-scrollbar-thumb { background:var(--butter); border-radius:50px; }
.rail::-webkit-scrollbar-track { background:transparent; }
.card { scroll-snap-align:start; flex:0 0 clamp(280px,78vw,560px); }
.card .frame { border-radius:var(--r-lg); overflow:hidden; box-shadow:0 14px 34px rgba(45,45,45,0.08); transition:transform .5s var(--ease); }
.card:hover .frame { transform:scale(1.02) rotate(0.6deg); }
.card img { width:100%; height:auto; display:block; }
.card .cap { display:flex; justify-content:space-between; align-items:baseline; padding:16px 6px 0; gap:14px; }
.card .cap h3 { font-size:1.3rem; }
.card .cap .tag { font-family:var(--head); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--sky); }

/* ---------- 10. ABOUT (rounded panel) ---------- */
.about { max-width:var(--maxw); margin:90px auto; padding:0 28px; }
.about-inner { background:var(--sky); border-radius:var(--r-lg); padding:64px 7vw; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.about-inner h2 { font-size:clamp(1.9rem,4vw,3rem); }
.about-inner p { margin-top:16px; }
.about-stats { display:grid; gap:16px; }
.about-stat { background:var(--cream); border-radius:var(--r); padding:22px 26px; }
.about-stat .n { font-family:var(--head); font-weight:700; font-size:2.2rem; }
.about-stat .l { color:var(--dim); font-size:.92rem; }

/* ---------- 11. SERVICES (rounded tiles) ---------- */
.svc { max-width:var(--maxw); margin:90px auto; padding:0 28px; }
.svc-head { text-align:center; margin-bottom:44px; }
.svc-head h2 { font-size:clamp(1.9rem,4vw,3rem); }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card { border-radius:var(--r); padding:34px 30px; transition:transform .3s var(--ease); }
.svc-card:hover { transform:translateY(-6px); }
.svc-card:nth-child(1){ background:var(--butter); }
.svc-card:nth-child(2){ background:var(--coral); }
.svc-card:nth-child(3){ background:var(--mint); }
.svc-card .ic { width:52px; height:52px; border-radius:50%; background:var(--ink); margin-bottom:18px; display:grid; place-items:center; color:var(--cream); font-family:var(--head); font-weight:700; }
.svc-card h3 { font-size:1.4rem; margin-bottom:8px; }
.svc-card p { color:#4a473f; font-size:.98rem; }

/* ---------- 12. MARQUEE ---------- */
.marquee { background:var(--ink); color:var(--cream); overflow:hidden; white-space:nowrap; padding:0; }
.marquee-track { display:inline-flex; gap:36px; padding:18px 0; font-family:var(--head); font-weight:700; font-size:1.3rem; animation:scrollx 28s linear infinite; }
.marquee-track span::after { content:"\2600"; margin-left:36px; color:var(--butter); }
@keyframes scrollx { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- 13. VOICES ---------- */
.voices { max-width:var(--maxw); margin:90px auto; padding:0 28px; }
.voices-head { text-align:center; margin-bottom:40px; }
.voice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.voice { background:#fff; border-radius:var(--r); padding:30px; box-shadow:0 10px 26px rgba(45,45,45,0.05); }
.voice blockquote { font-size:1.05rem; }
.voice .who { display:flex; align-items:center; gap:12px; margin-top:18px; }
.voice .dot { width:40px; height:40px; border-radius:50%; flex:none; }
.voice:nth-child(1) .dot{ background:var(--butter);} .voice:nth-child(2) .dot{ background:var(--coral);} .voice:nth-child(3) .dot{ background:var(--mint);}
.voice .name { font-family:var(--head); font-weight:700; font-size:.92rem; }
.voice .role { font-size:.8rem; color:var(--dim); }

/* ---------- 14. FAQ ---------- */
.faq { max-width:800px; margin:0 auto; }
.faq-item { background:#fff; border-radius:var(--r); margin-bottom:14px; box-shadow:0 8px 20px rgba(45,45,45,0.04); }
.faq-q { width:100%; text-align:left; background:none; border:none; font-family:var(--head); font-weight:700; font-size:1.1rem; color:var(--ink); padding:22px 26px; cursor:pointer; display:flex; gap:16px; align-items:center; }
.faq-q .sign { margin-left:auto; width:30px; height:30px; border-radius:50%; background:var(--butter); display:grid; place-items:center; font-size:1.1rem; transition:transform .25s; flex:none; }
.faq-q[aria-expanded="true"] .sign { transform:rotate(45deg); background:var(--sky); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a div { padding:0 26px 24px; color:var(--dim); }

/* ---------- 15. CTA ---------- */
.cta { max-width:var(--maxw); margin:90px auto; padding:0 28px; }
.cta-inner { background:var(--butter); border-radius:var(--r-lg); text-align:center; padding:80px 6vw; position:relative; overflow:hidden; }
.cta-inner h2 { font-size:clamp(2rem,5vw,3.6rem); margin-bottom:14px; }
.cta-inner p { color:#4a473f; max-width:44ch; margin:0 auto 28px; }

/* ---------- 16. FORMS / subpages ---------- */
.page-head { max-width:var(--maxw); margin:0 auto; padding:70px 28px 30px; text-align:center; }
.page-head .eyebrow { font-family:var(--head); font-weight:500; text-transform:uppercase; letter-spacing:.22em; font-size:.84rem; color:var(--sky); display:block; margin-bottom:14px; }
.page-head h1 { font-size:clamp(2.4rem,7vw,4.4rem); }
.prose { max-width:720px; margin:0 auto; }
.prose h2 { font-size:1.6rem; margin:32px 0 12px; }
.prose p, .prose li { color:#4a473f; margin-bottom:14px; }
.prose ul { padding-left:22px; }
.prose ul li { margin-bottom:8px; }
.section-pad { padding:50px 0 80px; }
.contact-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:46px; align-items:start; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.field { margin-bottom:20px; }
.field label { display:block; font-family:var(--head); font-weight:500; font-size:.84rem; margin-bottom:8px; }
.field input, .field textarea, .field select { width:100%; background:#fff; border:2px solid #efe9d9; border-radius:16px; padding:14px 16px; font-family:var(--body); font-size:1rem; color:var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(133,193,252,0.2); }
.form-status { margin-top:14px; font-family:var(--head); font-weight:600; background:var(--mint); color:var(--ink); display:inline-block; padding:10px 16px; border-radius:50px; }
.form-status:empty { display:none; }
.form-note { color:var(--dim); font-size:.86rem; margin-top:10px; }
.info { background:#fff; border-radius:var(--r); padding:28px; box-shadow:0 10px 26px rgba(45,45,45,0.05); }
.info li { padding:16px 0; border-bottom:1px solid #efe9d9; }
.info li:last-child { border-bottom:0; }
.info .k { display:block; font-family:var(--head); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sky); margin-bottom:4px; }

/* ---------- 17. FOOTER ---------- */
.site-footer { background:var(--ink); color:var(--cream); padding:66px 0 30px; margin-top:30px; }
.footer-top { max-width:var(--maxw); margin:0 auto 44px; padding:0 28px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.footer-brand .brand { color:var(--cream); font-size:1.7rem; }
.footer-brand p { color:#bdb8ac; margin-top:12px; max-width:34ch; }
.footer-col h4 { font-family:var(--head); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--butter); margin-bottom:14px; }
.footer-col a { display:block; color:#cfc9bc; padding:6px 0; }
.footer-col a:hover { color:var(--butter); }
.footer-bottom { max-width:var(--maxw); margin:0 auto; padding:22px 28px 0; border-top:1px solid rgba(255,255,255,0.14); text-align:center; font-size:.8rem; color:#bdb8ac; }

/* ---------- 18. 404 ---------- */
.error-page { min-height:70vh; display:grid; place-items:center; text-align:center; padding:80px 24px; }
.error-page .sun-big { width:120px; height:120px; border-radius:50%; background:var(--butter); margin:0 auto 26px; box-shadow:0 0 0 16px rgba(252,221,133,0.3); }
.error-page .code { font-family:var(--head); font-weight:700; font-size:clamp(3rem,10vw,5rem); }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:900px){
  .about-inner { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:1fr; }
  .voice-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:560px){
  .nav-links { position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0; background:var(--cream); padding:6px 0; box-shadow:0 12px 24px rgba(45,45,45,0.08); transform:translateY(-150%); transition:transform .3s var(--ease); }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:15px 28px; width:100%; }
  .nav-links .nav-cta { margin:10px 28px; text-align:center; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .footer-top { grid-template-columns:1fr; }
}

/* ---------- 20. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  #cursor { display:none!important; }
}


/* ============================================================
   22. MOBILE REFINEMENTS (overflow + rhythm, baked in)
   ============================================================ */
html, body { overflow-x:clip; }
.search-bar input, .field input, .field textarea, .field select { min-width:0; }

@media (max-width:900px){
  .pdp { grid-template-columns:1fr; padding:36px 24px 56px; gap:32px; }
  .pdp-media { position:static; }
  .product-grid { grid-template-columns:1fr 1fr; gap:18px; }
  .cart-line { grid-template-columns:84px 1fr; }
  .cart-line .th { width:84px; }
  .cart-line .qcol, .cart-line .lp { grid-column:2; }
  .cart-wrap { padding:36px 24px 56px; }
  .about, .svc, .voices, .cta { margin:60px auto; }
  .page-head { padding:48px 24px 22px; }
  .hero { padding:52px 24px 34px; }
  .section-pad { padding:36px 0 60px; }
}
@media (max-width:560px){
  .product-grid { grid-template-columns:1fr; }
  .page-head h1 { font-size:clamp(2rem,9vw,2.8rem); }
  .search-bar { padding:0 24px; }
  .search-bar button { padding:0 20px; }
  .about-inner { padding:40px 26px; }
  .cta-inner { padding:52px 26px; }
  .gallery-head { margin-top:44px; }
  .card { flex-basis:min(86vw,340px); }
  .cart-tot .row { font-size:1.1rem; }
}