/* Nona Laundry & Dry Cleaning */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, ol, ul, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
svg { display: inline-block; vertical-align: middle; flex: none; }
a { color: inherit; }
:root {
  --background: 195 58% 98%;
  --foreground: 210 48% 20%;
  --border: 199 34% 86%;
  --input: 199 34% 86%;
  --card: 0 0% 100%;
  --card-foreground: 210 48% 20%;
  --primary: 207 74% 39%;
  --primary-foreground: 0 0% 100%;
  --secondary: 197 64% 92%;
  --secondary-foreground: 207 54% 28%;
  --muted: 196 42% 94%;
  --muted-foreground: 207 20% 49%;
  --accent: 42 80% 74%;
  --accent-foreground: 210 48% 20%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --ring: 207 74% 39%;
  --radius: 1rem;
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-serif: 'Playfair Display', serif;
  --app-font-head: 'Manrope', sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
::selection { background: #c5e8f3; color: #183b58; }
.serif { font-family: var(--app-font-serif); }
.eyebrow { color: #397994; text-transform: uppercase; letter-spacing: .19em; font-size: .68rem; font-weight: 700; }
.reveal { animation: arrive .7s cubic-bezier(.2,.75,.25,1) both; }
.reveal-delay { animation-delay: .14s; }
.reveal-later { animation-delay: .28s; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:root { --ink: #183c58; --blue: #286d8c; --sky: #dceff4; --pale: #f3fafb; --line: #d9e9ec; --muted-ink: #5f7a88; --gold: #e6c15c; }
.page { overflow-x: clip; }
.site-header { height: 82px; padding: 0 max(calc((100vw - 1240px)/2), 6.2vw); display:flex; align-items:center; justify-content:space-between; background:#f9fcfc; position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(39,94,119,.09); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:#347c92; background:#e4f3f5; border-radius:13px; }
.brand-name { font-family:'Manrope',sans-serif; font-size:17px; font-weight:800; letter-spacing:-.7px; line-height:1; }
.brand-name i { font-style:normal; color:#43869b; }
.brand-name small { display:block; font-size:9px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; margin-top:5px; color:#68828d; }
.main-nav { display:flex; align-items:center; gap:35px; }
.main-nav a { color:#56717e; font-size:13px; text-decoration:none; font-weight:600; transition:color .2s ease; }
.main-nav a:hover { color:#246887; }
.main-nav .nav-phone { color:#236481; display:flex; align-items:center; gap:8px; border-left:1px solid var(--line); padding-left:25px; }
.menu-toggle { display:none; background:none; color:var(--ink); border:0; padding:8px; }
.hero { min-height:622px; padding:72px max(calc((100vw - 1240px)/2), 6.2vw) 68px; position:relative; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; background:linear-gradient(110deg,#f8fcfc 0%,#f3fafb 60%,#eaf5f7 100%); }
.hero::after { content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(92,157,173,.12); border-radius:50%; right:-173px; top:-220px; pointer-events:none; }
.hero-copy { position:relative; z-index:2; padding-bottom:20px; }
.eyebrow { display:flex; align-items:center; gap:9px; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#78b2c0; box-shadow:0 0 0 4px #dfedf0; }
.hero h1 { font-family:'Manrope',sans-serif; color:#1d3e59; letter-spacing:-3.8px; font-size:clamp(3.5rem,6.3vw,5.7rem); line-height:1.02; margin:26px 0 20px; font-weight:600; }
.hero h1 span { color:#46879b; font-family:'Playfair Display',serif; font-weight:500; font-style:italic; letter-spacing:-3.1px; }
.hero-lead { font-size:16px; line-height:1.75; max-width:470px; color:#607b87; margin:0 0 28px; }
.hero-actions { display:flex; align-items:center; gap:26px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:0 21px; border-radius:6px; text-decoration:none; border:1px solid transparent; font-size:13px; font-weight:700; transition:transform .2s ease,background .2s ease,color .2s ease; cursor:pointer; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:#2c718d; box-shadow:0 8px 20px rgba(43,107,134,.13); }
.button-primary:hover { background:#205c78; }
.text-link { text-decoration:none; font-size:13px; color:#3f7588; display:flex; align-items:center; gap:8px; font-weight:700; }
.hero-meta { margin-top:39px; display:flex; align-items:center; gap:12px; color:#78909a; font-size:11px; letter-spacing:.015em; }
.hero-meta span { display:flex; align-items:center; gap:7px; }
.hero-meta svg { color:#5d99a9; }
.hero-meta .meta-divider { height:16px; width:1px; background:#cbdfe4; }
.hero-art-wrap { height:480px; position:relative; display:flex; align-items:center; justify-content:center; }
.hero-halo { width:430px; height:430px; position:absolute; border:1px solid rgba(91,154,171,.2); border-radius:50%; }
.hero-halo::before,.hero-halo::after { content:""; position:absolute; border:1px solid rgba(91,154,171,.17); border-radius:50%; inset:27px; }
.hero-halo::after { inset:56px; border-style:dashed; opacity:.7; }
.sun-disc { width:255px; height:255px; position:absolute; border-radius:50%; background:#e7f3f5; top:47px; right:67px; }
.laundry-still-life { width:360px; height:338px; position:relative; z-index:2; }
.shirt-shape { position:absolute; z-index:3; top:44px; left:106px; width:152px; height:163px; border-radius:48% 48% 18% 18%; background:#f9fcfb; color:#5895a5; display:grid; place-items:center; filter:drop-shadow(0 17px 16px rgba(37,91,111,.13)); transform:rotate(-8deg); }
.shirt-shape svg { color:#4b8395; fill:#deeff2; }
.folded { position:absolute; border-radius:10px 10px 18px 18px; transform:skewY(-4deg); box-shadow:0 14px 19px rgba(37,91,111,.1); }
.folded-one { width:210px; height:93px; left:74px; top:180px; background:#b8dce3; }
.folded-two { width:194px; height:78px; left:94px; top:227px; background:#f9fcfb; border:1px solid #d9ebed; }
.folded-three { width:169px; height:67px; left:110px; top:268px; background:#8abac6; }
.sparkle { position:absolute; z-index:4; color:#d8b64f; }
.sparkle-a { left:62px; top:74px; }.sparkle-b { right:40px; top:155px; }
.still-caption { position:absolute; z-index:4; right:13px; bottom:9px; color:#678793; font-family:'Playfair Display',serif; font-style:italic; font-size:13px; display:flex; align-items:center; gap:10px; }
.caption-line { display:inline-block; width:34px; border-top:1px solid #8cb7c2; }
.hero-art-note { position:absolute; bottom:18px; left:-13px; background:#fff; border:1px solid #e3eff1; color:#4d7483; font-size:11px; line-height:1.55; padding:12px 16px; border-radius:5px; box-shadow:0 8px 25px rgba(43,91,111,.08); transform:rotate(-3deg); }
.note-star { color:#d8b64f; float:left; margin:2px 9px 0 0; flex:none; }
.scroll-cue { position:absolute; bottom:25px; left:50%; display:flex; align-items:center; gap:8px; text-decoration:none; color:#77919b; font-size:9px; letter-spacing:.16em; }
.section-pad { padding:105px max(calc((100vw - 1240px)/2), 6.2vw) 111px; }
.service-intro { background:#fff; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:47px; }
.section-heading h2,.care-copy h2,.pickup-copy h2,.about-story h2,.directions-intro h2,.contact-left h2 { font-size:clamp(2.35rem,4vw,3.65rem); letter-spacing:-1.9px; line-height:1.12; font-weight:500; color:#20435d; margin:18px 0 0; }
.section-heading h2 em,.care-copy h2 em,.pickup-copy h2 em,.about-story h2 em,.directions-intro h2 em,.contact-left h2 em { color:#4a8a9b; font-weight:500; }
.section-heading > p { width:310px; color:#6b828d; font-size:14px; line-height:1.8; margin:0 0 5px; }
.service-grid { display:grid; grid-template-columns:1fr 1fr .87fr; gap:20px; align-items:stretch; }
.service-feature { background:#f1f8f9; padding:29px 29px 27px; border-radius:6px; min-height:295px; position:relative; overflow:hidden; }
.service-blue { background:#e7f2f5; }
.service-icon { width:44px; height:44px; color:#3a7c91; display:grid; place-items:center; border:1px solid #c6e0e5; border-radius:50%; margin-bottom:22px; }
.service-number { color:#77939c; font-size:9px; letter-spacing:.13em; font-weight:700; }
.service-feature h3 { margin:10px 0 8px; font-family:'Playfair Display',serif; font-size:24px; font-weight:500; color:#244960; }
.service-feature p { color:#6d838c; font-size:12px; line-height:1.7; max-width:285px; margin:0 0 18px; }
.service-link { color:#38778b; font-weight:700; font-size:11px; text-decoration:none; display:inline-flex; align-items:center; gap:7px; position:relative; z-index:1; }
.service-motif { position:absolute; right:17px; bottom:16px; opacity:.5; }
.dry-motif { width:80px; height:48px; border:1px solid #a9cdd5; border-radius:50%; transform:rotate(-24deg); }
.dry-motif::after { content:""; position:absolute; inset:8px 17px; border:1px solid #a9cdd5; border-radius:50%; }
.dry-motif span { position:absolute; background:#7eafbd; width:3px; height:3px; border-radius:50%; }
.dry-motif span:nth-child(1) { top:8px; left:23px; }.dry-motif span:nth-child(2) { top:25px; left:51px; }.dry-motif span:nth-child(3) { top:34px; left:31px; }
.route-motif { width:95px; height:43px; border-bottom:1px dashed #78aabd; transform:rotate(-15deg); }
.route-motif span { position:absolute; border:1px solid #6fa5b5; border-radius:50%; width:7px; height:7px; background:#e7f2f5; }
.route-motif span:nth-child(1) { left:3px; bottom:-4px; }.route-motif span:nth-child(2) { left:32px; bottom:7px; }.route-motif span:nth-child(3) { left:59px; bottom:20px; }.route-motif span:nth-child(4) { right:0; bottom:28px; }
.service-others { padding:18px 10px 10px 15px; }
.service-others h3 { font-family:'Playfair Display',serif; font-size:22px; font-weight:500; color:#244960; margin:11px 0 20px; }
.mini-service { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #e3edef; }
.mini-icon { width:35px; height:35px; color:#4d8798; background:#edf6f7; border-radius:50%; display:grid; place-items:center; flex:none; }
.dry-symbol { font-size:23px; line-height:1; transform:rotate(45deg); }
.mini-service strong { font-size:12px; color:#34586c; }.mini-service p { margin:3px 0 0; font-size:10px; color:#83959c; }
.care-section { padding:93px max(calc((100vw - 1130px)/2), 9vw) 100px; display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:92px; background:#eff7f8; }
.care-art { min-height:388px; position:relative; display:flex; align-items:center; justify-content:center; }
.care-art-backdrop { position:absolute; width:350px; height:350px; border-radius:50%; background:#dceef1; }
.ironing-art { width:355px; max-width:100%; z-index:1; }
.care-art-label { position:absolute; bottom:20px; left:-15px; background:#fff; border:1px solid #e0edf0; box-shadow:0 9px 22px rgba(43,91,111,.08); padding:13px 17px; display:flex; gap:11px; align-items:center; font-family:'Playfair Display',serif; color:#607b87; font-size:12px; line-height:1.55; transform:rotate(-3deg); }
.label-asterisk { color:#dfbd56; flex:none; }.care-art-label b { color:#365d70; font-weight:600; }
.care-copy h2 { margin:18px 0 17px; }
.care-copy > p,.pickup-copy > p,.directions-intro > p,.contact-left > p { color:#6b828d; font-size:13px; line-height:1.8; max-width:425px; }
.care-points { margin:26px 0 25px; border-top:1px solid #d9e8eb; }
.care-points > li { display:flex; align-items:center; gap:17px; padding:12px 0; border-bottom:1px solid #d9e8eb; }
.care-points > li > span { color:#83aab5; font-size:11px; font-weight:700; font-family:'Manrope',sans-serif; }
.care-points p { margin:0; display:flex; flex-direction:column; gap:3px; color:#35596e; font-size:12px; }
.care-points small { color:#78909a; font-size:10px; }
.button-outline { border-color:#b7d4dc; color:#316d83; background:transparent; }
.button-outline:hover { background:#e2f1f3; }
.pickup-section { padding:102px max(calc((100vw - 1130px)/2), 9vw); display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; background:#fff; }
.pickup-copy h2 { margin:18px 0 17px; }
.pickup-copy > p { max-width:415px; margin-bottom:20px; }
.express-note { display:flex; gap:13px; align-items:center; border-left:2px solid #e4c464; padding:9px 0 9px 15px; margin:26px 0; }
.express-icon { width:37px; height:37px; background:#fbf7e9; color:#987e35; border-radius:50%; display:grid; place-items:center; flex:none; }
.express-note p { margin:0; color:#647c87; font-size:11px; line-height:1.7; }.express-note strong { color:#31596f; font-size:12px; }
.microcopy { font-size:10px!important; margin:12px 0!important; color:#8a9ca2!important; }
.pickup-art { height:340px; position:relative; display:grid; place-items:center; }
.delivery-sun { position:absolute; right:54px; top:3px; width:242px; height:242px; border-radius:50%; background:#f5f3e8; }
.delivery-art { position:relative; z-index:1; width:min(430px,100%); }
.delivery-stamp { position:absolute; right:10px; top:59px; z-index:2; width:90px; height:90px; border:1px solid #d8bf61; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#82713e; font-size:8px; font-weight:700; letter-spacing:.13em; line-height:1.5; transform:rotate(10deg); background:rgba(255,255,255,.6); }
.delivery-stamp span:nth-child(2) { font-family:'Playfair Display',serif; font-size:16px; font-weight:500; }
.delivery-caption { position:absolute; left:0; bottom:3px; z-index:2; color:#64828e; font-family:'Playfair Display',serif; font-style:italic; font-size:13px; line-height:1.45; }
.about-section { padding:96px max(calc((100vw - 1130px)/2), 9vw); display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; background:#fff; }
.about-story h2 { margin:18px 0 17px; }
.about-story > p { max-width:455px; color:#6b828d; font-size:13px; line-height:1.8; margin:0 0 23px; }
.about-reasons { padding:32px 35px; background:#eff7f8; border:1px solid #e2eef0; border-radius:7px; }
.about-reasons h3 { color:#244960; font-family:'Playfair Display',serif; font-weight:500; font-size:25px; line-height:1.3; margin:13px 0 18px; }
.reason-list { border-top:1px solid #d9e8eb; }
.reason-list > li { display:flex; align-items:flex-start; gap:15px; padding:14px 0; border-bottom:1px solid #d9e8eb; }
.reason-list > li > span { color:#83aab5; font-size:10px; font-weight:700; padding-top:2px; }
.reason-list p { display:flex; flex-direction:column; gap:4px; margin:0; color:#35596e; font-size:12px; }
.reason-list small { color:#78909a; font-size:10px; line-height:1.55; }
.directions-section { padding:96px max(calc((100vw - 1240px)/2), 6.2vw); display:grid; grid-template-columns:.77fr 1.23fr; gap:66px; align-items:center; background:#f1f8f9; }
.directions-intro h2 { margin:17px 0 14px; font-size:clamp(2.4rem,4vw,3.3rem); }
.directions-intro > p { max-width:345px; margin:0 0 16px; }
.map-link { display:inline-flex; align-items:center; gap:8px; color:#32768d; font-weight:700; font-size:12px; text-decoration:none; border-bottom:1px solid #aacbd4; padding-bottom:4px; }
.address-card { display:flex; gap:13px; background:#fff; padding:17px; margin-top:28px; border:1px solid #e0edef; border-radius:5px; }
.address-icon { width:35px; height:35px; border-radius:50%; background:#e9f4f6; color:#4a8798; display:grid; place-items:center; flex:none; }
.address-label { font-size:8px; letter-spacing:.16em; font-weight:700; color:#7b979f; }
.address-card address { color:#69818b; font-size:10px; line-height:1.75; margin:6px 0 0; }
.address-card b { color:#31586d; font-weight:700; }
.walk-label { display:flex; align-items:center; gap:12px; margin-top:17px; }
.walk-badge { width:34px; height:34px; border:1px solid #b8d7df; display:grid; place-items:center; border-radius:50%; font-size:10px; color:#4e8395; font-weight:700; }
.walk-label p { color:#718893; font-size:10px; line-height:1.55; margin:0; }.walk-label b { color:#416778; }
.wayfinding-card { padding:18px 18px 15px; border:1px solid #dce9ec; background:#fff; box-shadow:0 15px 40px rgba(43,91,111,.055); border-radius:8px; }
.wayfinding-top { display:flex; justify-content:space-between; align-items:center; color:#77919a; font-size:9px; letter-spacing:.14em; font-weight:700; padding:2px 5px 0; }
.walk-time { display:flex; gap:5px; align-items:center; color:#6693a0; font-size:9px; letter-spacing:0; }
.wayfinding-art { display:block; width:100%; margin:8px auto 4px; }
.wayfinding-legend { display:flex; justify-content:center; gap:21px; flex-wrap:wrap; padding:4px 0; color:#69818a; font-size:9px; }
.wayfinding-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:7px; height:7px; border-radius:50%; background:#80b6c2; }.dot-b { background:#dfbd56; }.dot-nona { background:#315e75; }
.contact-section { padding:105px max(calc((100vw - 1130px)/2), 9vw) 110px; display:grid; grid-template-columns:.92fr 1.08fr; gap:85px; align-items:start; background:#fff; }
.contact-left h2 { margin:18px 0 17px; }
.contact-left > p { max-width:385px; margin-bottom:26px; }
.phone-card { display:flex; align-items:center; gap:13px; padding:13px 14px; width:fit-content; min-width:240px; border:1px solid #dce9ec; text-decoration:none; border-radius:5px; color:#315b70; }
.contact-map-card { width:100%; max-width:390px; min-width:0; margin-top:13px; align-items:flex-start; }
.contact-map-card strong { font-size:12px; }
.contact-map-card span:nth-child(2) small:last-child { color:#78909a; font-size:10px; font-weight:400; letter-spacing:0; line-height:1.6; text-transform:none; }
.phone-icon { width:39px; height:39px; background:#e9f4f6; color:#417f91; border-radius:50%; display:grid; place-items:center; }
.phone-card span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }.phone-card small { font-size:8px; letter-spacing:.15em; color:#78939d; font-weight:700; }.phone-card strong { font-family:'Manrope',sans-serif; font-size:15px; letter-spacing:.02em; }
.phone-arrow { margin-left:auto; color:#7395a0; }
.hours-card { display:flex; gap:10px; color:#71909a; align-items:flex-start; margin:20px 4px; font-size:11px; line-height:1.65; }.hours-card svg { color:#5992a0; margin-top:2px; }.hours-card b { color:#466b7b; }
.contact-form { background:#f3f9fa; padding:31px 34px 25px; border:1px solid #e1edef; border-radius:7px; }
.form-top { display:flex; align-items:center; justify-content:space-between; }
.form-kicker { font-size:9px; letter-spacing:.16em; font-weight:700; color:#6f929d; }
.form-mark { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#4d8597; background:#e3f0f3; }
.contact-form h3 { font-family:'Playfair Display',serif; font-weight:500; color:#264b61; font-size:24px; margin:13px 0 5px; }
.form-description { font-size:11px; line-height:1.65; color:#788e97; margin:0 0 20px; max-width:380px; }
.contact-form label { display:block; color:#466575; font-size:10px; font-weight:700; margin:13px 0 6px; }
.contact-form label span { color:#90a1a7; font-weight:400; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid #d8e6e9; background:#fff; color:#34576a; border-radius:4px; outline:none; padding:11px 12px; font-size:11px; transition:border-color .2s ease, box-shadow .2s ease; }
.contact-form textarea { resize:vertical; line-height:1.6; min-height:90px; }
.contact-form input:focus,.contact-form textarea:focus { border-color:#79acb9; box-shadow:0 0 0 3px rgba(99,164,179,.12); }
.contact-form input::placeholder { color:#a4b3b8; }
.form-submit { width:100%; margin-top:16px; min-height:47px; }
.form-footnote { font-size:9px; color:#8b9da3; line-height:1.55; text-align:center; margin:11px 0 0; }
.footer { padding:40px max(calc((100vw - 1240px)/2), 6.2vw) 17px; background:#eaf4f6; }
.footer-main { display:grid; grid-template-columns:1.15fr .85fr 1.4fr auto; align-items:center; gap:28px; padding-bottom:33px; }
.footer-brand .brand-mark { background:#d6eaee; }
.footer-main > p { font-family:'Playfair Display',serif; color:#718c95; font-size:12px; font-style:italic; line-height:1.6; margin:0; }
.footer-links { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-links a,.footer-phone { color:#65808a; font-size:10px; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.footer-links a:hover,.footer-phone:hover { color:#2c6f88; }
.footer-phone { font-size:12px; font-weight:700; color:#346e84; white-space:nowrap; }
.footer-bottom { border-top:1px solid #d3e4e8; padding-top:15px; display:flex; justify-content:space-between; color:#81979e; font-size:9px; }
.mobile-callbar { display:none; }

@media (max-width: 900px) {
  .site-header { padding:0 5vw; }
  .hero { padding-left:6vw; padding-right:6vw; grid-template-columns:1.02fr .98fr; min-height:590px; }
  .hero h1 { font-size:clamp(3rem,7vw,4.7rem); }
  .hero-art-wrap { transform:scale(.88); transform-origin:center; }
  .section-pad,.directions-section { padding-left:6vw; padding-right:6vw; }
  .care-section,.pickup-section,.about-section,.contact-section { padding-left:7vw; padding-right:7vw; gap:42px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .service-others { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0 20px; padding:18px 0 0; }
  .service-others .eyebrow,.service-others h3 { grid-column:span 2; }
  .mini-service { border-top:1px solid #e3edef; }
  .directions-section { gap:35px; }
  .wayfinding-card { padding:12px; }
  .footer { padding-left:6vw; padding-right:6vw; }
  .footer-main { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .page { padding-bottom:64px; }
  .site-header { height:70px; padding:0 21px; }
  .brand-mark { width:35px; height:35px; }.brand-name { font-size:16px; }
  .menu-toggle { display:grid; place-items:center; }
  .main-nav { position:absolute; top:69px; left:0; right:0; background:#f9fcfc; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px 22px 17px; border-bottom:1px solid #dce9ec; box-shadow:0 12px 20px rgba(33,82,101,.06); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:13px 2px; border-bottom:1px solid #edf3f4; font-size:13px; }
  .main-nav .nav-phone { border-left:0; padding:14px 2px 5px; }
  .hero { display:flex; flex-direction:column; align-items:stretch; padding:58px 24px 48px; min-height:unset; }
  .hero h1 { font-size:clamp(3.1rem,13vw,4.25rem); letter-spacing:-2.7px; margin-top:22px; }
  .hero h1 span { letter-spacing:-2px; }
  .hero-lead { font-size:14px; max-width:390px; }
  .hero-actions { gap:17px; flex-wrap:wrap; }
  .button { min-height:48px; padding:0 16px; font-size:12px; }
  .hero-meta { margin-top:26px; flex-wrap:wrap; gap:9px; font-size:10px; }
  .hero-art-wrap { height:340px; transform:scale(.86); margin:-2px -23px -22px; }
  .hero-halo { width:345px; height:345px; }
  .sun-disc { width:213px; height:213px; right:54px; top:40px; }
  .scroll-cue { display:none; }
  .section-pad { padding:70px 23px 76px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading h2,.care-copy h2,.pickup-copy h2,.about-story h2,.directions-intro h2,.contact-left h2 { font-size:2.6rem; letter-spacing:-1.5px; }
  .section-heading > p { width:auto; margin-top:17px; font-size:12px; max-width:420px; }
  .service-grid { grid-template-columns:1fr; gap:12px; }
  .service-feature { min-height:270px; padding:25px 24px; }
  .service-others { grid-column:auto; display:block; padding:15px 2px 0; }
  .service-others h3 { margin-bottom:12px; }
  .care-section { display:flex; flex-direction:column-reverse; align-items:stretch; gap:22px; padding:67px 25px 70px; }
  .care-copy > p,.pickup-copy > p,.directions-intro > p,.contact-left > p { font-size:12px; }
  .care-art { min-height:320px; margin:0 0 10px; }
  .care-art-backdrop { width:285px; height:285px; }
  .ironing-art { width:320px; }
  .care-art-label { left:0; bottom:0; }
  .care-points { margin-top:21px; }
  .pickup-section { display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:69px 25px 72px; }
  .pickup-art { height:285px; margin-top:3px; }
  .delivery-art { width:100%; }
  .delivery-sun { width:205px; height:205px; right:30px; }
  .delivery-stamp { width:76px; height:76px; right:0; top:33px; font-size:7px; }
  .delivery-caption { left:5px; bottom:-1px; font-size:12px; }
  .about-section { display:flex; flex-direction:column; align-items:stretch; gap:30px; padding:68px 24px 72px; }
  .about-story > p { font-size:12px; }
  .about-reasons { padding:25px 22px; }
  .about-reasons h3 { font-size:23px; }
  .directions-section { display:flex; flex-direction:column; align-items:stretch; gap:30px; padding:68px 21px 72px; }
  .address-card { margin-top:23px; }
  .wayfinding-card { padding:9px; }
  .wayfinding-top { font-size:8px; }
  .wayfinding-art { margin:5px auto; }
  .wayfinding-legend { gap:10px 15px; font-size:8px; }
  .contact-section { display:flex; flex-direction:column; gap:30px; padding:70px 23px 76px; }
  .contact-form { padding:24px 20px 20px; width:100%; }
  .contact-form h3 { font-size:22px; }
  .footer { padding:32px 23px 15px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:23px 15px; padding-bottom:25px; }
  .footer-main > p { font-size:11px; }
  .footer-links { grid-column:span 2; gap:14px 17px; }
  .footer-bottom { flex-direction:column; gap:7px; font-size:8px; }
  .mobile-callbar { display:grid; grid-template-columns:.8fr 1.2fr; gap:8px; position:fixed; z-index:30; bottom:0; left:0; right:0; padding:9px 13px calc(9px + env(safe-area-inset-bottom)); background:rgba(249,252,252,.97); border-top:1px solid #dce9ec; box-shadow:0 -5px 16px rgba(37,78,94,.06); }
  .mobile-callbar a { min-height:43px; display:flex; gap:8px; align-items:center; justify-content:center; border-radius:5px; text-decoration:none; color:#306e85; font-weight:700; font-size:12px; background:#e8f3f5; }
  .mobile-callbar a:last-child { color:white; background:#2c718d; }
}


/* ---------- Additions: accessibility, language switch, readable sizes ---------- */
.skip-link { position:absolute; left:12px; top:-60px; z-index:50; background:#183c58; color:#fff; padding:10px 14px; border-radius:6px; font-size:14px; font-weight:700; text-decoration:none; }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid #2c718d; outline-offset:3px; border-radius:4px; }
.header-tools { display:none; align-items:center; gap:6px; }
.lang-switch { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:36px; padding:0 10px; border:1px solid #c9dfe4; border-radius:999px; color:#236481 !important; font-size:13px !important; font-weight:700; text-decoration:none; }
.main-nav .lang-switch { padding:0 12px; }
.main-nav .lang-switch:hover { background:#e4f3f5; }
.menu-toggle { cursor:pointer; min-width:44px; min-height:44px; }
.menu-toggle .icon-close { display:none; }
.menu-toggle[aria-expanded="true"] .icon-open { display:none; }
.menu-toggle[aria-expanded="true"] .icon-close { display:inline; }
.svg-label { fill:#315a72; font-size:13px; font-weight:700; letter-spacing:2px; font-family:'Manrope', sans-serif; }
.svg-soi { fill:#547c8a; font-size:12px; letter-spacing:1px; }
.wayfinding-card { margin:0; }
/* legend colours match the walkers in the drawing (A = gold, B = blue) */
.legend-dot.dot-a { background:#e3b956; }
.legend-dot.dot-b { background:#78aebc; }
.not-found { min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:40px 24px; max-width:620px; margin:0 auto; color:#4f6b78; font-size:16px; line-height:1.7; }
.not-found h1 { color:#20435d; font-size:clamp(2.2rem,6vw,3.2rem); font-weight:500; margin-top:24px; }

/* Readable minimum sizes (the original export went down to 8px) */
.eyebrow { font-size:12px; }
.main-nav a { font-size:14px; }
.button, .text-link { font-size:14px; }
.hero-meta { font-size:13px; }
.hero-art-note { font-size:12px; }
.scroll-cue { font-size:11px; }
.section-heading > p, .care-copy > p, .pickup-copy > p, .directions-intro > p, .contact-left > p, .about-story > p { font-size:15px; }
.service-number { font-size:11px; }
.service-feature p { font-size:14px; }
.service-link { font-size:13px; }
.mini-service strong { font-size:14px; }
.mini-service p { font-size:13px; }
.care-points p, .reason-list p { font-size:14px; }
.care-points small, .reason-list small { font-size:13px; }
.care-points > li > span, .reason-list > li > span { font-size:12px; }
.express-note p { font-size:13px; }
.express-note strong { font-size:14px; }
.microcopy { font-size:12px !important; }
.delivery-stamp { font-size:9px; }
.map-link { font-size:14px; }
.address-label, .phone-card small, .form-kicker, .wayfinding-top, .walk-time { font-size:11px; }
.address-card address { font-size:13px; }
.walk-badge { font-size:11px; }
.walk-label p { font-size:13px; }
.wayfinding-legend { font-size:12px; }
.contact-map-card span:nth-child(2) small:last-child { font-size:13px; }
.hours-card { font-size:14px; }
.form-description { font-size:13px; }
.contact-form label { font-size:13px; }
.contact-form input, .contact-form textarea { font-size:16px; }
.form-footnote { font-size:12px; }
.footer-main > p { font-size:14px; }
.footer-links a { font-size:13px; }
.footer-phone { font-size:14px; }
.footer-bottom { font-size:12px; gap:16px; flex-wrap:wrap; }
.care-art-label { font-size:13px; }
.delivery-caption, .still-caption { font-size:14px; }

/* Muted text a touch darker for 4.5:1 contrast on white */
.section-heading > p, .care-copy > p, .pickup-copy > p, .directions-intro > p, .contact-left > p, .about-story > p, .service-feature p, .hero-lead { color:#536c78; }
.mini-service p, .care-points small, .reason-list small, .walk-label p, .address-card address, .form-description, .form-footnote, .microcopy, .hero-meta, .footer-links a, .footer-bottom, .wayfinding-legend, .contact-map-card span:nth-child(2) small:last-child, .hours-card { color:#5a717c !important; }
.service-number, .address-label, .phone-card small, .form-kicker, .wayfinding-top, .scroll-cue, .contact-form label span { color:#5d7782; }
.eyebrow { color:#2f6f89; }

@media (max-width: 1100px) and (min-width: 681px) {
  .main-nav { gap:22px; }
  .main-nav .nav-phone { padding-left:18px; }
}
@media (max-width: 900px) and (min-width: 681px) {
  .main-nav { gap:14px; }
  .main-nav a { font-size:13px; }
  .main-nav .nav-phone { display:none; }
}
@media (max-width: 680px) {
  .header-tools { display:flex; }
  .main-nav .lang-switch-desktop { display:none; }
  .main-nav a { font-size:15px; }
  .mobile-callbar a { font-size:14px; min-height:46px; }
  .care-copy > p, .pickup-copy > p, .directions-intro > p, .contact-left > p, .about-story > p, .section-heading > p { font-size:15px; }
  .hero-lead { font-size:16px; }
  .hero-meta { font-size:13px; }
  .wayfinding-top, .walk-time { font-size:10px; }
  .wayfinding-legend { font-size:12px; }
  .delivery-stamp { font-size:8px; }
  .footer-bottom { font-size:12px; }
  .phone-card { min-width:0; width:100%; }
}

/* ---------- Thai ---------- */
:lang(th) { --app-font-sans: 'Noto Sans Thai', 'DM Sans', sans-serif; --app-font-serif: 'Noto Serif Thai', 'Playfair Display', serif; --app-font-head: 'Noto Sans Thai', 'Manrope', sans-serif; }
html:lang(th) body { line-height:1.7; }
:lang(th) .eyebrow { letter-spacing:.04em; text-transform:none; font-size:13px; }
:lang(th) .hero h1 { font-family:var(--app-font-head); letter-spacing:0; line-height:1.3; font-size:clamp(2.6rem,5vw,4.4rem); }
:lang(th) .hero h1 span { font-family:var(--app-font-serif); font-style:normal; letter-spacing:0; }
:lang(th) h2, :lang(th) h3, :lang(th) .section-heading h2, :lang(th) .care-copy h2, :lang(th) .pickup-copy h2, :lang(th) .about-story h2, :lang(th) .directions-intro h2, :lang(th) .contact-left h2 { font-family:var(--app-font-serif); letter-spacing:0; line-height:1.45; }
:lang(th) .section-heading h2, :lang(th) .care-copy h2, :lang(th) .pickup-copy h2, :lang(th) .about-story h2, :lang(th) .directions-intro h2, :lang(th) .contact-left h2 { font-size:clamp(2rem,3.4vw,3rem); }
:lang(th) .service-feature h3, :lang(th) .service-others h3, :lang(th) .about-reasons h3, :lang(th) .contact-form h3 { font-family:var(--app-font-serif); }
:lang(th) em, :lang(th) i, :lang(th) .still-caption, :lang(th) .delivery-caption, :lang(th) .footer-main > p { font-style:normal; }
:lang(th) .brand-name i { font-family:'Manrope', sans-serif; }
:lang(th) .brand-name { font-family:'Manrope', sans-serif; }
:lang(th) .service-number, :lang(th) .address-label, :lang(th) .phone-card small, :lang(th) .form-kicker, :lang(th) .wayfinding-top, :lang(th) .delivery-stamp, :lang(th) .scroll-cue { letter-spacing:.02em; }
:lang(th) .delivery-stamp { font-size:12px; line-height:1.3; }
:lang(th) .svg-label { font-family:'Noto Sans Thai', sans-serif; letter-spacing:0; font-size:15px; }
:lang(th) .care-art-label, :lang(th) .delivery-caption, :lang(th) .still-caption, :lang(th) .footer-main > p { font-family:var(--app-font-sans); }
:lang(th) .reason-list small, :lang(th) .care-points small, :lang(th) .mini-service p { line-height:1.7; }
@media (max-width: 680px) {
  :lang(th) .hero h1 { font-size:clamp(2.3rem,10.5vw,3.2rem); letter-spacing:0; }
  :lang(th) .hero h1 span { letter-spacing:0; }
  :lang(th) .section-heading h2, :lang(th) .care-copy h2, :lang(th) .pickup-copy h2, :lang(th) .about-story h2, :lang(th) .directions-intro h2, :lang(th) .contact-left h2 { font-size:2.05rem; letter-spacing:0; }
}

/* Fixes after review */
.service-number, .address-label, .form-kicker, .wayfinding-top > span:first-child, .delivery-stamp, .scroll-cue, .phone-card small:first-child { text-transform:uppercase; }
:lang(th) .service-number, :lang(th) .address-label, :lang(th) .form-kicker, :lang(th) .wayfinding-top > span:first-child, :lang(th) .phone-card small:first-child { text-transform:none; }
.hero-art-note { z-index:5; }
.care-art-label { z-index:3; }
h1, h2, h3 { text-wrap:balance; }
p, li, address { text-wrap:pretty; }
@media (max-width: 680px) {
  .hero-art-note { left:30px; bottom:22px; }
}
.text-link, .hero-meta span, .phone-card strong, .footer-phone { white-space:nowrap; }
.hero-actions, .hero-meta { flex-wrap:wrap; }
.hero-meta { row-gap:8px; }
@media (max-width: 900px) and (min-width: 681px) {
  .hero-actions { gap:14px 22px; }
  .hero-meta .meta-divider { display:none; }
}


/* ---------- Motion: scooter, animated sentence, "how it works" scenes ---------- */
.pickup-art { height:auto; display:flex; flex-direction:column; align-items:center; padding-top:10px; }
.moto-words { position:relative; z-index:2; margin:0; max-width:440px; min-height:94px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; column-gap:.28em; text-align:center; font-family:var(--app-font-serif); font-size:21px; line-height:1.45; color:#244960; padding:14px 20px; background:rgba(255,255,255,.88); border:1px solid #e2eef0; border-radius:10px; box-shadow:0 10px 26px rgba(43,91,111,.07); }
.moto-words span { display:inline-block; opacity:0; animation:word-in 9s ease-out infinite; }
.moto-words .hl { color:#2c718d; font-style:italic; background:linear-gradient(transparent 68%, #f3e4ad 68%); }
:lang(th) .moto-words .hl { font-style:normal; }
:lang(th) .moto-words { font-size:20px; line-height:1.6; column-gap:.4em; }
@keyframes word-in { 0% { opacity:0; transform:translateY(10px); } 5% { opacity:1; transform:none; } 82% { opacity:1; transform:none; } 90%, 100% { opacity:0; transform:translateY(-6px); } }
.moto-words .w0 { animation-delay:0.00s; }
.moto-words .w1 { animation-delay:0.16s; }
.moto-words .w2 { animation-delay:0.32s; }
.moto-words .w3 { animation-delay:0.48s; }
.moto-words .w4 { animation-delay:0.64s; }
.moto-words .w5 { animation-delay:0.80s; }
.moto-words .w6 { animation-delay:0.96s; }
.moto-words .w7 { animation-delay:1.12s; }
.moto-words .w8 { animation-delay:1.28s; }
.moto-words .w9 { animation-delay:1.44s; }
.moto-words .w10 { animation-delay:1.60s; }
.moto-words .w11 { animation-delay:1.76s; }
.moto-words .w12 { animation-delay:1.92s; }
.moto-words .w13 { animation-delay:2.08s; }
.moto-words .w14 { animation-delay:2.24s; }
.moto-words .w15 { animation-delay:2.40s; }
.moto-words .w16 { animation-delay:2.56s; }
.moto-words .w17 { animation-delay:2.72s; }
.moto-words .w18 { animation-delay:2.88s; }
.moto-words .w19 { animation-delay:3.04s; }

.m-wheel { transform-box:fill-box; transform-origin:center; animation:m-spin .7s linear infinite; }
.m-bob { animation:m-bob .35s ease-in-out infinite alternate; }
.m-drive { animation:m-drive 5s ease-in-out infinite; }
.m-road { animation:m-road .6s linear infinite; }
.m-speed { animation:m-speed .45s linear infinite; }
.m-puff { opacity:0; transform-box:fill-box; transform-origin:center; animation:m-puff 1.5s ease-out infinite; }
.m-puff:nth-child(2) { animation-delay:.5s; } .m-puff:nth-child(3) { animation-delay:1s; }
@keyframes m-spin { to { transform:rotate(360deg); } }
@keyframes m-bob { to { transform:translateY(-3px); } }
@keyframes m-drive { 0%, 100% { transform:translateX(-8px); } 50% { transform:translateX(10px); } }
@keyframes m-road { to { stroke-dashoffset:14; } }
@keyframes m-speed { to { stroke-dashoffset:22; } }
@keyframes m-puff { 0% { opacity:.9; transform:translate(0,0) scale(.4); } 100% { opacity:0; transform:translate(-42px,-12px) scale(1.7); } }

.how-section { padding:100px max(calc((100vw - 1240px)/2), 6.2vw) 104px; background:#eff7f8; }
.how-steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.how-step { position:relative; background:#fff; border:1px solid #dce9ec; border-radius:10px; padding:12px 12px 22px; animation:how-on 12s ease-in-out infinite; }
.how-step.step-1, .how-step.step-1 .how-num { animation-delay:3s; }
.how-step.step-2, .how-step.step-2 .how-num { animation-delay:6s; }
.how-step.step-3, .how-step.step-3 .how-num { animation-delay:9s; }
.how-step:not(:last-child)::after { content:""; position:absolute; z-index:3; top:38%; right:-16px; width:11px; height:11px; border-top:2px solid #8fbdca; border-right:2px solid #8fbdca; transform:rotate(45deg); }
.how-art { display:block; width:100%; height:auto; border-radius:7px; background:#f6fbfc; margin-bottom:14px; }
.how-num { position:absolute; z-index:2; top:20px; left:20px; width:30px; height:30px; border-radius:50%; background:#8fbdca; color:#fff; font:700 14px/30px 'Manrope', sans-serif; text-align:center; box-shadow:0 0 0 4px #fff; animation:how-num 12s ease-in-out infinite; }
.how-step h3 { font-family:var(--app-font-serif); font-weight:500; font-size:20px; line-height:1.3; color:#244960; margin:0 6px 6px; }
.how-step p { margin:0 6px; font-size:14px; line-height:1.65; color:#536c78; }
.how-cta { margin-top:34px; display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; }
.how-cta p { margin:0; display:flex; gap:8px; align-items:center; color:#5a717c; font-size:14px; }
.how-cta p svg { color:#987e35; }
@keyframes how-on { 0%, 22% { border-color:#79acb9; box-shadow:0 14px 30px rgba(43,107,134,.12); transform:translateY(-4px); } 28%, 100% { border-color:#dce9ec; box-shadow:none; transform:none; } }
@keyframes how-num { 0%, 22% { background:#2c718d; } 28%, 100% { background:#8fbdca; } }

/* scene 1: message */
.s-dot { animation:s-dot 1.2s ease-in-out infinite; }
.s-dot:nth-of-type(2) { animation-delay:.2s; } .s-dot:nth-of-type(3) { animation-delay:.4s; }
.s-bubble { transform-box:fill-box; transform-origin:0% 100%; animation:s-bubble 5s ease-out infinite; }
.s-plane { opacity:0; animation:s-plane 5s ease-in-out infinite; }
.s-screen { animation:s-screen 5s linear infinite; }
.s-twinkle { transform-box:fill-box; transform-origin:center; animation:s-twinkle 2.4s ease-in-out infinite; }
.s-twinkle-b { animation-delay:1.2s; }
.s-wave { transform-box:fill-box; transform-origin:0% 100%; animation:s-wave .8s ease-in-out infinite alternate; }
@keyframes s-dot { 0%, 60%, 100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-2px); } }
@keyframes s-bubble { 0%, 22% { opacity:0; transform:scale(.3); } 30% { opacity:1; transform:scale(1.06); } 34% { transform:scale(1); } 88% { opacity:1; transform:scale(1); } 96%, 100% { opacity:0; transform:scale(.92); } }
@keyframes s-plane { 0% { opacity:0; transform:translate(0,0); } 5% { opacity:1; } 24% { opacity:1; transform:translate(26px,-40px); } 30%, 100% { opacity:0; transform:translate(30px,-46px); } }
@keyframes s-screen { 0%, 22% { fill:#ffffff; } 28%, 100% { fill:#c7e6ee; } }
@keyframes s-twinkle { 0%, 100% { opacity:.5; transform:scale(.6); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes s-wave { from { transform:rotate(-12deg); } to { transform:rotate(14deg); } }

/* scenes 2 and 4: scooter arrives, takes / brings the clothes, leaves */
.s2-scooter, .s4-scooter { animation:s-arrive 6s ease-in-out infinite; }
.s2-bag { animation:s2-bag 6s ease-in-out infinite; }
.s4-stack { animation:s4-stack 6s ease-in-out infinite; }
.s4-heart { transform-box:fill-box; transform-origin:center; animation:s4-heart 6s ease-out infinite; }
@keyframes s-arrive { 0% { opacity:1; transform:translateX(-150px); } 22%, 72% { opacity:1; transform:none; } 86%, 100% { opacity:0; transform:translateX(20px); } }
@keyframes s2-bag { 0%, 34% { opacity:1; transform:none; } 50%, 72% { opacity:1; transform:translate(-65px,-20px); } 86% { opacity:0; transform:translate(-45px,-20px); } 92% { opacity:0; transform:none; } 100% { opacity:1; transform:none; } }
@keyframes s4-stack { 0% { opacity:1; transform:translateX(-150px); } 22%, 34% { opacity:1; transform:none; } 52%, 88% { opacity:1; transform:translate(65px,12px); } 95%, 100% { opacity:0; transform:translate(65px,12px); } }
@keyframes s4-heart { 0%, 52% { opacity:0; transform:translateY(8px) scale(.3); } 60% { opacity:1; transform:scale(1.15); } 66% { transform:scale(1); } 85% { opacity:1; transform:translateY(-6px); } 92%, 100% { opacity:0; transform:translateY(-10px); } }

/* scene 3: laundry */
.s3-drum { transform-box:fill-box; transform-origin:center; animation:m-spin 1.8s linear infinite; }
.s3-drum-b { animation-duration:2.6s; animation-direction:reverse; }
.s3-bubble { opacity:0; animation:s3-bubble 2.4s ease-out infinite; }
.s3-bubble.b1 { animation-delay:.8s; } .s3-bubble.b2 { animation-delay:1.6s; }
.s3-sway { transform-box:fill-box; transform-origin:50% 0; animation:s3-sway 2.6s ease-in-out infinite alternate; }
.s3-sway-b { animation-delay:-1.3s; }
@keyframes s3-bubble { 0% { opacity:0; transform:translateY(0); } 20% { opacity:.95; } 100% { opacity:0; transform:translateY(-36px); } }
@keyframes s3-sway { from { transform:rotate(-5deg); } to { transform:rotate(5deg); } }

@media (max-width: 900px) {
  .how-steps { grid-template-columns:repeat(2, 1fr); }
  .how-step::after { display:none; }
}
@media (max-width: 680px) {
  .pickup-art { height:auto; }
  .moto-words { font-size:18px; min-height:84px; padding:12px 14px; }
  :lang(th) .moto-words { font-size:17px; }
  .how-section { padding:70px 18px 74px; }
  .how-steps { gap:10px; }
  .how-step { padding:7px 7px 16px; }
  .how-art { margin-bottom:10px; }
  .how-num { width:26px; height:26px; line-height:26px; font-size:13px; top:12px; left:12px; box-shadow:0 0 0 3px #fff; }
  .how-step h3 { font-size:16px; margin:0 4px 5px; }
  .how-step p { font-size:13px; line-height:1.55; margin:0 4px; }
  .how-cta { margin-top:24px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-wheel, .m-bob, .m-drive, .m-road, .m-speed, .m-puff, .s-dot, .s-bubble, .s-plane, .s-screen, .s-twinkle, .s-wave,
  .s2-scooter, .s2-bag, .s3-drum, .s3-bubble, .s3-sway, .s4-scooter, .s4-stack, .s4-heart, .how-step, .how-num, .moto-words span { animation:none !important; }
  .moto-words span { opacity:1; }
  .how-num { background:#2c718d; }
}


/* ---------- Page effects (src/effects.js adds .fx only when motion is allowed) ---------- */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:40; background:linear-gradient(90deg,#2c718d,#6baabd 60%,#e3b956); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.site-header { transition:box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled { box-shadow:0 8px 24px rgba(33,82,101,.08); background:rgba(249,252,252,.94); }
.bubbles { position:fixed; inset:0; z-index:15; pointer-events:none; }
.cursor-glow { position:fixed; left:0; top:0; width:320px; height:320px; border-radius:50%; z-index:14; pointer-events:none; background:radial-gradient(circle, rgba(120,190,210,.24), rgba(120,190,210,0) 65%); mix-blend-mode:multiply; opacity:0; transition:opacity .4s ease; }
.cursor-glow.on { opacity:1; }

.fx .rv { opacity:0; translate:0 28px; transition:opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
.fx .rv.rv-left { translate:-40px 0; }
.fx .rv.rv-right { translate:40px 0; }
.fx .rv.rv-in { opacity:1; translate:none; }
.fx .rv-line::after { content:""; display:block; width:56px; height:2px; border-radius:2px; margin-top:16px; background:linear-gradient(90deg,#e3b956,#f0d68a); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.2,.7,.2,1) .35s; }
.fx .rv-line.rv-in::after { transform:scaleX(1); }

.letters .ch-word { display:inline-block; white-space:nowrap; }
.letters .ch { display:inline-block; opacity:0; filter:blur(10px); transform:translateY(.25em); transition:opacity .6s ease, filter .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.letters.go .ch { opacity:1; filter:none; transform:none; }

.tilt { transition:transform .25s ease-out; will-change:transform; }
.fx .rv.tilt { transition:opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1), transform .25s ease-out; }
.about-reasons { position:relative; overflow:hidden; }
.service-feature.tilt::before, .about-reasons.tilt::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.7), rgba(255,255,255,0) 45%); opacity:0; transition:opacity .3s ease; }
.service-feature.tilt:hover::before, .about-reasons.tilt:hover::before { opacity:1; }
.button-primary { transition:transform .2s ease, background .2s ease, color .2s ease, translate .2s ease-out; }

.fx .shirt-shape svg { animation:fx-float 5s ease-in-out infinite; }
.fx .sparkle svg, .fx .note-star { animation:fx-twinkle 2.6s ease-in-out infinite; }
.fx .sparkle-b svg { animation-delay:1.3s; }
.fx .hero-halo { animation:fx-spin 70s linear infinite; }
.sun-disc, .hero-halo, .folded, .shirt-shape, .hero-art-note { transition:translate .5s ease-out; }
@keyframes fx-float { 50% { translate:0 -8px; } }
@keyframes fx-twinkle { 50% { scale:1.25; opacity:.6; } }
@keyframes fx-spin { to { rotate:360deg; } }

.marquee { overflow:hidden; background:#2c718d; color:#fff; padding:15px 0; position:relative; }
.marquee::before, .marquee::after { content:""; position:absolute; top:0; bottom:0; width:60px; z-index:1; pointer-events:none; }
.marquee::before { left:0; background:linear-gradient(90deg,#2c718d,rgba(44,113,141,0)); }
.marquee::after { right:0; background:linear-gradient(270deg,#2c718d,rgba(44,113,141,0)); }
.marquee-track { display:flex; align-items:center; width:max-content; animation:mq 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.mq-item { font-family:var(--app-font-serif); font-style:italic; font-size:22px; padding:0 22px; white-space:nowrap; }
.mq-sep { color:#e3b956; display:inline-flex; }
:lang(th) .mq-item { font-style:normal; font-size:20px; }
@keyframes mq { to { transform:translateX(-50%); } }
@media (max-width: 680px) { .marquee { padding:12px 0; } .mq-item { font-size:18px; padding:0 16px; } :lang(th) .mq-item { font-size:17px; } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation:none; } }
/* split letters keep the style of their own line (the generic ".hero h1 span" rule must not reach them) */
.hero h1.letters .ch-word, .hero h1.letters .ch { font-family:inherit; font-style:inherit; font-weight:inherit; color:inherit; letter-spacing:inherit; }


/* ---------- Real shop photos ---------- */
.photo-collage { position:relative; margin-top:38px; max-width:480px; }
.photo-collage.has-small { padding-bottom:48px; }
.ph { margin:0; position:relative; border-radius:12px; overflow:hidden; background:#e7f3f5; box-shadow:0 18px 40px rgba(33,82,101,.14); }
.ph picture, .ph img { display:block; width:100%; height:auto; }
.ph img { transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.ph:hover img { transform:scale(1.04); }
.photo-collage.has-small .ph-main { width:80%; }
.ph-small { position:absolute; right:0; bottom:0; width:40%; border:6px solid #fff; rotate:3deg; }
.photo-caption { display:flex; align-items:center; gap:7px; margin:14px 0 0; font-size:13px; color:#5a717c; }
.photo-caption svg { color:#2c718d; }
.ph-store { margin:22px 0 6px; max-width:460px; }
.ph-store img { aspect-ratio:4 / 3; object-fit:cover; }
.ph-store figcaption { display:flex; align-items:center; gap:7px; padding:11px 15px; background:#fff; font-size:13px; font-weight:600; color:#2f5d72; }
.ph-store figcaption svg { color:#c79a2b; }
@media (max-width: 680px) {
  .photo-collage { margin-top:30px; }
}