/* =========================
   Home
   ========================= */

.page-home .hero {
  padding: var(--s-7) 0 var(--s-6);
}

.page-home .hero__grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

.page-home .hero__title {
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}

.page-home .hero__lead {
  max-width: 60ch;
  font-size: var(--text-lg);
  color: rgba(62, 52, 44, 0.82);
}

.page-home .hero__aside {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: rgba(156, 139, 122, 0.12);
  border: 1px solid var(--border);
}

.page-home .intent {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6) 0;
}

.page-home .intent__label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: rgba(62, 52, 44, 0.60);
}

.page-home .intent__line {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.25;
}

.page-home .pause {
  background: rgba(156, 139, 122, 0.15);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-7) 0;
}

.page-home .pause__inner {
  max-width: 72ch;
}

.page-home .pause__arabic {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin-bottom: var(--s-4);
}

.page-home .pause__translation {
  font-size: var(--text-md);
  color: rgba(62, 52, 44, 0.80);
}

.page-home .featured {
  padding: var(--s-7) 0;
}

.page-home .featured__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.page-home .featured__grid {
  display: grid;
  gap: var(--s-4);
}

.page-home .card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-home .card:hover {
  transform: translateY(-2px);
  border-color: rgba(166, 138, 114, 0.24);
}

.page-home .card__img {
  aspect-ratio: 4 / 3;
  background: rgba(62, 52, 44, 0.06);
}

.page-home .card__body {
  padding: var(--s-4);
}

.page-home .card__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  margin: 0 0 var(--s-2);
}

.page-home .card__sub {
  font-size: var(--text-sm);
  color: rgba(62, 52, 44, 0.70);
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: 1.3fr 0.9fr;
    align-items: start;
  }
  .page-home .featured__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =========================
   Home Carousel (seamless, JS-measured)
   ========================= */

.page-home .carousel-wrapper {
  overflow: hidden;
}

.page-home .carousel-track {
  display: flex;
  gap: 1.5rem; /* matches gap-6 in the markup -- this selector's specificity
                  beats the Tailwind utility class, so both must stay in sync */
  width: max-content;
  will-change: transform;
}

/* This class will be added by JS after it measures widths */
.page-home .carousel-track.is-animating {
  animation: carousel-scroll var(--carousel-duration, 28s) linear infinite;
}

@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--carousel-distance, 0px))); }
}

/* Hover deceleration handled in home.js */

@media (prefers-reduced-motion: reduce) {
  .page-home .carousel-track.is-animating {
    animation: none;
  }
}

/* =========================
   Testimonials (2026-08-12)
   ========================= */

#testimonial-track,
#testimonial-dots {
  position: relative;
  z-index: 1;
}

.testimonial-slide {
  transition: opacity 300ms ease-in-out;
}

.testimonial-slide.is-hidden {
  display: none;
}

.testimonial-slide.is-entering {
  opacity: 0;
}

/* Button itself is a 20px tap target (comfortable on mobile); the visible
   dot is a smaller ::after centered inside it, so the hit area is generous
   without the dot itself looking oversized. */
.testimonial-dot {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(156, 139, 122, 0.35); /* Mushroom, muted */
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}

.testimonial-dot:hover::after {
  background: rgba(166, 138, 114, 0.6); /* Taupe */
}

.testimonial-dot.is-active::after {
  background: #A68A72; /* Taupe */
  transform: scale(1.3);
}

/* Prev/next arrows: hover-reveal on desktop only (pointer devices with real
   hover) -- swipe covers touch, so a visible-but-inert arrow pair on mobile
   would just be clutter. Positioned outside the quote's own text column so
   they never crowd the copy at any viewport this wide. */
.testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: rgba(247, 243, 239, 0.55); /* Ivory, muted */
  opacity: 0;
  transition: opacity 200ms ease-in-out, background-color 200ms ease-in-out, color 200ms ease-in-out;
  z-index: 2;
}

