/* ============================================================
   Stitchylizard redesign — homepage sections.
   Loaded ONLY on the CMS home handle. Scoped under .sl-home.
   Design tokens (--ink, --lime, ...) come from the site-wide
   bundle (web/css/breeze/_default.less :root block).
   ============================================================ */

/* Every section on this page is full-bleed by design (hero split, lime process
   strip, dark stats band), so the page container's gutter is removed. */
.sl-home-page .page-main,
.sl-home-page .columns,
.sl-home-page .column.main {
    max-width: none;
    padding: 0;
    margin: 0;
    min-height: 0;
}

.sl-home { color: var(--ink); }
.sl-home a { text-decoration: none; }
.sl-home img { max-width: 100%; }

/* ---- Fade-in ---- */
.sl-home .fi { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.sl-home .fi.visible { opacity: 1; transform: none; }
.sl-home .hero-left .fi { opacity: 1; transform: none; }
.sl-home .fi-d1 { transition-delay: .09s; }
.sl-home .fi-d2 { transition-delay: .18s; }
.sl-home .fi-d3 { transition-delay: .27s; }
.sl-home .fi-d4 { transition-delay: .36s; }

/* ---- Buttons ---- */
/* Hero buttons answer the pointer in place: the filled one deepens and throws
   a soft brand-tinted glow, the outlined one fills in. Neither moves — only
   the press does. */
.sl-home .btn-primary { display: inline-block; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 16px 32px; border: none; border-radius: 4px; cursor: pointer; transition: background .22s ease, box-shadow .22s ease, transform .12s ease; }
.sl-home .btn-primary:hover, .sl-home .btn-primary:focus-visible { background: var(--lime-d); box-shadow: 0 8px 26px rgba(110,197,177,.38); }
.sl-home .btn-primary:active { transform: scale(.98); box-shadow: 0 2px 10px rgba(110,197,177,.3); }
.sl-home .btn-outline { display: inline-block; background: transparent; color: var(--cream); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 16px 32px; border: 1.5px solid rgba(245,240,232,.22); border-radius: 4px; cursor: pointer; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .12s ease; }
.sl-home .btn-outline:hover, .sl-home .btn-outline:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.sl-home .btn-outline:active { transform: scale(.98); }
.sl-home .btn-dark { display: inline-block; background: var(--ink); color: var(--cream); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 18px 40px; border: none; border-radius: 4px; cursor: pointer; transition: opacity .2s; }
.sl-home .btn-dark:hover { opacity: .82; }

/* ---- Section labels ---- */
.sl-home .sec-label { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.sl-home .sec-label::after { content: ''; flex: 0 0 30px; height: 1px; background: currentColor; }
.sl-home h2.sec-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 4.8vw, 58px); letter-spacing: .02em; line-height: 1; color: var(--ink); }

/* ---- Hero ---- */
.sl-home .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; overflow: hidden; }
.sl-home .hero-left { background: var(--ink); padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.sl-home .hero-left::before { content: ''; position: absolute; top: -80px; right: -80px; width: 300px; height: 300px; border-radius: 50%; background: var(--lime); opacity: .055; pointer-events: none; }
.sl-home .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(110,197,177,.11); border: 1px solid rgba(110,197,177,.24); color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; width: fit-content; margin-bottom: 28px; }
.sl-home .hero-badge::before { content: '\2605'; font-size: 10px; }
.sl-home .hero-h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(52px, 6.8vw, 90px); line-height: .93; color: var(--cream); letter-spacing: .02em; margin-bottom: 24px; }
.sl-home .hero-h1 em { font-style: normal; color: var(--lime); display: block; }
.sl-home .hero-desc { font-size: 16px; line-height: 1.65; color: rgba(245,240,232,.58); max-width: 400px; margin-bottom: 40px; }
.sl-home .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.sl-home .hero-trust { display: flex; gap: 32px; margin-top: 52px; padding-top: 32px; border-top: 1px solid rgba(245,240,232,.09); flex-wrap: wrap; }
.sl-home .trust-num { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--lime); line-height: 1; }
.sl-home .trust-label { font-size: 11px; font-weight: 600; color: rgba(245,240,232,.38); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.sl-home .hero-right { background: rgba(26,26,24,.12); overflow: hidden; }
.sl-home .parallax-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 100%; }
/* The photo lives on ::before so it can zoom on its own. Hovering used to dim
   the entire tile, caption included; now only the picture moves and the
   caption stays exactly as legible as it was. */
