/* ===========================================================
   HOUSE OF SKORIA — HOME PAGE STYLES
   =========================================================== */

/* ---------- Hero ---------- */
.hero{
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.hero-media{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 14s var(--ease-soft) forwards;
}
@keyframes heroZoom{ to{ transform: scale(1); } }
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,1,1,0.55) 0%, rgba(1,1,1,0.25) 38%, rgba(1,1,1,0.78) 100%);
}
.hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--sp-9);
  padding-top: calc(var(--header-h) + var(--sp-7));
  color: var(--cream);
}
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #E8D8B8;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-soft) 200ms forwards;
}
.hero-eyebrow::before{ content:""; width: 28px; height: 1px; background: #E8D8B8; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero h1{
  color: var(--light);
  max-width: 21ch;
  margin-top: var(--sp-4);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-soft) 380ms forwards;
}
.hero-sub{
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-body-lg);
  color: rgba(248,245,239,0.82);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-soft) 560ms forwards;
}
.hero-actions{
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-7);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-soft) 740ms forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform: translateY(0);} }

.hero-scroll{
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-6);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: rgba(248,245,239,0.65);
  font-size: 0.7rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.hero-scroll .line{ width:1px; height: 42px; background: rgba(248,245,239,0.4); position: relative; overflow:hidden; }
.hero-scroll .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--bronze-soft);
  animation: scrollLine 2.2s var(--ease-soft) infinite;
}
@keyframes scrollLine{ to{ top: 100%; } }
@media (max-width: 720px){ .hero-scroll{ display:none; } }

/* ---------- Brand strip (marquee) ---------- */
.brand-strip{
  background: var(--bg-light);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.brand-strip-label{
  text-align: center;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint); /* dark text on light strip bg */
  margin-bottom: var(--sp-5);
}
.marquee{
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover{ animation-play-state: paused; }
.marquee-track{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-right: clamp(1rem, 2.4vw, 1.75rem);
}
.brand-plate{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  min-width: 140px;
  padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  flex: none;
}
.brand-plate:hover{
  border-color: var(--bronze);
  box-shadow: 0 4px 18px -6px rgba(132,107,67,0.25);
}
.brand-plate img{
  height: 40px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) opacity(0.72);
  mix-blend-mode: multiply;
  transition: filter var(--dur-med) var(--ease);
}
.brand-plate:hover img{
  filter: grayscale(0) opacity(1);
}
.brand-fallback{
  display: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Services ---------- */
.services{ background: var(--bg-dark); border-bottom: 1px solid rgba(239,233,221,0.1); }
.services .eyebrow{ color: var(--bronze-soft); }
.services .eyebrow::before{ background: var(--bronze-soft); }
.services .section-head h2{ color: var(--cream); }
.services .section-head p{ color: rgba(248,245,239,0.58); }

.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 980px){ .service-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .service-grid{ grid-template-columns: 1fr; } }

.service-card{
  background: rgba(239,233,221,0.06);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.service-card:hover{
  transform: translateY(-7px);
  border-color: var(--bronze);
  box-shadow: var(--shadow-pop);
}

.service-media{
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.service-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.service-card:hover .service-media img{ transform: scale(1.08); }
.service-media::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,1,1,0.05) 55%, rgba(1,1,1,0.5) 100%);
}

