@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --rust:#B7410E;
  --rust-dark:#8C3109;
  --rust-light:#E06A34;
  --black:#161311;
  --white:#ffffff;
  --cream:#FAF6F0;
  --cream-dim:#F0E9DE;
  --line:#e8e1d8;
  --gold:#febd33;
  --glass:rgba(255,255,255,.6);
  --glass-strong:rgba(255,255,255,.78);
  --glass-dark:rgba(22,19,17,.62);
  --glass-line:rgba(255,255,255,.5);
  --shadow-soft:0 20px 50px -20px rgba(22,19,17,.22);
  --shadow-deep:0 30px 70px -20px rgba(22,19,17,.4);
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Open Sans',sans-serif;
  color:var(--black);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:800;line-height:1.12;letter-spacing:-.01em;}
h1{font-size:clamp(34px,5.4vw,58px);}
h2{font-size:clamp(24px,3.6vw,36px);}
h3{font-size:19px;}
.eyebrow{color:var(--rust);font-weight:700;font-size:14px;font-family:'Manrope',sans-serif;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:700;
  font-size:15px;
  font-family:'Manrope',sans-serif;
  border:2px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  position:relative;
}
.btn-solid{
  background:linear-gradient(135deg,var(--rust-light),var(--rust) 55%,var(--rust-dark));
  color:var(--white);
  box-shadow:0 14px 30px -10px rgba(140,49,9,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-solid:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 40px -10px rgba(140,49,9,.65), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-outline{background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--rust);border-color:rgba(183,65,14,.25);box-shadow:0 8px 22px -10px rgba(22,19,17,.18);}
.btn-outline:hover{transform:translateY(-3px);border-color:var(--rust);}

/* ---------- header (glass) ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--glass-strong);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--glass-line);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 4px 14px -4px rgba(22,19,17,.3);}
.brand span{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;}
nav.links{display:flex;gap:8px;font-weight:600;font-size:14.5px;font-family:'Manrope',sans-serif;}
nav.links a{padding:9px 14px;border-radius:100px;transition:background .2s ease, color .2s ease;}
nav.links a:hover{color:var(--rust);background:rgba(183,65,14,.08);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.menu-toggle{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--black);}

@media(max-width:860px){
  nav.links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--glass-strong);
    backdrop-filter:blur(18px);
    flex-direction:column;
    gap:0;
    display:none;
    border-bottom:1px solid var(--glass-line);
    padding:8px;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:14px 16px;border-radius:12px;}
  .menu-toggle{display:block;}
}

/* ---------- hero (bento) ---------- */
.hero{
  position:relative;
  padding:70px 0 40px;
  overflow:hidden;
}
.mesh{
  position:absolute;inset:-10% -10% auto -10%;height:900px;z-index:0;pointer-events:none;
  background:
    radial-gradient(600px 420px at 12% 15%, rgba(254,189,51,.45), transparent 60%),
    radial-gradient(560px 420px at 88% 8%, rgba(183,65,14,.28), transparent 60%),
    radial-gradient(700px 500px at 55% 85%, rgba(183,65,14,.16), transparent 65%);
  filter:blur(10px);
  animation:meshFloat 18s ease-in-out infinite alternate;
}
@keyframes meshFloat{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-2%,3%) scale(1.06);}
}
.hero-bento{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
  align-items:start;
}
.hero-copy{
  grid-column:span 7;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-line);
  border-radius:28px;
  padding:44px 40px;
  box-shadow:var(--shadow-soft);
}
.hero-tagline{color:var(--rust);font-weight:700;margin-bottom:12px;font-family:'Manrope',sans-serif;}
.accent-text{background:linear-gradient(100deg,var(--rust) 10%,var(--gold) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:17px;color:#4a443e;margin:18px 0 28px;max-width:48ch;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.trust-row{display:flex;align-items:center;gap:14px;margin-top:28px;}
.trust-avatars{display:flex;}
.trust-avatars img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top center;
  border:3px solid var(--white);box-shadow:0 6px 14px -6px rgba(22,19,17,.35);
  background:#f3ede6;
}
.trust-avatars img:not(:first-child){margin-left:-14px;}
.trust-row p{font-size:13.5px;color:#4a443e;margin:0;}
.trust-row p b{color:var(--rust-dark);}

.feature-icons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.feature-icon-card{
  flex:1;min-width:130px;
  background:var(--white);border-radius:18px;padding:18px 14px;
  box-shadow:0 14px 28px -18px rgba(22,19,17,.3);
  border:1px solid rgba(183,65,14,.08);
  text-align:left;
}
.ficon{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--rust-light));
  color:var(--white);display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.ficon svg{width:20px;height:20px;}
.feature-icon-card p{font-size:13.5px;font-weight:700;color:#221d18;margin:0;line-height:1.4;}

.hero-visual{
  grid-column:span 5;
  position:relative;
  height:460px;
  display:flex;align-items:flex-end;justify-content:center;
}
.hero-ring{
  position:absolute;left:50%;top:46%;
  width:340px;height:340px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(254,189,51,.55), rgba(183,65,14,.28) 70%);
  filter:blur(2px);
  z-index:1;
}
.hero-ring-dashed{
  position:absolute;left:50%;top:46%;
  width:400px;height:400px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px dashed rgba(183,65,14,.45);
  z-index:1;
  animation:ringSpin 30s linear infinite;
}
@keyframes ringSpin{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}
.hero-float{
  position:absolute;color:var(--gold);z-index:2;
  animation:floatDot 4s ease-in-out infinite alternate;
}
.hero-float svg{width:22px;height:22px;}
.hero-float.f1{top:6%;right:12%;}
.hero-float.f2{bottom:10%;left:4%;animation-delay:1.2s;color:var(--rust);}
@keyframes floatDot{
  0%{transform:translateY(0);}
  100%{transform:translateY(-14px);}
}
.hero-photo{
  position:absolute;bottom:0;
  width:220px;border-radius:20px 20px 0 0;
  object-fit:cover;object-position:top center;
  filter:drop-shadow(0 18px 26px rgba(22,19,17,.28));
}
.hero-photo.p1{left:6%;z-index:3;height:400px;}
.hero-photo.p2{right:6%;z-index:2;height:350px;opacity:.96;}
.hero-visual .badge{
  position:absolute;left:8px;bottom:14px;
  background:var(--glass-dark);
  backdrop-filter:blur(14px);
  color:var(--gold);font-weight:700;font-size:13.5px;font-family:'Manrope',sans-serif;
  padding:10px 18px;border-radius:100px;
  box-shadow:0 14px 26px -10px rgba(0,0,0,.4);
  z-index:4;white-space:nowrap;
  border:1px solid rgba(255,255,255,.15);
}
@media(max-width:860px){
  .hero-copy{grid-column:span 12;padding:32px 26px;}
  .hero-visual{grid-column:span 12;height:340px;margin-top:6px;}
  .hero-photo.p1{height:290px;width:170px;}
  .hero-photo.p2{height:250px;width:160px;}
  .hero-ring{width:250px;height:250px;}
  .hero-ring-dashed{width:290px;height:290px;}
  .feature-icons{gap:10px;}
  .feature-icon-card{min-width:100px;padding:14px 10px;}
}

/* About section visual: circular photo with dashed ring + floating info cards */
.about-visual{
  grid-column:span 1;
  position:relative;
  height:380px;
  display:flex;align-items:center;justify-content:center;
}
.about-visual .hero-ring{width:300px;height:300px;top:50%;}
.about-visual .hero-ring-dashed{width:340px;height:340px;top:50%;}
.about-visual .about-photo{
  position:relative;z-index:2;
  width:280px;height:280px;border-radius:50%;
  object-fit:cover;object-position:top center;
  border:6px solid var(--white);
  box-shadow:0 20px 40px -16px rgba(22,19,17,.35);
}
.float-card{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:10px;
  background:var(--white);border-radius:16px;
  padding:10px 14px;
  box-shadow:0 14px 26px -12px rgba(22,19,17,.3);
  border:1px solid rgba(183,65,14,.08);
  animation:floatDot 4s ease-in-out infinite alternate;
}
.float-card .ficon-sm{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--rust-light));
  color:var(--white);display:flex;align-items:center;justify-content:center;
}
.float-card .ficon-sm svg{width:17px;height:17px;}
.float-card p{font-size:12.5px;font-weight:700;color:#221d18;line-height:1.3;margin:0;}
.float-card.fc1{top:6%;right:0%;animation-delay:0s;}
.float-card.fc2{bottom:8%;left:-4%;animation-delay:1.2s;}
@media(max-width:860px){
  .about-visual{grid-column:span 12;height:320px;margin-top:10px;}
  .about-visual .about-photo{width:230px;height:230px;}
  .about-visual .hero-ring{width:250px;height:250px;}
  .about-visual .hero-ring-dashed{width:290px;height:290px;}
  .float-card{padding:8px 12px;}
  .float-card p{font-size:11.5px;}
}

/* stat chips floating strip */
.chip-row{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:26px;
}
.chip{
  background:var(--glass-strong);
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);
  border-radius:100px;
  padding:12px 22px;
  font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 10px 24px -14px rgba(22,19,17,.25);
  transition:transform .3s var(--ease);
}
.chip:hover{transform:translateY(-4px);}
.chip b{font-family:'Manrope',sans-serif;color:var(--rust);font-size:16px;}

