/* SpinLaundry editorial web layer — original, image-led and intentionally calm. */
:root { --editorial-serif: "DM Serif Display", Georgia, serif; --editorial-sans: "DM Sans", Arial, sans-serif; }
body { font-family: var(--editorial-sans); background: #fbfcfc; }
.site-header { width: min(100% - 72px, 1440px); height: 96px; }
.wordmark { color: var(--spin-aqua); font-family: var(--editorial-sans); font-size: 27px; font-weight: 700; letter-spacing: -.09em; }
.desktop-nav { gap: 31px; }.desktop-nav a { color: var(--ocean-ink); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }.header-cta { border-radius: 0; padding: 13px 17px; background: var(--spin-aqua); font-size: 12px; letter-spacing: .01em; }.header-cta:hover { background: var(--deep-aqua); }
h1, h2 { font-family: var(--editorial-serif); font-weight: 400; letter-spacing: -.055em; } h3 { font-family: var(--editorial-sans); }
.hero { width: 100%; min-height: calc(100svh - 96px); padding: clamp(74px, 11vw, 170px) max(36px, calc((100% - 1280px) / 2)) 62px; border-radius: 0; background: #cfe7ed; box-shadow: none; }.hero::before { z-index: -1; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: linear-gradient(90deg, rgba(224,241,244,.97) 0%, rgba(221,239,242,.85) 34%, rgba(221,239,242,.17) 64%, rgba(221,239,242,.02) 100%); }.hero::after, .hero-orbit, .hero-glow { display: none; }.hero-photo { z-index: -2; width: 100%; opacity: 1; object-position: center; -webkit-mask-image: none; mask-image: none; animation: image-breathe 14s ease-in-out infinite alternate; }.hero-content { max-width: 650px; }.hero-kicker, .eyebrow { color: var(--deep-aqua); font-family: var(--editorial-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; }.hero h1 { margin-bottom: 26px; color: var(--ocean-ink); font-size: clamp(66px, 8.5vw, 128px); line-height: .85; }.hero h1 span { color: var(--ocean-ink); font-style: italic; }.hero-copy { max-width: 392px; color: #31545c; font-size: 16px; line-height: 1.55; }.button { border-radius: 0; min-height: 52px; font-family: var(--editorial-sans); font-size: 13px; letter-spacing: .01em; }.button-deep { background: var(--spin-aqua); }.button-deep:hover { background: var(--deep-aqua); }.text-link { border-bottom: 1px solid var(--deep-aqua); font-size: 12px; letter-spacing: .04em; }.pickup-card { right: max(38px, calc((100% - 1280px) / 2)); bottom: 55px; width: 252px; padding: 20px; border: 0; border-radius: 0; background: rgba(255,255,255,.9); box-shadow: none; }.hero-footer { right: max(38px, calc((100% - 1280px) / 2)); bottom: 25px; left: max(38px, calc((100% - 1280px) / 2)); color: rgba(18,61,70,.65); font-size: 10px; }
.trust-strip { width: min(1280px, calc(100% - 72px)); margin: 0 auto; padding: 37px 0; border-bottom: 1px solid var(--waterline); box-shadow: none; }.trust-item { min-height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }.trust-item b { font-size: 13px; }.trust-item p { font-size: 12px; }
.services { padding-top: 138px; }.section-wrap { width: min(1280px, calc(100% - 72px)); }.section-heading-row { grid-template-columns: 1fr 330px; gap: 100px; }.section-heading-row > p { font-size: 14px; }.service-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 430px; gap: 12px; margin-top: 60px; }.service-card, .service-card:nth-child(n) { grid-column: span 4; padding: 27px; border: 0; border-radius: 0; }.service-card:nth-child(1), .service-card:nth-child(2) { grid-column: span 6; }.service-card:hover { transform: none; box-shadow: none; }.service-card:hover img { transform: scale(1.065); }.service-card h3 { margin-bottom: 10px; font-family: var(--editorial-serif); font-size: 42px; font-weight: 400; line-height: .86; letter-spacing: -.055em; }.service-card p { max-width: 250px; font-size: 12px; }.service-card a { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }.service-icon { width: 42px; height: 42px; border-radius: 50%; }.image-card::after { background: linear-gradient(180deg, rgba(7,47,56,.04) 0%, rgba(6,55,65,.8) 94%); }.image-card:nth-child(1) img { object-position: center; }.image-card:nth-child(3) img { object-position: 58% center; }
.editorial-reel { overflow: hidden; width: 100%; margin-top: 145px; background: var(--ocean-ink); }.reel-track { width: max-content; display: flex; gap: 12px; padding: 12px; animation: gallery-drift 42s linear infinite; }.editorial-reel:hover .reel-track { animation-play-state: paused; }.reel-frame { width: min(29vw, 410px); height: 380px; flex: none; margin: 0; overflow: hidden; }.reel-frame.reel-wide { width: min(42vw, 610px); }.reel-frame img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }.reel-frame:hover img { transform: scale(1.05); }
.care-story { width: min(1280px, calc(100% - 72px)); grid-template-columns: 1.12fr .88fr; gap: clamp(50px, 10vw, 155px); margin: 165px auto; }.story-visual { min-height: 630px; border-radius: 0; }.story-visual::before { background: linear-gradient(180deg, rgba(227,249,251,.03) 20%, rgba(7,71,81,.46) 100%); }.story-visual::after { display: none; }.story-visual span { top: auto; right: 36px; bottom: 32px; left: auto; color: #fff; font-family: var(--editorial-serif); font-weight: 400; }.story-photo { animation: image-breathe 17s ease-in-out infinite alternate-reverse; }.story-copy p { font-size: 16px; line-height: 1.6; }.process { width: min(1280px, calc(100% - 72px)); padding-bottom: 155px; }.process-grid { gap: 30px; }.process-step { padding: 22px 0; border-top-color: var(--spin-aqua); }.process-step h3 { font-family: var(--editorial-serif); font-size: 28px; font-weight: 400; }.pickup-section { min-height: 580px; }.pickup-content { width: min(1280px, 100%); }.pickup-content h2 { font-family: var(--editorial-serif); font-weight: 400; }.site-footer { width: min(1280px, calc(100% - 72px)); }
@keyframes image-breathe { to { transform: scale(1.06) translate3d(-1.2%, -1%, 0); } } @keyframes gallery-drift { to { transform: translateX(-50%); } }
@media (max-width: 850px) { .site-header { width: calc(100% - 36px); height: 78px; }.hero { min-height: 660px; padding: 72px 36px 40px; }.hero h1 { font-size: clamp(62px, 12vw, 104px); }.pickup-card { right: 36px; }.hero-footer { right: 36px; left: 36px; }.section-wrap, .care-story, .process, .site-footer { width: calc(100% - 48px); }.service-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 360px; }.service-card:nth-child(n) { grid-column: span 1; }.service-card:nth-child(1), .service-card:nth-child(2) { grid-column: span 1; }.reel-frame, .reel-frame.reel-wide { width: 48vw; height: 330px; }.care-story { grid-template-columns: 1fr; }.story-visual { min-height: 520px; } }
@media (max-width: 590px) { .site-header { width: calc(100% - 32px); height: 72px; }.wordmark { font-size: 24px; }.hero { min-height: 720px; padding: 82px 24px 32px; }.hero::before { background: linear-gradient(180deg, rgba(224,241,244,.92) 0%, rgba(224,241,244,.73) 47%, rgba(224,241,244,.12) 100%); }.hero h1 { font-size: 61px; }.hero-copy { font-size: 15px; }.pickup-card { right: 24px; bottom: 108px; }.hero-footer { right: 24px; left: 24px; }.trust-strip { width: calc(100% - 48px); padding: 30px 0; }.section-wrap, .care-story, .process, .site-footer { width: calc(100% - 32px); }.services { padding-top: 92px; }.section-heading-row { display: block; }.service-grid { grid-auto-rows: 310px; gap: 8px; margin-top: 36px; }.service-card { padding: 17px; }.service-card h3 { font-size: 30px; }.reel-frame, .reel-frame.reel-wide { width: 69vw; height: 290px; }.editorial-reel { margin-top: 92px; }.care-story { margin: 95px auto; }.story-visual { min-height: 450px; }.process { padding-bottom: 92px; } }