.badge-popular{
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  z-index: 2;
  background: var(--bronze);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

.service-body{
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.service-head-row{ display: flex; align-items: center; gap: 0.75rem; }
.service-icon{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--bronze-soft);
  flex: none;
}
.service-icon svg{ width: 19px; height: 19px; }

.service-card h3{ color: var(--cream); font-size: var(--fs-h5); margin: 0; }

.service-list{
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(248,245,239,0.55);
}
.service-list .sep{ color: var(--bronze-soft); margin-inline: 0.45em; }

.service-cta{
  margin-top: auto;
  padding-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--bronze-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease);
}
.service-cta:hover{ color: var(--cream); }
.service-cta svg{ width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.service-card:hover .service-cta svg{ transform: translateX(4px); }
.service-card ul{ display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; list-style: none; padding: 0; }
.service-card li{
  font-size: 0.875rem;
  color: var(--ink-faint);
  padding-left: 1rem;
  position: relative;
  transition: color var(--dur-med) var(--ease);
  list-style: none;
}
.service-card li::marker{ content: ""; }
.service-card li::before{
  content:""; position:absolute; left:0; top: 0.55em;
  width: 6px; height: 1px; background: var(--bronze);
  transition: background-color var(--dur-med) var(--ease);
}

/* ---------- Before / After gallery ---------- */
.gallery{ background: var(--bg-dark); color: var(--light); }
.gallery .section-head h2,
.gallery .eyebrow,
.gallery .section-head p{ color: var(--cream); }
.gallery .eyebrow{ color: var(--bronze-soft); }
.gallery .eyebrow::before{ background: var(--bronze-soft); }
.gallery .section-head p{ color: rgba(248,245,239,0.62); }

.gallery-hint{
  font-size: 0.8rem;
  color: rgba(248,245,239,0.45);
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ---------- Gallery marquee ---------- */
.gallery-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.gallery-marquee + .gallery-marquee{ margin-top: 20px; }

.gallery-track{
  display: flex;
  flex-wrap: nowrap;
  animation: gallery-ltr 40s linear infinite;
  will-change: transform;
}
.gallery-track--reverse{ animation-name: gallery-rtl; }
.gallery-track.is-paused{ animation-play-state: paused; }

@keyframes gallery-ltr{
  from{ transform: translateX(0); }
  to{   transform: translateX(-1800px); }
}
@keyframes gallery-rtl{
  from{ transform: translateX(-1800px); }
  to{   transform: translateX(0); }
}

.gallery-item{
  flex: 0 0 280px;
  width: 280px;
  height: 280px;
  margin-right: 20px;
  border-radius: 12px;
  overflow: hidden;           /* outer failsafe */
}

/* ── Before / After container ───────────────────────────────────
   .ba-c   : 280×280, overflow:hidden — the ONLY clip boundary.
   .ba-ai  : after image, full size, bottom layer.
   .ba-cl  : clip div — only its width % changes. overflow:hidden clips before img.
   .ba-cl img : FIXED 280px wide (= container width). Never % of clip. No bleed.
   .ba-dr  : divider line + circle handle.
   ─────────────────────────────────────────────────────────── */
.ba-c{
  position: relative;
  width: 280px;
  height: 280px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 12px;
}
.ba-ai{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba-cl{
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}
.ba-cl img{
  position: absolute;
  top: 0; left: 0;
  width: 280px;      /* fixed — NEVER % of .ba-cl, which would squish */
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  pointer-events: none;
}
.ba-dr{
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.9);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}
.ba-dr::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%,-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.2'%3E%3Cpolyline points='8 7 3 12 8 17'/%3E%3Cpolyline points='16 7 21 12 16 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.ba-lbl{
  position: absolute;
  top: 10px;
  z-index: 11;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.ba-lbl--b{ left: 10px; }
.ba-lbl--a{ right: 10px; }

/* ---------- How it works ---------- */
.process{ background: var(--bg-light); }
.process-rail{
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-5);
}
.process-rail::before{
  content:"";
  position: absolute;
  top: 26px; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
@media (max-width: 980px){
  .process-rail{ grid-template-columns: repeat(3,1fr); row-gap: var(--sp-7); }
  .process-rail::before{ display:none; }
}
@media (max-width: 560px){
  .process-rail{ grid-template-columns: repeat(2,1fr); }
}
.process-step{ position: relative; }
.step-num{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--dark);
  position: relative; z-index: 1;
  margin-bottom: var(--sp-4);
  transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.process-step:hover .step-num{ background: var(--dark); color: var(--light); }
.process-step h4{ font-size: var(--fs-h6); margin-bottom: 0.4rem; color: var(--dark); }
.process-step p{ font-size: 0.875rem; color: var(--ink-faint); }

/* ---------- Why choose us ---------- */
.why{ background: var(--bg-dark); }
/* Why choose us — dark bg overrides */
.why .eyebrow{ color: var(--bronze-soft); }
.why .eyebrow::before{ background: var(--bronze-soft); }
.why .section-head h2{ color: var(--light); }
.why h2{ color: var(--light); }
.why .section-head p{ color: rgba(239,233,221,0.65); }
.why-badge span{ color: var(--ink-faint); }

.why-layout{
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--sp-8);
  align-items: stretch;
}
@media (max-width: 900px){ .why-layout{ grid-template-columns: 1fr; } }
.why-media{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 480px;
  isolation: isolate;
}
/* Golden border that draws in on hover */
.why-media::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid var(--bronze);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  z-index: 3;
  pointer-events: none;
}
/* Diagonal shimmer sweep */
.why-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(132,107,67,0) 0%,
    rgba(132,107,67,0) 38%,
    rgba(196,164,74,0.22) 50%,
    rgba(132,107,67,0) 62%,
    rgba(132,107,67,0) 100%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  transition: background-position 0.75s var(--ease);
  z-index: 2;
  pointer-events: none;
}
.why-media:hover::before{
  opacity: 1;
  transform: scale(1);
}
.why-media:hover::after{
  background-position: 200% 0;
}
.why-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-soft), filter 0.9s var(--ease-soft);
}
.why-media:hover img{
  transform: scale(1.06);
  filter: brightness(0.88) contrast(1.08);
}
.why-badge{
  position: absolute; left: var(--sp-5); bottom: var(--sp-5);
  background: rgba(239,233,221,0.95);
  padding: var(--sp-5);
  max-width: 220px;
  box-shadow: var(--shadow-card);
  border-radius: 4px;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  z-index: 4;
}
.why-media:hover .why-badge{
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
}
.why-badge strong{ display:block; font-family: var(--font-display); font-size: 2rem; color: var(--bronze); }
.why-badge span{ font-size: 0.8rem; color: var(--ink-faint); }