/* ---------- sections ---------- */
section{padding:64px 0;position:relative;}
section.alt{background:var(--cream-dim);}
.section-head{max-width:640px;margin:0 auto 36px;text-align:center;}

/* ---------- services scrollytelling section ---------- */
.services-scroll{
  position:relative;padding:0;
  height:calc(7 * 70vh);
  background:var(--black);
}
.services-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;
}
.services-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.services-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg, rgba(22,15,10,.93) 0%, rgba(90,35,10,.82) 42%, rgba(22,15,10,.5) 100%);
}
.services-grid{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.services-intro .eyebrow{font-weight:700;font-family:'Manrope',sans-serif;letter-spacing:.02em;}
.services-intro h2{color:var(--white);font-size:clamp(26px,3.2vw,40px);line-height:1.18;margin:14px 0 16px;}
.services-intro p{color:rgba(255,255,255,.75);max-width:40ch;margin-bottom:26px;font-size:15px;}

/* The list is a fixed-height, internally-scrolling panel: this guarantees
   every one of the 14 services is always reachable regardless of viewport
   height, instead of relying on a max-height guess that can clip items
   off screen on shorter browser windows. The active item is kept centred
   in view automatically via scrollIntoView() in JS, so the motion reads
   as one continuous smooth scroll rather than a jump. */
.services-list-wrap{
  position:relative;display:flex;
  height:min(58vh, 460px);
}
.services-track{position:relative;width:2px;background:rgba(255,255,255,.16);border-radius:2px;margin-right:20px;flex-shrink:0;}
.services-track-dot{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--rust-light));
  box-shadow:0 0 14px 2px rgba(254,189,51,.55);
}
.services-list{
  list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:44% 0;
  overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  flex:1;
}
.services-list::-webkit-scrollbar{display:none;}
.services-list li{
  display:flex;align-items:center;gap:14px;padding:9px 4px;
  opacity:.4;transition:opacity .35s ease, transform .35s ease;
  cursor:default;
}
.services-list li.active{opacity:1;transform:translateX(4px);}
.services-list .s-icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:rgba(255,255,255,.1);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,color .3s ease;
}
.services-list li.active .s-icon{background:linear-gradient(135deg,var(--gold),var(--rust-light));color:var(--white);}
.services-list .s-icon svg{width:16px;height:16px;}
.services-list .s-text b{display:block;color:var(--white);font-size:14.5px;font-weight:700;line-height:1.3;}
.services-list .s-text small{display:block;color:rgba(255,255,255,.8);font-size:12px;margin-top:2px;max-width:34ch;
  height:0;opacity:0;overflow:hidden;transition:height .3s ease, opacity .3s ease;}
