/* ===========================================================================
   HOMESARA THEME — page-home.css (Home page only)
   Extracted verbatim from index.html (original source of truth).
   =========================================================================== */

  /* ----- HERO ----- */
  /* ===== HERO (Swiper full-bleed carousel) ===== */
  .hero{position:relative;}
  /* Override the shared .hs-swiper side padding/arrow gutter (common.css) -
     the hero needs its full-bleed background image edge-to-edge, with no
     arrows at all (its own pagination dots are the only nav control). */
  .hero-swiper.hs-swiper{width:100%;height:640px;position:relative;overflow:hidden;padding:0;}
  .hero-swiper.hs-swiper .swiper-button-prev,
  .hero-swiper.hs-swiper .swiper-button-next{display:none;}
  .hero-swiper .swiper-slide{position:relative;overflow:hidden;}
  .slide-bg{position:absolute;inset:0;width:100%;height:100%;}
  .slide-bg img,.slide-bg svg{width:100%;height:100%;object-fit:cover;display:block;}
  .slide-overlay{
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(20,14,8,.82) 0%, rgba(20,14,8,.58) 38%, rgba(20,14,8,.18) 68%, rgba(20,14,8,0) 100%);
  }
  .slide-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:600px;padding:60px 0 90px;}
  .slide-tag{
    position:absolute;top:44px;right:44px;z-index:2;max-width:220px;color:var(--white);
    background:rgba(20,14,8,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:16px 18px;
  }
  .slide-tag .tag-stars{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
  .slide-tag .tag-stars .stars-i{display:flex;gap:2px;}
  .slide-tag .tag-stars .icon{width:12px;height:12px;color:var(--gold);}
  .slide-tag .tag-stars span{font-size:11px;color:rgba(255,255,255,.85);}
  .slide-tag b{display:block;font-family:var(--font-heading);font-size:14.5px;line-height:1.3;margin-bottom:5px;}
  .slide-tag em{font-style:normal;font-size:12px;color:var(--gold);font-weight:600;}
  .hero-content .eyebrow{margin-bottom:16px;color:var(--gold);}
  .hero-content .eyebrow::before{background:var(--gold);}
  .hero-content h1{font-size:47px;line-height:1.12;margin:0 0 16px;font-weight:700;color:var(--white);}
  .hero-content h1 .gold{color:var(--gold);}
  .hero-content p.sub{font-size:15px;color:rgba(255,255,255,.82);margin:0 0 26px;}
  .hero-feats{display:flex;gap:30px;margin-bottom:30px;}
  .hero-feats .f{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:12px;font-weight:500;color:var(--white);max-width:130px;}
  .hero-feats .f .icon{width:26px;height:26px;color:var(--gold);}
  .hero-btns{display:flex;gap:14px;}

  @media (max-width:900px){
    .slide-content{max-width:100%;padding:50px 28px 70px;}
    .hero-content .eyebrow{margin-bottom:14px;}
    .hero-content h1{font-size:32px;margin-bottom:16px;}
    .hero-content p.sub{font-size:14px;margin-bottom:24px;}
    .hero-feats{flex-wrap:wrap;row-gap:18px;column-gap:24px;margin-bottom:26px;}
    .hero-feats .f{max-width:110px;}
    .hero-btns{flex-wrap:wrap;row-gap:12px;}
    .slide-tag{max-width:190px;padding:12px 14px;}
  }
  @media (max-width:520px){
    .hero-content h1{font-size:26px;}
    .slide-tag{top:16px;right:16px;max-width:150px;padding:10px 12px;}
    .slide-tag b{font-size:13px;}
  }

  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next{
    width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.95);
    box-shadow:0 6px 18px rgba(0,0,0,.2);--swiper-navigation-size:15px;color:var(--brown-800);
    top:50%;margin-top:-52px;
  }
  .hero-swiper .swiper-button-prev{left:24px;}
  .hero-swiper .swiper-button-next{right:24px;}
  .hero-swiper .swiper-pagination{bottom:88px !important;}
  .hero-swiper .swiper-pagination-bullet{width:8px;height:8px;background:var(--white);opacity:.55;}
  .hero-swiper .swiper-pagination-bullet-active{opacity:1;background:var(--gold);width:22px;border-radius:4px;transition:width .25s ease;}

  /* stats floating card — Swiper on mobile/tablet (partial-view carousel),
     watchOverflow shows all 5 with no drag once every slide fits (desktop),
     matching the original static row look. */
  .stats-card{
    background:var(--white);border-radius:8px;box-shadow:0 20px 45px rgba(58,42,28,.14);
    padding:28px 10px;margin:-46px auto 0;max-width:1160px;position:relative;z-index:4;
    overflow:hidden;
  }
  .stats-card .stat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative;}
  .stats-card .stat::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:var(--line);display:none;}
  .stats-card .stat .icon{width:24px;height:24px;color:var(--gold-dark);}
  .stats-card .stat b{font-family:var(--font-heading);font-size:21px;color:var(--ink);}
  .stats-card .stat span{font-size:11.5px;color:var(--muted);}
  @media (min-width:901px){
    .stats-card .stat:not(:last-child)::after{display:block;}
  }
  @media (max-width:900px){
    .stats-card{padding:24px 16px;margin-top:-30px;}
  }


  /* ----- WHY CHOOSE ----- */
  /* ===== WHY CHOOSE ===== */
  .why{padding-top:88px;}
  .why-grid{display:grid;grid-template-columns:0.85fr 2.15fr;gap:50px;align-items:start;}
  .why h2{font-size:30px;margin:8px 0 16px;color:var(--ink);}
  .why p{font-size:14px;color:var(--muted);line-height:1.75;margin:0 0 26px;max-width:340px;}
  .why-feats{display:flex;justify-content:space-between;gap:16px;}
  .why-feats .f{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:120px;}
  .why-feats .f .circ{width:66px;height:66px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;}
  .why-feats .f .circ .icon{width:26px;height:26px;color:var(--brown-800);}
  .why-feats .f span{font-size:12.5px;font-weight:500;color:var(--brown-900);line-height:1.4;}
  @media (max-width:900px){
    .why{padding-top:56px;}
    .why-grid{grid-template-columns:1fr;gap:32px;}
    .why p{max-width:none;}
    .why-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:26px 12px;justify-items:center;}
    .why-feats .f{max-width:140px;}
  }
  @media (max-width:560px){
    .why-feats{grid-template-columns:repeat(2,1fr);row-gap:30px;}
    .why-feats .f:last-child:nth-child(odd){grid-column:1/-1;}
    .why-feats .f .circ{width:60px;height:60px;}
  }


  /* ----- PROCESS ----- */
  /* ===== PROCESS =====
     Swiper on mobile/tablet (auto-scrolling partial-view carousel), same
     hs-swiper/watchOverflow mechanism as the stats bars — locks into the
     original static connected row (with the dashed line) once all 6 steps
     fit with no drag (desktop). */
  .process{padding-top:70px;}
  .process-row{position:relative;margin-top:36px;overflow:hidden;}
  /* Line sits on .swiper-wrapper (not .process-row) because the generic
     .hs-swiper padding insets the wrapper from the container edges —
     anchoring to .process-row itself left the line off-position. Its
     left/right inset is set by page-home.js (--proc-line-left/-right),
     measured from the real first/last circle centers — a fixed percentage
     only lines up when spaceBetween is 0 (desktop), so it breaks the moment
     mobile/tablet's non-zero spaceBetween shifts the circles. The 25%
     fallback below only shows for an instant before JS measures it. */
  .process-row .swiper-wrapper{position:relative;}
  .process-row .swiper-wrapper::before{
    content:"";position:absolute;top:29px;
    left:var(--proc-line-left,25%);right:var(--proc-line-right,25%);height:0;
    border-top:1.5px dashed var(--line);z-index:0;
  }
  .process-row .proc-step{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:1;}
  .proc-step .circ{width:58px;height:58px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;}
  .proc-step.active .circ{background:var(--brown-900);border-color:var(--brown-900);}
  .proc-step .circ .icon{width:22px;height:22px;color:var(--brown-800);}
  .proc-step.active .circ .icon{color:var(--white);}
  .proc-step .num{font-size:11px;color:var(--gold-dark);font-weight:700;}
  .proc-step .lbl{font-size:12.5px;font-weight:500;color:var(--ink);text-align:center;}

  @media (max-width:900px){
    .process{padding-top:48px;}
  }


  /* ----- CATEGORY GRID ----- */
  /* ===== CATEGORY GRID ===== */
  .cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
  .cat-card{
    position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/3.9;
    display:flex;align-items:flex-end;
  }
  .cat-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .cat-card .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,0) 35%,rgba(20,14,8,.78) 100%);}
  .cat-card .cc-content{position:relative;padding:18px 16px;color:var(--white);width:100%;}
  .cat-card h4{font-size:16.5px;margin:0 0 4px;font-weight:600;}
  .cat-card .count{font-size:11.5px;opacity:.85;margin:0 0 12px;}
  .cat-card .explore{
    display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1px;
    border:1px solid rgba(255,255,255,.75);padding:6px 14px;border-radius:2px;
  }
  .cat-icon-wm{position:absolute;top:16px;right:16px;width:26px;height:26px;color:rgba(255,255,255,.55);}


  /* ----- VISUALIZER ----- */
  /* ===== VISUALIZER ===== */
  .visualizer{background:var(--cream-2);border-radius:8px;padding:44px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;}
  .vis-icon{width:44px;height:44px;color:var(--brown-800);margin-bottom:8px;}
  .visualizer h2{font-size:27px;margin:10px 0 14px;color:var(--ink);}
  .visualizer p{font-size:14px;color:var(--muted);max-width:400px;margin:0 0 26px;line-height:1.7;}
  .vis-imgs{display:flex;align-items:center;justify-content:center;gap:16px;}
  .vis-frame{width:190px;height:230px;border-radius:14px;border:5px solid var(--brown-900);overflow:hidden;position:relative;flex-shrink:0;}
  .vis-frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .vis-arrow{width:34px;height:34px;color:var(--brown-800);flex-shrink:0;}


  /* ----- VIDEOS ----- */
  /* ===== VIDEOS ===== */
  .video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  .video-card{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/3.6;display:flex;align-items:flex-end;}
  .video-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .video-card .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,0) 40%,rgba(20,14,8,.75) 100%);}
  .video-card .play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
    display:flex;align-items:center;justify-content:center;
  }
  .video-card .play .icon{width:16px;height:16px;color:var(--white);margin-left:2px;}
  .video-card .cap{position:relative;color:var(--white);font-size:12.5px;font-weight:500;padding:14px;line-height:1.35;}


  /* ----- TESTIMONIALS ----- */
  /* ===== TESTIMONIALS ===== */
  .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .test-card{border:1px solid var(--line);border-radius:8px;padding:26px;}
  .stars{display:flex;gap:3px;margin-bottom:14px;}
  .stars .icon{width:15px;height:15px;color:var(--gold);}
  .test-card p{font-size:13.5px;color:var(--ink);line-height:1.7;margin:0 0 22px;min-height:76px;}
  .test-person{display:flex;align-items:center;gap:12px;}
  .avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:600;font-family:var(--font-heading);font-size:16px;}
  img.avatar{object-fit:cover;}
  .test-person b{font-size:13.5px;display:block;color:var(--ink);}
  .test-person span{font-size:11.5px;color:var(--muted);}
  .test-google-link{display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:var(--gold-dark);}
  .test-google-link:hover{text-decoration:underline;}
  .test-dots{display:flex;justify-content:center;gap:8px;margin-top:30px;}
  .test-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block;}
  .test-dots i.on{background:var(--gold-dark);}


  /* ----- BRANDS ----- */
  /* ===== BRANDS ===== */
  .brand-row{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:20px;}
  .brand-row .brand,
  .brand-row-swiper .brand{
    height:80px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-heading);font-weight:700;font-size:19px;color:var(--brown-900);letter-spacing:.5px;text-align:center;padding:8px;
  }
  .brand-row .brand small,
  .brand-row-swiper .brand small{display:block;font-family:var(--font-body);font-size:8.5px;letter-spacing:1px;color:var(--muted);font-weight:500;margin-top:2px;}
  .brand-row .brand.brand-logo,
  .brand-row-swiper .brand.brand-logo{padding:12px;}
  .brand.brand-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}


  /* ----- CTA BAR ----- */
  /* ===== CTA BAR ===== */
  .ctabar{background:var(--brown-900);color:var(--white);}
  .cta-inner{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr;gap:20px;padding:34px 0;align-items:center;}
  .cta-item{display:flex;align-items:center;gap:14px;}
  .cta-item .circ{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cta-item .circ .icon{width:20px;height:20px;color:var(--gold);}
  .cta-item .t b{display:block;font-size:12.5px;letter-spacing:.5px;font-weight:600;line-height:1.3;margin-bottom:5px;}
  .cta-item .t span{display:block;font-size:11px;color:rgba(255,255,255,.65);line-height:1.5;}
  .cta-center{text-align:center;}
  .cta-center h3{font-family:var(--font-heading);font-size:22px;font-weight:600;margin:0;line-height:1.3;}
  .cta-center .rule{width:36px;height:2px;background:var(--gold);margin:10px auto 0;}

  @media (max-width:900px){
    .cta-inner{grid-template-columns:repeat(2,1fr);gap:28px 20px;padding:36px 0;align-items:start;}
    .cta-center{grid-column:1/-1;order:-1;padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.15);}
    .cta-center h3{font-size:20px;}
  }
  @media (max-width:560px){
    .cta-inner{grid-template-columns:1fr;gap:20px;padding:30px 0;}
    .cta-item{gap:12px;}
  }


  /* ----- ROOM VISUALIZER (drag compare) ----- */
  /* ===== ROOM VISUALIZER (drag compare) ===== */
  .vis-compare{position:relative;width:100%;max-width:400px;aspect-ratio:400/480;border-radius:14px;overflow:hidden;border:5px solid var(--brown-900);margin:0 auto;cursor:ew-resize;user-select:none;touch-action:none;}
  .vis-compare .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
  .vis-handle{position:absolute;top:0;bottom:0;width:0;display:flex;align-items:center;justify-content:center;transform:translateX(-50%);}
  .vis-handle .bar{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--white);transform:translateX(-50%);box-shadow:0 0 10px rgba(0,0,0,.45);}
  .vis-handle .knob{position:relative;width:38px;height:38px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.35);color:var(--brown-800);}
  .vis-handle .knob svg{width:18px;height:18px;}
  .vis-tag-before,.vis-tag-after{position:absolute;top:12px;z-index:3;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(20,14,8,.55);color:#fff;padding:5px 10px;border-radius:20px;}
  .vis-tag-before{left:12px;}
  .vis-tag-after{right:12px;}
  @media (max-width:900px){ .visualizer{grid-template-columns:1fr;padding:28px 20px;} .vis-imgs{margin-top:8px;} }
  @media (max-width:640px){ .vis-compare{max-width:260px;} }