.why-list{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); margin-top: var(--sp-7); }
@media (max-width: 520px){ .why-list{ grid-template-columns: 1fr; } }
.why-item{ display: flex; gap: var(--sp-4); }
.why-item svg{ width: 22px; height: 22px; color: var(--bronze); flex: none; margin-top: 0.2rem; }
.why-item h5{ font-family: var(--font-display); font-size: 1.35rem; color: var(--light); margin-bottom: 0.25rem; }
.why-item p{ font-size: 0.875rem; color: rgba(239,233,221,0.6); line-height: 1.6; }

/* ---------- Work showcase ---------- */
.showcase{ background: var(--bg-accent); }
.showcase-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1080px){ .showcase-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 680px){ .showcase-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .showcase-grid{ grid-template-columns: 1fr; } }

.showcase-card{
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.showcase-card img{ width:100%; height:100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-soft); }
.showcase-card:hover img{ transform: scale(1.08); }
.showcase-card::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,1,1,0) 40%, rgba(1,1,1,0.82) 100%);
}
.showcase-text{
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 2; color: var(--cream);
}
.showcase-text span{ font-size: 0.7rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--bronze-soft); }
.showcase-text h5{ font-family: var(--font-display); font-size: 1.05rem; margin-top: 0.3rem; line-height: 1.25; }

/* ---------- Testimonials ---------- */
.testimonials{ background: var(--bg-dark); color: var(--light); overflow: hidden; }
.testimonials .eyebrow{ color: var(--bronze-soft); }
.testimonials .eyebrow::before{ background: var(--bronze-soft); }
.testimonials .section-head h2{ color: var(--light); }