.dark .testimonial-arrow {
  color: rgba(62, 52, 44, 0.55); /* Espresso, muted */
}

.testimonial-arrow--prev {
  left: -0.5rem;
}

.testimonial-arrow--next {
  right: -0.5rem;
}

@media (min-width: 1024px) {
  .testimonial-arrow--prev {
    left: -3rem;
  }
  .testimonial-arrow--next {
    right: -3rem;
  }
}

@media (hover: hover) {
  #testimonial-section:hover .testimonial-arrow {
    opacity: 1;
  }
  .testimonial-arrow:hover {
    color: #F7F3EF; /* Ivory, full */
    background: rgba(247, 243, 239, 0.1);
  }
  .dark .testimonial-arrow:hover {
    color: #3E342C; /* Espresso, full */
    background: rgba(62, 52, 44, 0.08);
  }
}

@media (hover: none) {
  .testimonial-arrow {
    display: none;
  }
}

/* =========================
   Home hero (2026-10 redesign)
   One-screen entrance: full-screen photo, engraved headline, CTAs, trust line.
   The site header overlays it (data-header="overlay", see site.js). Hidden
   start states live under html.js; home.js adds .is-play to run them. Without
   JS, or with reduced motion, the final state shows.
   ========================= */

.hx {
  /* Screen height minus any promo/closed banner stacked above the header, so
     the hero is exactly one screen even while a banner is showing. */
  --hx-h: calc(100vh - var(--bnr-h, 0px));
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--hx-h);
  min-height: 520px;
  /* Pull the hero up under the (sticky, in-flow) header so it fills the screen. */
  margin-top: calc(-1 * var(--hdr-h, 77px));
  padding-top: var(--hdr-h, 77px);
  box-sizing: border-box;
  overflow: hidden;
  background: #1F1F1F;
  color: #F7F3EF;
}

@supports (height: 100svh) {
  .hx { --hx-h: calc(100svh - var(--bnr-h, 0px)); }
}

.hx-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none; /* Tailwind preflight caps img at 100%; the phone layout needs it wider */
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}

.hx-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(31,31,31,.90) 0%, rgba(31,31,31,.65) 55%, rgba(31,31,31,.35) 100%),
    linear-gradient(0deg, rgba(31,31,31,.90) 0%, rgba(31,31,31,0) 35%);
}

.hx-dark {
  position: absolute;
  inset: 0;
  background: #1F1F1F;
  opacity: 0;
  pointer-events: none;
}

.hx-mid {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(24px + var(--hx-h) * 0.18) 24px 22px;
  text-align: center;
}

.hx-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  line-height: 1;
}

.hx-l1 {
  display: block;
  white-space: nowrap;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 300;
}

.hx-eng {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(40px, min(10.5vw, calc(var(--hx-h) * 0.17)), 160px);
  font-weight: 700;
  line-height: 1.1;
}

.hx-w {
  display: inline-block;
  white-space: nowrap;
}

.hx-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}

.hx-btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

.hx-btn--solid {
  background: #A68A72;
  color: #1F1F1F;
}

.hx-btn--ghost {
  border: 1px solid rgba(247, 243, 239, 0.6);
  color: #F7F3EF;
  transition: background-color 200ms ease-out;
}

.hx-btn--ghost:hover {
  background: rgba(247, 243, 239, 0.1);
}

.hx-trust {
  position: relative;
  z-index: 4;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  width: 88vw;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 clamp(10px, calc(var(--hx-h) * 0.024), 32px);
  box-sizing: border-box;
  white-space: nowrap;
  font-size: clamp(7px, 2.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 243, 239, 0.8);
}

@media (min-width: 761px) {
  .hx-trust { letter-spacing: 0.14em; }
}

/* Phones: the square photo is sized by width so the whole piece fits, then
   fades into the dark below. Text sits just under the piece. */