.sl-home .hero-tile { background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; position: relative; overflow: hidden; cursor: pointer; min-height: 200px; }
.sl-home .hero-tile::before { content: ''; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center; transform: scale(1); transition: transform .6s cubic-bezier(.23,1,.32,1); }
.sl-home .hero-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 52%, transparent 100%); }
.sl-home .hero-tile:hover::before, .sl-home .hero-tile:focus-visible::before { transform: scale(1.06); }
.sl-home .tile-content { position: relative; z-index: 1; }
.sl-home .hero-tile:first-child .tile-content, .sl-home .hero-tile:nth-child(3) .tile-content { text-align: right; }
.sl-home .tile-tag { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); opacity: .9; margin-bottom: 3px; }
.sl-home .tile-name { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: #fff; line-height: 1; letter-spacing: .03em; }

/* ---- Process strip ----
   Everything here is read against the saturated mint band, so hierarchy is
   carried by size and weight, not by fading text out: the old numerals sat at
   1.3:1 and the descriptions at 2.9:1, both unreadable. Solid ink for the
   numeral and title, --teal-ink (a darkened shade of the band itself) for the
   supporting line — 8.4:1 / 4.9:1 respectively. */
/* Equal columns divided by hairlines, every line in a step sharing one left
   edge. The cell padding is subtracted from the band's own gutter so the first
   column's text still lands exactly on the site's left edge, and the rules fall
   on clean quarter points. */
.sl-home .process { background: var(--lime); margin: 0; padding: 0 calc(var(--sl-gutter) - 26px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-home .proc-step { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 26px; border-left: 1px solid rgba(26, 26, 24, .16); }
.sl-home .proc-step:nth-child(4n+1) { border-left: 0; }
.sl-home .proc-num { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--ink); line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.sl-home .proc-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; }
.sl-home .proc-desc { font-size: 13px; font-weight: 500; color: var(--teal-ink); margin-top: 5px; line-height: 1.45; }

/* ---- Categories ---- */
.sl-home .categories { padding: 88px 64px; content-visibility: auto; contain-intrinsic-size: auto 800px; }
.sl-home .cats-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 20px; flex-wrap: wrap; }
.sl-home .browse-all { display: flex; align-items: center; justify-content: space-between; background: var(--ink); border-radius: 8px; padding: 20px 32px; margin-bottom: 16px; cursor: pointer; transition: background .25s ease; gap: 16px; }
.sl-home .browse-all:hover { background: #2a2a28; }
.sl-home .ba-left { display: flex; align-items: center; gap: 16px; }
.sl-home .ba-icon { width: 42px; height: 42px; background: var(--lime); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sl-home .ba-icon img { width: 26px; height: 26px; object-fit: contain; }
.sl-home .ba-title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--cream); letter-spacing: .04em; }
.sl-home .ba-sub { font-size: 12px; color: rgba(245,240,232,.4); margin-top: 1px; letter-spacing: .02em; }
.sl-home .ba-arrow { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--lime); flex-shrink: 0; }
.sl-home .cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
/* Width, height and which part of the photo stays in frame all come from the
   card's own JSON, handed over as custom properties. */
/* Same treatment as the hero tiles: the card holds still and the photo behind
   it eases in, instead of the whole card lifting off the page and dimming. */
.sl-home .cat-card { grid-column: span var(--span, 3); height: var(--card-h, 220px); border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; background-size: cover; background-position: center var(--img-pos, center); border: none; display: block; }
.sl-home .cat-card::before { content: ''; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center var(--img-pos, center); transform: scale(1); transition: transform .6s cubic-bezier(.23,1,.32,1); }
.sl-home .cat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,8,.78) 0%, rgba(10,10,8,.18) 55%, transparent 100%); }
.sl-home .cat-card:hover::before, .sl-home .cat-card:focus-visible::before { transform: scale(1.06); }
.sl-home .cat-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 18px 16px; z-index: 1; }
.sl-home .cat-tag { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 4px; }
.sl-home .cat-name { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: #fff; line-height: 1; letter-spacing: .03em; }
.sl-home .cat-count { font-size: 11px; color: rgba(255,255,255,.48); margin-top: 3px; }

/* ---- Stats band ---- */
.sl-home .stats-band { background: var(--ink); display: grid; grid-template-columns: repeat(4, 1fr); }
.sl-home .stat-block { padding: 52px 44px; border-right: 1px solid rgba(255,255,255,.065); position: relative; overflow: hidden; text-align: center; }
.sl-home .stat-block:last-child { border-right: none; }
.sl-home .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 62px; color: var(--lime); line-height: 1; }
.sl-home .stat-desc { font-size: 14px; color: rgba(245,240,232,.42); margin-top: 10px; line-height: 1.65; }