.t-controls{
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.t-controls button{
  width: 48px; height: 48px;
  border: 1.5px solid var(--bronze);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex: none;
}
.t-controls button:hover{ background: var(--bronze); border-color: var(--bronze); color: var(--ink); }
.t-controls svg{ width: 18px; height: 18px; display: block; color: inherit; }

.t-track-wrap{ overflow: hidden; }
.t-track{
  display: flex;
  gap: var(--sp-5);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.t-card{
  flex: 0 0 clamp(280px, 38vw, 420px);
  background: rgba(248,245,239,0.04);
  border: 1px solid var(--line-dark);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
  border-radius: var(--radius-md);
}
.t-stars{ display: flex; gap: 0.25rem; color: var(--bronze-soft); }
.t-stars svg{ width: 15px; height: 15px; }
.t-quote{ font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; color: rgba(248,245,239,0.92); }
.t-person{ display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.t-avatar{
  width: 38px; height: 38px; border-radius: 50%;
   background: rgba(71,61,33,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--bronze-soft); font-size: 0.9rem;
  flex: none;
}
.t-person strong{ display:block; font-size: 0.875rem; color: var(--cream); }
.t-person span{ font-size: 0.75rem; color: rgba(248,245,239,0.5); }
.t-source{ margin-left: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(248,245,239,0.4); }

/* ---------- Founder / About ---------- */
.founder{
  background: var(--bg-light);
  color: var(--dark);
}
.founder .eyebrow{ color: var(--bronze); }
.founder .eyebrow::before{ background: var(--bronze); }

.founder-layout{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-9);
  align-items: stretch;
}
@media (max-width: 900px){
  .founder-layout{ grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Image + badge */
.founder-media{
  position: relative;
  isolation: isolate;
}
.founder-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  min-height: 480px;
  transition: transform 0.9s var(--ease-soft), filter 0.9s var(--ease-soft);
}
.founder-media:hover img{
  transform: scale(1.04);
  filter: brightness(0.88) saturate(1.1);
}
/* Diagonal gold shimmer */
.founder-media::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    125deg,
    rgba(132,107,67,0) 0%,
    rgba(132,107,67,0) 35%,
    rgba(196,164,74,0.2) 50%,
    rgba(132,107,67,0) 65%,
    rgba(132,107,67,0) 100%
  );
  background-size: 260% 100%;
  background-position: -100% 0;
  transition: background-position 0.8s var(--ease);
  z-index: 2;
  pointer-events: none;
}
.founder-media:hover::after{
  background-position: 200% 0;
}
/* Corner frame accents that draw in */
.founder-media::before{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(196,164,74,0);
  transition: border-color 0.6s var(--ease), inset 0.6s var(--ease);
  z-index: 3;
  pointer-events: none;
}
.founder-media:hover::before{
  border-color: rgba(196,164,74,0.5);
  inset: 16px;
}
/* Badge floats up on hover */
.founder-badge{
  position: absolute;
  bottom: -20px; right: 32px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--bronze);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: 4;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.founder-media:hover .founder-badge{
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
}
.founder-badge-year{
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.founder-badge-label{
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-top: 4px;
}

/* Content right side */
.founder-content{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.founder-heading{
  color: var(--dark);
  font-size: var(--fs-h2);
  line-height: 1.12;
  margin-top: var(--sp-3);
}
.founder-heading em{
  font-style: italic;
  color: var(--bronze);
  font-weight: 600;
}
.founder-para{
  color: var(--ink-soft);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  max-width: 54ch;
}

/* Bullet points */
.founder-points{
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}
.founder-point{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.founder-dot{
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bronze);
  flex: none;
  margin-top: 6px;
}
.founder-point strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
}
.founder-point span{
  font-size: 0.9rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---------- Sustainability ---------- */
.sustain{
  background: var(--bg-dark);
  color: var(--light);
  position: relative;
  overflow: hidden;
}
.sustain::before{
  content:"";
  position: absolute;
  right: -10%; top: 50%; transform: translateY(-50%);
  width: 560px; height: 560px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
}
.sustain::after{
  content:"";
  position: absolute;
  right: 2%; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
}
.sustain-inner{ position: relative; z-index: 1; max-width: 620px; }
.sustain-inner--center{
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.sustain-inner--center .eyebrow{ justify-content: center; }
.sustain-inner--center .sustain-stats{ justify-content: center; }
.sustain .eyebrow{ color: var(--bronze-soft); }
.sustain .eyebrow::before{ background: var(--bronze-soft); }
.sustain h2{ color: var(--cream); font-size: var(--fs-h2); margin-top: var(--sp-4); }
.sustain p{ margin-top: var(--sp-5); margin-inline: auto; font-size: var(--fs-body-lg); color: rgba(248,245,239,0.78); max-width: 50ch; }
.sustain-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, auto));
  gap: var(--sp-7) var(--sp-6);
  margin-top: var(--sp-7);
}
@media (max-width: 640px){
  .sustain-stats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
  .sustain-stats{ grid-template-columns: 1fr; }
}
.sustain-stats > div{ min-width: 0; }
.sustain-stats strong{ display:block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); color: var(--cream); white-space: nowrap; }
.sustain-stats span{ display: block; font-size: 0.78rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--bronze-soft); margin-top: 0.35rem; }

/* ---------- FAQ ---------- */
.faq{ background: var(--bg-light); }

.faq-layout{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
@media (max-width: 900px){
  .faq-layout{ grid-template-columns: 1fr; }
  .faq-media{ max-height: 420px; }
}

/* Left: image */
.faq-media{
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 520px;
}
.faq-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-soft);
}
.faq-media:hover img{ transform: scale(1.04); }