.services-list li.active .s-text small{height:16px;opacity:1;}

@media(max-width:860px){
  .services-scroll{height:calc(7 * 46vh);}
  .services-grid{grid-template-columns:1fr;gap:20px;}
  .services-intro p{display:none;}
  .services-intro h2{font-size:24px;}
  .services-list-wrap{height:44vh;}
  .services-list .s-text small{display:none !important;}
}

/* ---------- bento services grid ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(175px,auto);
  gap:16px;
  perspective:1200px;
}
.bento-tile{
  border-radius:20px;
  padding:24px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--glass-line);
  background:var(--glass-strong);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 30px -18px rgba(22,19,17,.25);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-end;
  transform-style:preserve-3d;
  will-change:transform;
}
.bento-tile:hover{box-shadow:0 26px 46px -18px rgba(22,19,17,.35);}
.bento-tile h3{color:var(--black);margin-bottom:6px;font-size:17px;}
.bento-tile p{font-size:13.5px;color:#55504a;}
.tile-icon{
  position:absolute;top:20px;left:20px;z-index:2;
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--rust-light));
  color:var(--white);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 18px -8px rgba(140,49,9,.4);
}
.tile-icon svg{width:22px;height:22px;}
.bento-tile.feature .tile-icon{background:rgba(255,255,255,.2);backdrop-filter:blur(6px);box-shadow:none;}
.bento-tile.wide .tile-icon{top:24px;left:24px;}
.bento-tile.feature{
  grid-column:span 2;grid-row:span 2;
  background:linear-gradient(150deg,var(--rust-light),var(--rust) 55%,var(--rust-dark));
  color:var(--white);
  justify-content:flex-end;
  padding:30px;
}
.bento-tile.feature h3{color:var(--white);font-size:23px;}
.bento-tile.feature p{color:rgba(255,255,255,.85);font-size:14.5px;}
.bento-tile.feature::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(240px 200px at 85% 0%, rgba(254,189,51,.35), transparent 65%);
}
.bento-tile.gold{background:linear-gradient(150deg,#fff4d9,var(--cream));}
.bento-tile.gold h3{color:var(--rust-dark);}
.bento-tile.wide{grid-column:span 2;grid-row:span 1;}
.bento-tile.wide.feature{grid-row:span 1;}
@media(max-width:940px){.bento-tile.wide{grid-column:span 2;}}
@media(max-width:560px){.bento-tile.wide{grid-column:span 1;}}

/* page hero (smaller, non-home pages) */
.page-hero{position:relative;padding:52px 0 30px;overflow:hidden;}
.page-hero .mesh{height:520px;}
.page-hero-copy{
  position:relative;z-index:1;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-line);
  border-radius:28px;
  padding:40px;
  max-width:760px;
  box-shadow:var(--shadow-soft);
}