/* ---- Testimonials ---- */
.sl-home .testimonials { padding: 88px 64px; background: var(--cream); content-visibility: auto; contain-intrinsic-size: auto 500px; }
.sl-home .testi-header { margin-bottom: 52px; }
.sl-home .reviews-grid { position: relative; overflow: hidden; }
.sl-home .reviews-track { display: flex; gap: 20px; transition: transform .5s ease; }
.sl-home .r-card { background: var(--warm); border-radius: 10px; padding: 32px; border: 1.5px solid var(--border); transition: box-shadow .25s ease, border-color .25s ease; position: relative; flex: 0 0 calc(33.333% - 14px); }
.sl-home .r-card:hover { box-shadow: 0 16px 44px rgba(26,26,24,.09); border-color: rgba(110,197,177,.5); }
.sl-home .r-stars { color: var(--lime-d); font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }
.sl-home .r-quote { font-size: 15px; line-height: 1.7; color: var(--slate); margin-bottom: 24px; font-style: italic; font-weight: 300; }
.sl-home .r-author { display: flex; align-items: center; gap: 12px; }
.sl-home .r-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--border); }
.sl-home .r-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-home .r-avatar-init { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border); background: var(--lime); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--ink); }
.sl-home .r-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.sl-home .r-role { font-size: 12px; color: #6b6b64; margin-top: 1px; }
.sl-home .r-src { position: absolute; top: 22px; right: 22px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #6b6b64; text-transform: uppercase; }
.sl-home .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.sl-home .carousel-dot { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; }
.sl-home .carousel-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background .2s; }
.sl-home .carousel-dot.active::after { background: var(--lime); }

/* ---- Story / SEO ---- */
.sl-home .seo-section { padding: 88px 64px; background: var(--warm); content-visibility: auto; contain-intrinsic-size: auto 600px; }
.sl-home .seo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sl-home .seo-row.rev { direction: rtl; }
.sl-home .seo-row.rev > * { direction: ltr; }
.sl-home .seo-overline { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--lime-d); margin-bottom: 12px; }
.sl-home .seo-h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 4vw, 50px); letter-spacing: .02em; line-height: 1.05; color: var(--ink); margin-bottom: 20px; }
.sl-home .seo-divider { width: 40px; height: 2px; background: var(--lime); margin-bottom: 22px; }
.sl-home .seo-body { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--slate); margin-bottom: 16px; }
.sl-home .seo-sig { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 300; color: var(--muted); font-style: italic; line-height: 1.7; }
.sl-home .seo-sig strong { color: var(--ink); font-style: normal; font-weight: 600; display: block; }
.sl-home .seo-badge-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background: var(--ink); border-radius: 12px; padding: 48px 40px; box-shadow: 0 20px 56px rgba(26,26,24,.12); min-height: 400px; }
.sl-home .seo-badge-col img.badge { width: 160px; height: auto; }
.sl-home .seo-badge-quote { text-align: center; }
.sl-home .seo-badge-quote p { font-size: 16px; font-weight: 300; color: rgba(245,240,232,.6); line-height: 1.7; font-style: italic; }
.sl-home .seo-badge-quote strong { color: var(--lime); font-weight: 600; font-style: normal; display: block; margin-top: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* ---- CTA band ---- */
.sl-home .cta-band { background: var(--lime); padding: 80px 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; content-visibility: auto; contain-intrinsic-size: auto 200px; }
.sl-home .cta-band h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--ink); line-height: .97; letter-spacing: .02em; }
.sl-home .cta-band h2 span { opacity: .38; }
.sl-home .cta-right { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sl-home .cta-note { font-size: 12px; color: rgba(26,26,24,.48); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .sl-home .hero-left { padding: 56px 40px; }
    .sl-home .categories, .sl-home .testimonials, .sl-home .seo-section { padding: 72px 40px; }
    .sl-home .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .sl-home .cat-card { grid-column: span 1; }
    .sl-home .stats-band { grid-template-columns: 1fr 1fr; }
    .sl-home .seo-row { gap: 40px; }
    .sl-home .cta-band { padding: 64px 40px; }
    /* Four columns stop fitting here: fold to 2x2 on the same grid, so the
       rules keep falling on the halfway line and every cell stays aligned. */
    .sl-home .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-home .proc-step { border-left: 1px solid rgba(26, 26, 24, .16); }
    .sl-home .proc-step:nth-child(odd) { border-left: 0; }
    .sl-home .proc-step:nth-child(n+3) { border-top: 1px solid rgba(26, 26, 24, .16); }
}
@media (max-width: 768px) {
    .sl-home .hero { grid-template-columns: 1fr; }
    .sl-home .hero-left { padding: 52px 28px 44px; order: 1; }
    .sl-home .hero-right { min-height: 280px; order: 2; }
    /* Copy keeps its desktop size here — this band is the page's explainer, so
       it is the wrong place to shrink text. Only the cell padding gives way. */
    .sl-home .process { padding: 0 calc(var(--sl-gutter) - 18px); }
    .sl-home .proc-step { padding: 26px 18px; }
    .sl-home .proc-num { font-size: 27px; margin-bottom: 10px; }
    .sl-home .categories { padding: 60px 24px; }
    .sl-home .cat-card { height: 180px; }
    .sl-home .stat-block { padding: 36px 24px; }
    .sl-home .testimonials { padding: 60px 24px; }
    .sl-home .r-card { flex: 0 0 100%; }
    .sl-home .seo-section { padding: 60px 24px; }
    .sl-home .seo-row { grid-template-columns: 1fr; gap: 32px; }
    .sl-home .seo-row.rev { direction: ltr; }
    .sl-home .cta-band { padding: 56px 24px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .sl-home .cat-grid { grid-template-columns: 1fr; }
    .sl-home .stats-band { grid-template-columns: 1fr; }
}

/* Hover motion is decoration; honour a request to stop it. */
@media (prefers-reduced-motion: reduce) {
    .sl-home .hero-tile::before,
    .sl-home .cat-card::before,
    .sl-home .btn-primary,
    .sl-home .btn-outline { transition: none; }

    .sl-home .hero-tile:hover::before,
    .sl-home .cat-card:hover::before { transform: none; }
}