/* Right: heading + accordion */
.faq-right{ display: flex; flex-direction: column; gap: var(--sp-6); }
.faq-right h2{
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--dark);
  line-height: 1.1;
}

/* Accordion */
.faq-list{ border-top: 1px solid var(--line); }

.faq-item{ border-bottom: 1px solid var(--line); }

.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1.3rem 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--dark);
  transition: color var(--dur-fast) var(--ease);
}
.faq-q:hover{ color: var(--bronze); }
.faq-item[data-open="true"] .faq-q{ color: var(--ink); }

.faq-chevron{
  width: 20px; height: 20px;
  flex: none;
  color: var(--dark);
  transition: transform var(--dur-med) var(--ease), color var(--dur-fast) var(--ease);
}
.faq-item[data-open="true"] .faq-chevron{
  transform: rotate(180deg);
  color: var(--bronze);
}

.faq-a{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease);
}
.faq-a > div{ overflow: hidden; }
.faq-a p{
  padding-bottom: 1.3rem;
  color: var(--ink-faint);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 56ch;
}
.faq-item[data-open="true"] .faq-a{ grid-template-rows: 1fr; }

/* ---------- Blog ---------- */
.blog{ background: var(--bg-dark); }
.blog .eyebrow{ color: var(--bronze-soft); }
.blog .eyebrow::before{ background: var(--bronze-soft); }
.blog .section-head h2{ color: var(--light); }
.blog-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{ display: flex; flex-direction: column; }
.blog-media{ aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md); }
.blog-media img{ width:100%; height:100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-soft); }
.blog-card:hover .blog-media img{ transform: scale(1.06); }
.blog-meta{ display:flex; gap: 0.6rem; align-items:center; margin-top: var(--sp-4); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bronze-soft); }
.blog-card h4{ font-size: 1.15rem; margin-top: 0.6rem; line-height: 1.32; color: var(--light); }
.blog-card a.link-arrow{ margin-top: var(--sp-4); align-self: flex-start; color: var(--light); border-bottom-color: var(--light); }
.blog-card a.link-arrow:hover{ color: var(--bronze-soft); border-bottom-color: var(--bronze-soft); }
.blog .link-arrow{ color: var(--light); border-bottom-color: var(--light); }
.blog .link-arrow:hover{ color: var(--bronze-soft); border-bottom-color: var(--bronze-soft); }

/* ---------- Contact ---------- */
.contact{ background: var(--bg-light); color: var(--dark); }
.contact .eyebrow{ color: var(--bronze); }
.contact .eyebrow::before{ background: var(--bronze); }
.contact .section-head h2{ color: var(--dark); }
.contact .section-head{ margin-bottom: var(--sp-7); }

.contact-layout{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--sp-8);
  align-items: stretch;
}
@media (max-width: 940px){ .contact-layout{ grid-template-columns: 1fr; gap: var(--sp-7); } }

/* Left info blocks */
.contact-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 100%;
}

.contact-info-block{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.contact-info-block:first-child{ border-top: 1px solid var(--line); }

.ci-icon{
  width: 48px; height: 48px;
  background: rgba(132,107,67,0.12);
  border: 1px solid rgba(132,107,67,0.45);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--bronze);
  flex: none;
}
.ci-icon svg{ width: 20px; height: 20px; }

.contact-info-block strong{
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.35rem;
}
.contact-info-block span,
.contact-info-block a{
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.contact-info-block a:hover{ color: var(--bronze); }

/* WhatsApp CTA button */
.btn-wa-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 2rem;
  background: var(--bronze);
  color: var(--light);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-wa-cta:hover{ background: var(--dark); color: var(--light); transform: translateY(-2px); }
.btn-wa-cta svg{ width: 20px; height: 20px; }

/* Form */
.contact-form{ display: flex; flex-direction: column; gap: var(--sp-5); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 540px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display: flex; flex-direction: column; gap: 0.45rem; }
.field--full{ grid-column: 1 / -1; }
.field label{
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
}
.field input, .field select, .field textarea{
  background: var(--paper);
  border: 1px solid rgba(132,107,67,0.4);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  color: var(--dark);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field select{ color: var(--dark); }
.field select option{ color: var(--dark); background: var(--paper); }
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--bronze);
  background: var(--paper);
  outline: none;
}
.contact-actions{ margin-top: var(--sp-3); }
.form-note{ font-size: 0.75rem; color: var(--ink-faint); margin-top: var(--sp-3); }