/* blog feature tile */
.blog-card.feature{
  grid-column:span 2;
  background:linear-gradient(150deg,var(--rust-light),var(--rust) 55%,var(--rust-dark));
  color:var(--white);
}
.blog-card.feature h3{color:var(--white);}
.blog-card.feature .tag{color:var(--gold);}
.blog-card.feature .meta{color:rgba(255,255,255,.8);}
.blog-card.feature p.excerpt{color:rgba(255,255,255,.9);font-size:14px;margin-top:8px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr;}.blog-card.feature{grid-column:span 1;}}

/* reel big */
.reel.big{grid-column:span 2;grid-row:span 2;}
@media(max-width:860px){.reel.big{grid-column:span 2;grid-row:span 1;}}

/* info tiles (contact) */
.info-tile{
  background:var(--glass-strong);backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);border-radius:18px;padding:20px 22px;
  box-shadow:0 12px 26px -16px rgba(22,19,17,.2);
  display:flex;gap:14px;align-items:flex-start;
}
.info-tile .icon{font-size:22px;color:var(--rust);flex-shrink:0;}
.info-tile .icon-badge{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--rust-light));
  color:var(--white);display:flex;align-items:center;justify-content:center;
}
.info-tile .icon-badge svg{width:20px;height:20px;}
.info-tile h4{font-family:'Manrope',sans-serif;font-size:14px;margin-bottom:4px;}
.info-tile p{font-size:14px;color:#55504a;}

/* form feedback */
.form-note{font-size:13px;color:#847e77;margin-top:10px;}
.form-note.success{color:var(--rust-dark);font-weight:700;}
@media(max-width:940px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento-tile.feature{grid-column:span 2;grid-row:span 1;min-height:220px;}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;}
  .bento-tile.feature{grid-column:span 1;}
}

/* ---------- generic glass card row ---------- */
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.row-3{grid-template-columns:1fr;}}