@media (max-width: 760px) {
  .hx-bg {
    inset: auto;
    top: 0;
    --s: min(195vw, var(--hx-h));
    left: calc(50% - var(--s) / 2);
    width: var(--s);
    height: var(--s);
    -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
    mask-image: linear-gradient(#000 82%, transparent 100%);
  }
  .hx-mid {
    justify-content: flex-start;
    gap: 18px;
    padding: calc(.51 * min(195vw, var(--hx-h)) + 14px - var(--hdr-h, 77px)) 20px 16px;
  }
  .hx-l1 { font-size: 26px; }
  .hx-eng { font-size: 11vw; }
  .hx-btns { flex-direction: column; width: 100%; max-width: 340px; }
}

/* ---- Entrance motion (only when JS can start it) ---- */
@keyframes hx-ink {
  0%   { opacity: 0; color: #FFFFFF; text-shadow: 0 0 22px #FFFFFF, 0 0 50px rgba(255,255,255,.67); }
  35%  { opacity: 1; color: #FFFFFF; text-shadow: 0 0 14px rgba(255,255,255,.8), 0 0 40px rgba(255,255,255,.4); }
  100% { opacity: 1; color: #F7F3EF; text-shadow: 0 0 0 rgba(255,255,255,0); }
}
@keyframes hx-lights { from { opacity: 1; } to { opacity: 0; } }
@keyframes hx-zoom   { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hx-rise   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

html.js .hx:not(.is-play) .hx-ch,
html.js .hx:not(.is-play) .hx-l1,
html.js .hx:not(.is-play) .hx-btns,
html.js .hx:not(.is-play) .hx-trust { opacity: 0; }
html.js .hx:not(.is-play) .hx-dark { opacity: 1; }

.hx.is-play .hx-dark  { opacity: 1; animation: hx-lights .9s ease-out .1s forwards; }
.hx.is-play .hx-bg    { animation: hx-zoom 5s cubic-bezier(.22,1,.36,1) .1s both; }
.hx.is-play .hx-ch    { animation: hx-ink .7s ease-out calc(.1s + var(--i, 0) * .04s) both; }
.hx.is-play .hx-l1    { animation: hx-rise .4s cubic-bezier(.22,1,.36,1) 0s both; }
.hx.is-play .hx-btns  { animation: hx-rise .45s cubic-bezier(.22,1,.36,1) 1s both; }
.hx.is-play .hx-trust { animation: hx-rise .45s cubic-bezier(.22,1,.36,1) 1.2s both; }

@media (prefers-reduced-motion: reduce) {
  html.js .hx:not(.is-play) .hx-ch,
  html.js .hx:not(.is-play) .hx-l1,
  html.js .hx:not(.is-play) .hx-btns,
  html.js .hx:not(.is-play) .hx-trust { opacity: 1; }
  html.js .hx:not(.is-play) .hx-dark,
  .hx.is-play .hx-dark { opacity: 0; animation: none; }
  .hx.is-play .hx-bg,
  .hx.is-play .hx-ch,
  .hx.is-play .hx-l1,
  .hx.is-play .hx-btns,
  .hx.is-play .hx-trust { animation: none; }
}

/* ── Home below the hero (Option C "Balanced", 2026-10) ─────────────────── */
.hb-wrap{max-width:1400px;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.hb-sec{padding-top:5rem}
.hb-sh{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem}
.hb-sh h2{margin:0;font-size:13px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#A68A72;white-space:nowrap}
.hb-sh i{flex:1;height:1px;background:rgba(156,139,122,.25)}
.hb-pill{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid rgba(156,139,122,.4);border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:inherit;text-decoration:none;transition:background-color .2s ease}
.hb-pill:hover{background:rgba(156,139,122,.12)}

.hb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.hb-ctile{position:relative;display:block;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#1F1F1F;color:#F7F3EF;text-decoration:none}
.hb-ctile img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hb-ctile:hover img{transform:scale(1.05)}
.hb-ctile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,31,31,.8),rgba(31,31,31,0) 55%)}
.hb-ctile div{position:absolute;z-index:2;left:22px;right:22px;bottom:20px}
.hb-ctile b{display:block;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:28px;line-height:1.1}
.hb-ctile span{display:block;margin-top:6px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,243,239,.8)}

.hb-about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4rem;align-items:center}
.hb-about .hb-tx{grid-column:1/8;grid-row:1;max-width:620px}
.hb-about .hb-fr{grid-column:8/13;grid-row:1;justify-self:end;width:100%;max-width:484px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#3E342C}
.hb-about .hb-fr img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block;max-width:none}
.hb-eb{font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#A68A72}
.hb-lead{margin:16px 0 24px;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:44px;line-height:1.12}
.hb-about p{margin:0 0 18px;font-size:16px;line-height:1.8}
.hb-about p.hb-lead{margin:16px 0 24px;font-size:44px;line-height:1.12}
.hb-ulink{display:inline-block;margin-top:6px;border-bottom:2px solid rgba(156,139,122,.25);padding-bottom:4px;font-size:14px;font-weight:500;color:inherit;text-decoration:none;transition:border-color .2s ease}
.hb-ulink:hover{border-color:#3E342C}

/* Product tiles: same translucent frame as the Products page (products.css). */
.hb-ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.hb-ptile{display:block;padding:12px;background:rgba(156,139,122,.1);border-radius:20px;box-shadow:0 12px 40px -20px rgba(62,52,44,.25);color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(0,0,.2,1),box-shadow .3s cubic-bezier(0,0,.2,1)}
.hb-ptile:hover,.hb-ptile:focus-visible{transform:scale(1.035);box-shadow:0 24px 64px -24px rgba(62,52,44,.28)}
.hb-pim{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:rgba(156,139,122,.1)}
.hb-pim img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.hb-pt{margin:16px 4px 0;font-size:16px;font-weight:500}
.hb-pp{margin:6px 4px 4px;font-size:13px;font-weight:600}
.hb-pp--soldout{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#6B6159}

.hb-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(156,139,122,.25);border-bottom:1px solid rgba(156,139,122,.25)}
.hb-how>div{padding:40px 32px;border-left:1px solid rgba(156,139,122,.25)}
.hb-how>div:first-child{border-left:0;padding-left:0}
.hb-n{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:44px;line-height:1;color:#A68A72}
.hb-how h3{margin:14px 0 6px;font-size:15px;font-weight:500}
.hb-how p{margin:0;font-size:14px;line-height:1.7;color:#6B6159}

.hb-quote-wrap{margin-top:5rem}

/* Inquiry panel keeps its own markup; align spacing with the new sections. */
.hb-quote-wrap + section{border-top:0}

@media (max-width:1000px){
  .hb-tiles,.hb-ptiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .hb-about{display:flex;flex-direction:column}
  .hb-about .hb-fr{order:-1;max-width:min(360px,86%);align-self:flex-start;margin-bottom:32px}
  .hb-about .hb-tx{max-width:none}
  .hb-how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-how>div{border-left:0;padding:28px 0;border-top:1px solid rgba(156,139,122,.25)}
  .hb-how>div:nth-child(-n+2){border-top:0}
}
@media (max-width:760px){
  .hb-wrap{padding:0 1rem}
  .hb-sec{padding-top:3.5rem}
  .hb-lead,.hb-about p.hb-lead{font-size:32px}
  .hb-ptile{padding:10px}
  .hb-pt{font-size:14px}
  .hb-ctile b{font-size:22px}
  .hb-ctile div{left:14px;right:14px;bottom:14px}
  .hb-how{grid-template-columns:1fr}
  .hb-how>div:nth-child(2){border-top:1px solid rgba(156,139,122,.25)}
  .hb-sh .hb-pill{display:none}
  .hb-quote-wrap{margin-top:3.5rem}
}
@media (prefers-reduced-motion: reduce) {
  .hb-ptile,.hb-ctile img{transition:none}
  .hb-ptile:hover,.hb-ptile:focus-visible{transform:none}
  .hb-ctile:hover img{transform:none}
}