:root{
    /* Client palette — grey & white only (Pantone 4278 C / Cool Gray 6 C) */
    --white:#ffffff;
    --bg:#f6f3ec;
    --grey-1:#97999b;   /* Pantone Cool Gray 6 C */
    --grey-2:#7c7d80;   /* Pantone 4278 C */
    --grey-deep:#3f4042; /* near-black for ink */
    --ink:#2c2d2e;
    --ink-soft:rgba(44,45,46,0.6);
    --line:rgba(44,45,46,0.12);
  }
  /* No `* { margin:0; padding:0 }` reset here: scoping it to .sbt-landing would raise
     it to the same specificity as Tailwind's own spacing utilities, and since this
     file loads after the compiled bundle it would beat every mx-auto / px-* / py-*
     used inside the wrapper. Tailwind's preflight already does this reset. */
  .sbt-landing{
    background:var(--bg);
    color:var(--ink);
    font-family:'Outfit',sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }
  .sbt-landing a{color:inherit;text-decoration:none;}
  .sbt-landing ::selection{background:var(--grey-2);color:#fff;}

  /* style.css sets `a, p, ul li { font-family: Roboto !important }` and
     `h1..h6 { font-family: Oswald !important }` site wide, which overrode this page's
     Fraunces/Outfit pairing entirely. Matching !important here, scoped to the landing
     wrapper so nothing else is affected. */
  /* .sbt-landing a,
  .sbt-landing p,
  .sbt-landing ul li{font-family:'Outfit',sans-serif !important;} */

  /* .sbt-landing .card h2,
  .sbt-landing .logo-mark{font-family:'Fraunces',serif !important;} */

  @media (prefers-reduced-motion: reduce){
    .sbt-landing *{animation:none !important;transition:none !important;}
  }

  /* ---------- header ---------- */
  .sbt-landing header{
    text-align:center;
    padding:64px 24px 14px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .sbt-landing .logo{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .sbt-landing .logo-mark{
    font-family:'Fraunces',serif;
    font-size:30px;
    letter-spacing:0.42em;
    padding-left:0.42em;
    color:var(--ink);
  }
  .sbt-landing .logo-sub{
    font-size:10px;
    letter-spacing:0.5em;
    padding-left:0.5em;
    text-transform:uppercase;
    color:var(--grey-2);
  }
  .sbt-landing .tagline{
    margin-top:22px;
    font-size:20px;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    padding-bottom:18px;
  }

  /* ---------- layout ---------- */
  .sbt-landing main{
    max-width:1180px;
    margin:0 auto;
    padding:56px 24px 100px;
  }
  .sbt-landing .landing-page-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr 0.85fr;
    grid-template-rows:auto auto;
    gap:24px;
  }
  .sbt-landing .card{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:560px;
    padding:44px 40px;
    isolation:isolate;
    background:var(--white);
    border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(44,45,46,0.04), 0 22px 44px -28px rgba(44,45,46,0.28);
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  }
  .sbt-landing .card:hover{
    transform:translateY(-5px);
    box-shadow:0 1px 2px rgba(44,45,46,0.05), 0 32px 56px -26px rgba(44,45,46,0.34);
  }
  .sbt-landing .card-photo{
    position:absolute; inset:0; z-index:0;
    background-size:cover;
    background-position:center;
    filter:grayscale(100%) contrast(1.02);
    transform:scale(1.0);
    transition:transform .9s cubic-bezier(.2,.8,.2,1);
  }
  .sbt-landing .card:hover .card-photo{transform:scale(1.045);}

  .sbt-landing .card-spa{ grid-column:1; grid-row:1 / span 2; background:#3f4042; background: #ad9628;}
  .sbt-landing .card-perfume{ grid-column:2; grid-row:1 / span 2; background:#7c7d80; }
  .sbt-landing .card-products{ grid-column:3; grid-row:1; min-height:268px; background:#ffffff; }
  .sbt-landing .card-flowers{ grid-column:3; grid-row:2; min-height:268px; background: #c8c3cb; }

  /* .sbt-landing .card-spa .card-photo{
    background-color:#5b5c5e;
    background-image:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
      linear-gradient(155deg, #6f7173 0%, #3f4042 100%);
    opacity:1;
  } */
  .sbt-landing .card-perfume .card-photo{
    background-color:#84858a;
    background-image:
      linear-gradient(0deg, rgba(63,64,66,0.15), rgba(63,64,66,0.15)),
      url("/images/landing-perfume.jpg");
    background-size:cover;
    background-position:center;
    opacity:1;
  }
  .sbt-landing .card-products .card-photo{
    background-color:#eceeec;
    background-image:
      radial-gradient(circle at 75% 30%, rgba(255,255,255,0.9), transparent 55%),
      linear-gradient(155deg, #f1f2ef 0%, #d8dad6 100%);
    opacity:0.9;
  }
  .sbt-landing .card-flowers .card-photo{
    background-color:#efeeec;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,0.9), transparent 55%),
      linear-gradient(155deg, #f4f3f0 0%, #dadbd8 100%);
    opacity:0.9;
  }

  .sbt-landing .card-scrim{
    position:absolute; inset:0; z-index:1;
  }
  /* .sbt-landing .card-spa .card-scrim{ background:linear-gradient(195deg, rgba(255,255,255,0.0) 0%, rgba(63,64,66,0.65) 100%); } */
  .sbt-landing .card-perfume .card-scrim{ background:linear-gradient(195deg, rgba(255,255,255,0.0) 0%, rgba(124,125,128,0.7) 100%); }
  .sbt-landing .card-products .card-scrim{ background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.78) 78%); }
  .sbt-landing .card-flowers .card-scrim{ background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.78) 78%); }

  /* Lifts the card's content above the artwork. The photo and scrim are excluded:
     they are absolutely positioned fills, and this rule used to reset them to
     `position:relative` — same specificity, later in the file — which collapsed them
     to zero height and meant no card ever showed its background image. */
  .sbt-landing .card > *:not(.card-photo):not(.card-scrim){position:relative; z-index:2;}

  .sbt-landing .card-eyebrow{
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .sbt-landing .card-spa .card-eyebrow, .sbt-landing .card-perfume .card-eyebrow{ color:rgba(255,255,255,0.78); }
  .sbt-landing .card-products .card-eyebrow, .sbt-landing .card-flowers .card-eyebrow{ color:var(--grey-2); }

  /* .card h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    line-height: 1.05;
    margin-bottom: 18px;
  } */
  .sbt-landing .card h2{
    font-family:'Fraunces',serif;
    font-weight:700 !important;
    line-height:1.05;
    margin-bottom:18px;
    font-size:36px !important;
  }
  .sbt-landing .card-spa h2{ font-size:38px !important; color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,0.25); }
  .sbt-landing .card-perfume h2{  color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,0.25); }
  .sbt-landing .card-products h2{ color:var(--ink); }
  .sbt-landing .card-flowers h2{ color:var(--ink); }

  .sbt-landing .service-list{
    list-style:none;
    margin-bottom:30px;
  }
  .sbt-landing .service-list li{
    font-size:14.5px;
    color:rgba(255,255,255,0.86);
    padding:9px 0;
    border-top:1px solid rgba(255,255,255,0.18);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .sbt-landing .service-list li:last-child{ border-bottom:1px solid rgba(255,255,255,0.18); }
  .sbt-landing .service-list li::after{
    content:"";
    width:5px;height:5px;
    border-radius:50%;
    background:rgba(255,255,255,0.55);
  }

  .sbt-landing .card-perfume p{ font-size:14px; line-height:1.6; margin-bottom:28px; max-width:280px; color:rgba(255,255,255,0.78); }
  .sbt-landing .card-products p, .sbt-landing .card-flowers p{ font-size:14px; line-height:1.6; margin-bottom:28px; max-width:280px; color:var(--ink-soft); }

  /* ---------- buttons ---------- */
  .sbt-landing .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:16px 30px;
    border-radius:.75rem;
    width:fit-content;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  }
  .sbt-landing .btn:hover{ transform:translateY(-2px); }

  .sbt-landing .btn-light{
    background:var(--white);
    color:var(--ink);
    box-shadow:0 12px 26px -10px rgba(0,0,0,0.4);
  }
  .sbt-landing .btn-light:hover{ background:var(--grey-deep); color:var(--white); }

  /* .btn-outline-on-dark{
    background: #651717 !important;
    
   border:1px solid rgba(255,255,255,0.55); *
    color:var(--white);
  }
  .btn-outline-on-dark:hover{ background:var(--white); color:var(--grey-deep); border-color:var(--white); } */
.sbt-landing .btn-outline-on-dark{
    background: #651717 ;
    color: #fff; /* Black text */
    border-color: #651717;
}

.sbt-landing .btn-outline-on-dark:hover{
    background: #fff;
    color: #000; /* Black text */
    border-color: #fff;
}

  .sbt-landing .btn-dark{
    background:var(--grey-deep);
    color:var(--white);
    box-shadow:0 12px 26px -10px rgba(0,0,0,0.3);
  }
  .sbt-landing .btn-dark:hover{ background:var(--ink); }

  .sbt-landing .btn-outline{
    background: #651717 ;
    /* background:transparent; */
    border:1px solid var(--grey-2);
    color:#fff;
  }
  .sbt-landing .btn-outline:hover{ 
    background: #fff;
    border:1px solid var(--grey-2);
    color: #000; /* Black text */
    border-color: #fff;
   }

  .sbt-landing .btn-outline-flowers{
    background: #ee8e248a;
    /* border: 1px solid var(--grey-2); */
    color: var(--grey-deep);
  }
  .sbt-landing .btn-outline-flowers:hover{ background:#fff; color:var(--grey-deep); border-color:var(--grey-deep); }

  /* ---------- footer note ---------- */
  .sbt-landing .foot-note{
    text-align:center;
    margin-top:64px;
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--ink-soft);
  }

  /* ---------- responsive ---------- */
  @media (max-width:1020px){
    .sbt-landing .landing-page-grid{
      grid-template-columns:1fr 1fr;
      grid-template-rows:auto;
    }
    .sbt-landing .card-spa{ grid-column:1 / span 2; grid-row:auto; min-height:420px; background: #ad9628;
    }
    .sbt-landing .card-perfume{ grid-column:1; grid-row:auto; min-height:440px; }
    .sbt-landing .card-products{ grid-column:2; grid-row:auto; min-height:210px;  }
    .sbt-landing .card-flowers{ grid-column:2; grid-row:auto; min-height:210px; margin-top:24px; background: #c8c3cb;}
  }

  @media (max-width:640px){
    .sbt-landing header{ padding:48px 20px 8px; }
    .sbt-landing main{ padding:40px 18px 64px; }
    .sbt-landing .landing-page-grid{ grid-template-columns:1fr; gap:18px; }
    .sbt-landing .card-spa, .sbt-landing .card-perfume, .sbt-landing .card-products, .sbt-landing .card-flowers{
      grid-column:1; grid-row:auto; min-height:auto; margin-top:0;
      padding:32px 26px;
      background: #c8c3cb;
    }
    .sbt-landing .card{ min-height:420px; }
    .sbt-landing .card-spa h2{ font-size:32px !important; }
    .sbt-landing .card-perfume h2{ font-size:30px !important; }
    .sbt-landing .btn{ width:100%; }
  }