.card{
  background:var(--glass-strong);
  backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);
  border-radius:20px;padding:26px;
  box-shadow:0 16px 34px -20px rgba(22,19,17,.25);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -18px rgba(22,19,17,.32);}
.card .stars{color:var(--gold);letter-spacing:2px;margin-bottom:10px;}

/* ---------- team (sticky-feel glass) ---------- */
.team-card{text-align:center;background:var(--glass-strong);backdrop-filter:blur(14px);border:1px solid var(--glass-line);border-radius:24px;padding:28px 20px;box-shadow:var(--shadow-soft);}
.team-card .photo-ring{position:relative;width:170px;height:170px;margin:0 auto 16px;}
.team-card .photo-ring::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(254,189,51,.5), rgba(183,65,14,.22) 70%);
  filter:blur(2px);z-index:0;
}
.team-card .photo-ring::after{
  content:'';position:absolute;inset:-22px;border-radius:50%;
  border:2px dashed rgba(183,65,14,.4);
  animation:ringSpin 30s linear infinite;
}
.team-card img{
  position:relative;z-index:1;
  width:170px;height:170px;object-fit:cover;object-position:top center;border-radius:50%;
  margin:0 auto 16px;border:5px solid var(--white);
  background:#f3ede6;
  box-shadow:0 18px 32px -12px rgba(22,19,17,.35);
}
.team-card .role{color:var(--rust);font-weight:700;font-size:14px;margin:4px 0 8px;font-family:'Manrope',sans-serif;}

.about-sticky{position:sticky;top:110px;}
@media(max-width:860px){.about-sticky{position:static;}}

/* ---------- reels ---------- */
.reels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.reel{
  aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#2a2320,var(--black));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 30px -16px rgba(22,19,17,.4);
  transition:transform .3s var(--ease);
}
.reel:hover{transform:translateY(-6px) scale(1.02);}
.reel iframe{width:100%;height:100%;border:0;}
.reel .ig-link{
  position:absolute;bottom:10px;right:10px;background:var(--glass-strong);
  backdrop-filter:blur(10px);
  border-radius:100px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--rust);
}
@media(max-width:860px){.reels-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- blog ---------- */
.blog-card{background:var(--glass-strong);backdrop-filter:blur(14px);border:1px solid var(--glass-line);border-radius:20px;padding:22px;box-shadow:0 14px 30px -18px rgba(22,19,17,.22);transition:transform .3s var(--ease);}
.blog-card:hover{transform:translateY(-6px);}
.blog-card img{border-radius:12px;margin-bottom:14px;aspect-ratio:16/10;object-fit:cover;}
.blog-card .tag{color:var(--rust);font-size:12px;font-weight:700;font-family:'Manrope',sans-serif;}
.blog-card .meta{font-size:12px;color:#847e77;margin:4px 0 8px;}

/* ---------- final CTA glass ---------- */
.article{max-width:760px;margin:0 auto;}
.article .tag{color:var(--rust);font-size:12px;font-weight:700;font-family:'Manrope',sans-serif;}
.article .meta{font-size:13px;color:#847e77;margin:6px 0 22px;}
.article p{font-size:16px;line-height:1.75;color:#3d3833;margin:0 0 18px;}
.article h2{font-size:22px;margin:34px 0 12px;color:var(--rust-dark);}
.article ul{margin:0 0 18px 20px;color:#3d3833;font-size:16px;line-height:1.75;}
.article li{margin-bottom:8px;}
.article-nav{display:flex;justify-content:space-between;margin-top:36px;padding-top:20px;border-top:1px solid var(--glass-line);}
.article-nav a{font-size:14px;font-weight:700;color:var(--rust);}

.testimonial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.testimonial-card{position:relative;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 14px 30px -18px rgba(22,19,17,.35);aspect-ratio:9/16;}
.testimonial-card video{width:100%;height:100%;object-fit:cover;display:block;}
.testimonial-card .tlabel{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));color:#fff;pointer-events:none;}
.testimonial-card .tlabel b{display:block;font-size:14px;}
.testimonial-card .tlabel span{font-size:12px;opacity:.85;}
.testimonial-card .stars{color:var(--gold);position:absolute;top:12px;left:14px;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.5);}
@media (max-width:900px){.testimonial-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.testimonial-grid{grid-template-columns:1fr 1fr;gap:12px;}}

.cta-glass{
  position:relative;
  border-radius:32px;
  padding:64px 32px;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(150deg,var(--rust-light),var(--rust) 55%,var(--rust-dark));
  color:var(--white);
  box-shadow:var(--shadow-deep);
}
.cta-glass::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(500px 300px at 15% 0%, rgba(254,189,51,.4), transparent 60%),
             radial-gradient(500px 300px at 90% 100%, rgba(255,255,255,.12), transparent 60%);
}
.cta-glass h2{color:var(--white);position:relative;}
.cta-glass p{position:relative;color:rgba(255,255,255,.9);}
.cta-glass .btn-outline{background:var(--white);color:var(--rust);border-color:transparent;position:relative;}

/* ---------- map/contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.map-frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);height:340px;}
.map-frame iframe{width:100%;height:100%;border:0;}
form.contact-form input,form.contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:14px;margin-bottom:12px;background:var(--white);
}
form.contact-form label{font-size:13px;font-weight:700;margin-bottom:4px;display:block;font-family:'Manrope',sans-serif;}

/* ---------- footer (glass dark) ---------- */
footer.site{
  background:linear-gradient(180deg,var(--black),#0d0b0a);
  color:var(--white);padding:52px 0 22px;
  position:relative;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
footer.site h4{color:var(--gold);font-size:15px;margin-bottom:12px;font-family:'Manrope',sans-serif;}
footer.site p, footer.site a{color:#d8d3cb;font-size:14px;}
footer.site ul{list-style:none;}
footer.site ul li{margin-bottom:8px;}
footer.site ul li a:hover{color:var(--gold);}
.footer-bottom{
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:13px;color:#a39d94;
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;
  background:#ffffff;color:#ffffff;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:27px;
  box-shadow:0 10px 26px -6px rgba(22,19,17,.4);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-size:13px;color:#847e77;padding:16px 0;}
.breadcrumb a:hover{color:var(--rust);}

/* ================= MOBILE: DISABLE SCROLL-HIJACK SERVICES PANEL ================= */
/* The pinned/sticky scroll-jacking technique (tall spacer container +
   JS computing progress from window.innerHeight and rect.top) is fragile
   on mobile: the address bar showing/hiding constantly changes
   window.innerHeight mid-scroll, momentum/inertia scrolling on iOS/Android
   doesn't fire steady scroll events, and the inner list has
   overflow-y:hidden so it cannot be scrolled directly if the JS math
   stalls. The combined effect is the frozen, unresponsive panel seen on
   phones. Rather than patch that fragile math, mobile gets a plain,
   natively-scrolling static section instead: same background photo and
   copy, but the list just sits there and scrolls with the page like any
   normal content. Desktop keeps the full scrollytelling effect. */
@media(max-width:860px){
  .services-scroll{
    height:auto !important;
    padding:56px 0 !important;
  }
  .services-sticky{
    position:static !important;
    height:auto !important;
    display:block !important;
  }
  .services-bg{ position:absolute; }
  .services-grid{ display:block; }
  .services-intro{ margin-bottom:28px; }
  .services-intro p{ display:block !important; }
  .services-track{ display:none; }
  .services-list-wrap{ height:auto !important; display:block; }
  .services-list{
    overflow-y:visible !important;
    overflow-x:visible !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
    scroll-behavior:auto !important;
  }
  .services-list li{ opacity:1 !important; transform:none !important; }
  .services-list li.active{ transform:none !important; }
  .services-list .s-text small{
    display:block !important;
    height:auto !important;
    opacity:.85 !important;
    overflow:visible !important;
  }
}

/* ================= MOBILE: REDUCE BLUR + ANIMATION LOAD ================= */
/* Many stacked backdrop-filter blur panels plus several always-running
   CSS animations (mesh glow, spinning ring, floating dots) add up to a
   heavier compositing/paint load than most phone GPUs handle smoothly,
   especially while a scroll listener is also running. This keeps the
   full glass/motion look on desktop but simplifies it on phones so
   scrolling and interactions stay smooth. */
@media(max-width:860px){
  header.site,
  .hero-copy,
  .page-hero-copy,
  .bento-tile,
  .card,
  .team-card,
  .blog-card,
  .btn-outline,
  .info-tile{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .hero-copy,
  .page-hero-copy{ background:rgba(255,255,255,.94); }
  .bento-tile,
  .card,
  .team-card,
  .blog-card,
  .info-tile{ background:rgba(255,255,255,.96); }

  .mesh,
  .hero-ring-dashed,
  .hero-float{ animation:none !important; }
}

/* Hero "Book on WhatsApp" button: same color as the small feature icon buttons */
.hero-actions .btn-solid{background:linear-gradient(135deg,var(--gold),var(--rust-light));}

/* reel playback */
.reel .reel-play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit;}
.reel .reel-play img{width:100%;height:100%;object-fit:cover;display:block;}
.reel .reel-play::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b7410e' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 52% 50%/26px no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s;}
.reel:hover .reel-play::after{transform:scale(1.1);}
.reel .reel-play:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;}
.reel .reel-media{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000;}
.reel .ig-link{z-index:2;}
.article h3{font-size:18px;margin:26px 0 10px;color:var(--rust-dark);}
.article ol{margin:0 0 18px 20px;color:#3d3833;font-size:16px;line-height:1.75;}
.article blockquote{margin:0 0 18px;padding:2px 0 2px 16px;border-left:4px solid var(--gold);color:#5a534c;font-style:italic;}
.article p img{display:block;max-width:100%;height:auto;border-radius:14px;margin:6px 0;}

/* ---------- blog: browse by topic (category thumbnails) ---------- */
.cat-strip{margin:0 0 34px;}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;}
.cat-head h2{font-size:clamp(20px,2.6vw,26px);}
.cat-all{background:none;border:0;font:inherit;font-weight:700;font-family:'Manrope',sans-serif;font-size:14px;color:var(--rust);cursor:pointer;padding:6px 2px;}
.cat-all[hidden]{display:none;}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.cat-tile{position:relative;display:block;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--cream-dim);box-shadow:0 14px 30px -18px rgba(22,19,17,.35);transition:transform .3s var(--ease),box-shadow .3s var(--ease);font:inherit;text-align:left;color:#fff;isolation:isolate;}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.cat-tile:focus-visible,.cat-tile.on{outline:3px solid var(--gold);outline-offset:2px;}
.cat-img{position:absolute;inset:0;z-index:-2;}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.cat-tile:hover .cat-img img{transform:scale(1.07);}
.cat-img.ph{background:linear-gradient(150deg,var(--rust-light),var(--rust) 55%,var(--rust-dark));display:flex;align-items:center;justify-content:center;}
.cat-img.ph b{font-family:'Manrope',sans-serif;font-size:56px;color:rgba(255,255,255,.28);}
.cat-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,19,17,0) 38%,rgba(22,19,17,.8));}
.cat-name{position:absolute;left:14px;right:14px;bottom:30px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;line-height:1.15;}
.cat-count{position:absolute;left:14px;bottom:11px;font-size:12px;color:var(--gold);font-weight:700;}
#blogGrid{scroll-margin-top:90px;}