/* ============================================================
   TOKENS
============================================================ */
:root{
  --charcoal:#25231F;
  --ivory:#F4F1EA;
  --gold:#C7A86B;
  --taupe:#D8D0C2;
  --sand:#E7E0D5;
  --antique:#9D8358;
  --ink-soft:rgba(37,35,31,0.66);
  --ink-faint:rgba(37,35,31,0.42);
  --line:rgba(37,35,31,0.14);
  --line-gold:rgba(199,168,107,0.45);
  --serif:'Cormorant Garamond', serif;
  --sans:'Manrope', sans-serif;
  --container:1180px;
  --radius-pill:999px;
  --radius-card:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  opacity:0;
  animation:pageIn .8s var(--ease) .05s forwards;
}
@keyframes pageIn{to{opacity:1;}}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;color:var(--charcoal);}
p{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;position:relative;z-index:1;}

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

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--antique);
  outline-offset:3px;
}

/* ============================================================
   SHARED PATTERNS
============================================================ */
.eyebrow{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--antique);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--antique);
  display:inline-block;
}
.section{padding:132px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head h2{font-size:clamp(32px,4vw,48px);line-height:1.15;margin-top:18px;font-weight:600;}
.section-head p{margin-top:20px;font-size:17px;color:var(--ink-soft);max-width:520px;}

.divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, var(--line-gold) 50%, transparent);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.02em;
  padding:16px 30px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--antique));
  color:var(--ivory);
  border:1px solid transparent;
  box-shadow:0 10px 24px -12px rgba(157,131,88,0.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(157,131,88,0.6);}
.btn-outline{
  background:transparent;
  color:var(--charcoal);
  border:1px solid var(--charcoal);
}
.btn-outline:hover{background:var(--charcoal);color:var(--ivory);}
.btn-arrow{transition:transform .35s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(4px);}
.btn-ghost{
  color:var(--charcoal);
  font-weight:600;
  font-size:14.5px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line-gold);
  padding-bottom:2px;
}
.btn-ghost:hover .btn-arrow{transform:translateX(4px);}

/* Reveal-on-scroll (single restrained pattern, used only for section heads / hero) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.14s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.23s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.32s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.41s;}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.5s;}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.59s;}

/* ============================================================
   NAV
============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:26px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  padding:16px 0;
  background:rgba(244,241,234,0.88);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav .container{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:58px;width:auto;filter:drop-shadow(0 2px 8px rgba(214,170,60,.3));}
.brand-word{font-family:var(--serif);font-weight:600;font-size:18.5px;letter-spacing:0.03em;line-height:1.1;}
.brand-word span{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:0.22em;color:var(--antique);font-weight:700;margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:40px;position:relative;}
.nav-links a{
  font-size:14px;font-weight:600;color:var(--charcoal);
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:22px;}
.nav-cta .btn{padding:12px 24px;font-size:13.5px;}
.menu-toggle{display:none;background:none;border:none;padding:8px;position:relative;z-index:210;}
.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--charcoal);margin:5px 0;transition:transform .3s ease, opacity .3s ease;}
.menu-toggle.is-active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

body.nav-on-dark .nav:not(.is-scrolled) .brand-word{color:var(--ivory);}
body.nav-on-dark .nav:not(.is-scrolled) .btn-outline{color:var(--ivory);border-color:var(--ivory);}
body.nav-on-dark .nav:not(.is-scrolled) .menu-toggle span{background:var(--ivory);}
@media (min-width:921px){
  body.nav-on-dark .nav:not(.is-scrolled) .nav-links a{color:var(--ivory);}
}

@media (max-width:480px){
  .brand-word{white-space:nowrap;font-size:16px;}
  .brand-word span{display:none;}
  .nav-cta .btn-primary{display:none;}
}
@media (max-width:920px){
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);
    background:var(--ivory);flex-direction:column;justify-content:center;align-items:flex-start;
    gap:28px;padding:0 40px;
    transform:translateX(100%);transition:transform .45s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,0.08);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-cta .btn-outline{display:none;}
  .menu-toggle{display:block;}
  body.menu-open{overflow:hidden;}
}

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:120px;
  overflow:hidden;
}
.hero-bg-line{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px);
  background-size:100% 96px;
  opacity:0.35;
  mask-image:linear-gradient(to bottom, transparent, black 20%, black 70%, transparent);
  pointer-events:none;
}
.hero .container{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-eyebrow{margin-bottom:26px;}
.hero h1{
  font-size:clamp(40px,5.6vw,68px);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-0.01em;
}
.hero-sub{
  margin-top:26px;
  font-size:18px;
  color:var(--ink-soft);
  max-width:460px;
  line-height:1.7;
}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:44px;flex-wrap:wrap;}
.hero-meta{
  margin-top:64px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.hero-meta-item{
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.hero-meta-item .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);}

.hero-visual{position:relative;height:560px;transition:transform .5s var(--ease);}
.hero-tri-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hero-tri-svg path{
  fill:none;stroke:var(--gold);stroke-width:1.1;
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:draw 2.4s var(--ease) 0.3s forwards;
}
.hero-tri-svg path.inner{stroke:var(--antique);stroke-width:0.8;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2s var(--ease) 0.9s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

.hero-plaque{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:250px;
  padding:26px 20px 22px;
  background:var(--ivory);
  border:1px solid var(--line-gold);
  box-shadow:0 40px 70px -30px rgba(37,35,31,0.35);
  text-align:center;
  overflow:hidden;
}
.hero-plaque::after{
  content:"";
  position:absolute;inset:0;
  background:var(--charcoal);
  transform-origin:left;
  z-index:2;
  animation:curtainOpen .9s var(--ease) 1.3s forwards;
}
@keyframes curtainOpen{from{transform:scaleX(1);}to{transform:scaleX(0);}}
.hero-plaque img{width:100%;height:auto;margin:0 auto;position:relative;z-index:1;}

.hero-dot{
  position:absolute;border-radius:50%;background:var(--gold);
  animation:drift 7s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-16px);}
}

.scroll-cue{
  position:absolute;bottom:36px;left:32px;
  display:flex;align-items:center;gap:12px;
  color:var(--ink-faint);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;
  z-index:2;
}
.scroll-cue .line{width:1px;height:34px;background:var(--ink-faint);position:relative;overflow:hidden;}
.scroll-cue .line::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{
  0%{top:-100%;}
  50%{top:100%;}
  50.01%{top:-100%;}
  100%{top:-100%;}
}

@media (max-width:920px){
  .hero .container{grid-template-columns:1fr;gap:56px;}
  .hero-visual{height:340px;order:-1;}
  .hero-plaque{width:190px;padding:18px 14px 16px;}
  .scroll-cue{display:none;}
}

/* ============================================================
   MARQUEE / TRUST STRIP
============================================================ */
.strip{
  background:var(--charcoal);
  color:var(--ivory);
  padding:22px 0;
  overflow:hidden;
}
.strip-track{
  display:flex;
  gap:64px;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.strip-track span{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:rgba(244,241,234,0.72);
  white-space:nowrap;
  display:flex;align-items:center;gap:64px;
}
.strip-track span::after{content:"◁▷";font-family:var(--sans);color:var(--gold);font-size:10px;letter-spacing:6px;font-style:normal;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   ABOUT
============================================================ */
.about .container{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:80px;
  align-items:start;
}
.about-visual{position:sticky;top:140px;}
.about-visual-frame{
  background:var(--sand);
  padding:44px 30px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.about-visual-frame img{width:150px;}
.about-visual-frame::before{
  content:"";position:absolute;inset:14px;border:1px solid var(--line-gold);pointer-events:none;
}
.about-quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.4;
  color:var(--charcoal);
  margin:36px 0 40px;
  padding-left:26px;
  border-left:2px solid var(--gold);
}
.about-body p{color:var(--ink-soft);font-size:17px;line-height:1.85;}
.about-body p + p{margin-top:18px;}
.trait-row{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.trait-label{font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:14px;display:block;}
.trait-list{display:flex;flex-wrap:wrap;gap:0;font-family:var(--serif);font-size:19px;color:var(--charcoal);}
.trait-list span:not(.sep){font-weight:500;}
.trait-list .sep{color:var(--gold);margin:0 14px;}

.mini-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.mini-icon{text-align:left;}
.mini-icon .circle{
  width:58px;height:58px;border-radius:50%;
  background:var(--sand);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.mini-icon svg{width:24px;height:24px;stroke:var(--antique);}
.mini-icon .label{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--charcoal);}

@media (max-width:900px){
  .about .container{grid-template-columns:1fr;}
  .about-visual{position:static;}
  .about-visual-frame{max-width:220px;}
  .mini-icons{grid-template-columns:1fr 1fr 1fr;gap:16px;}
}

/* ============================================================
   SERVICES (flip cards)
============================================================ */
.services{background:var(--sand);}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.flip-card{
  perspective:1600px;
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;   /* front + back always the same square */
  cursor:pointer;
  outline:none;
}
.flip-card:focus-visible{outline:2px solid var(--antique);outline-offset:4px;}
.flip-card-inner{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  transition:transform .7s var(--ease);
  transform-style:preserve-3d;
}
.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg);}
@media (hover:hover) and (pointer:fine){
  .flip-card:not(.is-flipped):hover .flip-card-inner{transform:rotateY(180deg);}
}
.flip-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;
  padding:28px 26px;
  border:1px solid var(--line);
  overflow:hidden;
}
.flip-front{
  background:var(--charcoal);
  justify-content:flex-end;
  padding:30px 30px 32px;
}
.flip-title{
  position:relative;z-index:1;
  font-size:clamp(24px,2.3vw,30px);line-height:1.15;
  font-weight:600;color:var(--ivory);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.flip-title::before{
  content:"";display:block;width:34px;height:1px;
  background:var(--gold);margin-bottom:14px;
}
.flip-front-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.flip-front-media img,.flip-front-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.12) contrast(1.06) brightness(.97);
  transition:filter .8s ease;
}
.flip-card:hover .flip-front-media img{filter:saturate(1.22) contrast(1.1) brightness(1.03);}
.flip-front-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(200deg, rgba(37,35,31,0.1) 0%, rgba(37,35,31,0.38) 50%, rgba(23,20,15,0.92) 100%),
    linear-gradient(15deg, rgba(199,168,107,0.16) 0%, transparent 30%),
    radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(20,18,15,0.35) 100%);
}
.flip-front-media::before{
  content:"";position:absolute;top:16px;right:16px;z-index:2;width:26px;height:26px;pointer-events:none;
  opacity:0;transform:scale(.6) rotate(-8deg);
  transition:opacity .5s ease .1s, transform .6s var(--ease) .1s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 2 L38 2 M2 2 L2 38' fill='none' stroke='%23C7A86B' stroke-width='1.5'/%3E%3Ccircle cx='2' cy='2' r='2.2' fill='%23C7A86B'/%3E%3C/svg%3E") center/contain no-repeat;
}
.flip-card:hover .flip-front-media::before,.flip-card.is-flipped .flip-front-media::before{opacity:.9;transform:scale(1) rotate(0deg);}
.flip-front-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.flip-back{
  background:linear-gradient(160deg,#2f2c26 0%,var(--charcoal) 60%);
  color:var(--ivory);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:center;
  padding:38px 36px;
}
.flip-back::before{               /* fine gold frame */
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(199,168,107,.28);
  pointer-events:none;
}
.flip-back::after{                /* brand triangle ornament */
  content:"";position:absolute;top:-28px;right:-22px;width:150px;height:150px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L92 88 L8 88 Z' fill='none' stroke='%23C7A86B' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.18;pointer-events:none;
}
.flip-back-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.flip-back-media img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(7px);transform:scale(1.12);}
.flip-back-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(195deg, rgba(37,35,31,0.55) 0%, rgba(37,35,31,0.8) 75%);
}
.flip-back > *{position:relative;z-index:1;}
.flip-face{min-width:0;min-height:0;}
.flip-icon{
  width:66px;height:66px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  flex:none;
}
.flip-icon img{
  width:100%;height:100%;
  display:block;
  transition:transform .5s var(--ease);
}
.flip-card:hover .flip-icon img{transform:scale(1.06) rotate(-2deg);}
.flip-icon .icon-glow{
  position:absolute;inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(199,168,107,0.35), transparent 70%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.flip-card:hover .flip-icon .icon-glow{opacity:1;animation:iconPulse 2.6s ease-in-out infinite;}
@keyframes iconPulse{
  0%,100%{transform:scale(1);opacity:.5;}
  50%{transform:scale(1.15);opacity:.85;}
}
.flip-front-bottom .service-tag{
  font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);font-weight:700;
}
.flip-front-bottom h3{margin-top:10px;font-size:22px;color:var(--ivory);}
.flip-hint{
  margin-top:12px;font-size:12px;color:var(--ink-faint);
  display:flex;align-items:center;gap:8px;font-weight:600;
}
.flip-hint svg{width:13px;height:13px;stroke:var(--ink-faint);flex:none;}
.flip-front .flip-hint{color:rgba(244,241,234,0.65);}
.flip-front .flip-hint svg{stroke:rgba(244,241,234,0.65);}
.flip-back .service-tag{font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);font-weight:700;flex:none;}
.flip-back .service-tag::after{content:"";display:block;width:34px;height:1px;background:var(--gold);margin-top:16px;}
.flip-back p.desc{
  margin:20px 0 0;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(19px,1.75vw,24px);line-height:1.45;letter-spacing:.005em;
  color:rgba(244,241,234,0.94);
  flex:none;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;
}

.flip-more-btn{
  flex:none;margin-top:28px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold);background:none;border:none;
  border-bottom:1px solid rgba(199,168,107,.45);
  padding:0 0 5px;cursor:pointer;
  font-family:var(--sans);text-decoration:none;
  align-self:flex-start;
  position:relative;z-index:3;
  transition:color .3s ease, border-color .3s ease, gap .3s ease;
}
.flip-more-btn:hover,.flip-more-btn:focus-visible{color:var(--ivory);border-color:var(--gold);gap:12px;}
.flip-more-btn svg{width:12px;height:12px;stroke:currentColor;flex:none;}

.modal-service-img{width:100%;display:block;margin-bottom:18px;border:1px solid var(--line-gold);}

@media (max-width:980px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){
  .service-grid{grid-template-columns:1fr;}
  .flip-card{max-width:420px;margin:0 auto;width:100%;}
}
@media (max-width:980px){
  .flip-back{padding:30px 28px;}
  .flip-back p.desc{font-size:18px;line-height:1.4;margin-top:16px;-webkit-line-clamp:7;}
  .flip-more-btn{margin-top:20px;}
}

/* ============================================================
   PROCESS
============================================================ */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:8px;
}
.process-item{background:var(--ivory);padding:48px 36px;}
.process-num{font-family:var(--serif);font-size:15px;color:var(--gold);font-weight:600;letter-spacing:0.04em;}
.process-item h3{margin-top:22px;font-size:23px;}
.process-item p{margin-top:14px;color:var(--ink-soft);font-size:15.5px;line-height:1.75;}
@media (max-width:800px){.process-grid{grid-template-columns:1fr;}}

/* ============================================================
   RESULTS / PORTFOLIO PLACEHOLDER
============================================================ */
.results{background:var(--charcoal);color:var(--ivory);}
.results .eyebrow{color:var(--gold);}
.results .eyebrow::before{background:var(--gold);}
.results .section-head h2{color:var(--ivory);}
.results .section-head p{color:rgba(244,241,234,0.6);}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.results-card{
  border:1px solid rgba(244,241,234,0.16);
  padding:40px 26px;
  min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.results-card .tri-mark{width:30px;height:30px;stroke:var(--gold);}
.results-card p.slot{font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,241,234,0.4);font-weight:700;}
.results-card h4{font-size:19px;color:var(--ivory);margin-top:16px;font-weight:500;font-family:var(--serif);}
.results-card .card-cta{
  margin-top:18px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:8px;opacity:0;transform:translateX(-6px);
  transition:opacity .35s ease, transform .35s var(--ease);
}
.results-card:hover .card-cta{opacity:1;transform:translateX(0);}
.results-card:hover{border-color:var(--gold);}
@media (max-width:820px){.results-grid{grid-template-columns:1fr;}}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials .section-head{margin-left:auto;margin-right:auto;text-align:center;}
.t-slider{position:relative;max-width:740px;margin:0 auto;min-height:220px;}
.t-slide{
  position:absolute;inset:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  text-align:center;
  pointer-events:none;
}
.t-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;}
.t-quote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,28px);line-height:1.5;color:var(--charcoal);}
.t-who{margin-top:26px;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--antique);font-weight:700;}
.t-dots{display:flex;justify-content:center;gap:10px;margin-top:52px;}
.t-dots button{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;padding:0;transition:background .3s ease, transform .3s ease;}
.t-dots button.active{background:var(--gold);transform:scale(1.3);}

/* ============================================================
   CONTACT
============================================================ */
.contact{background:var(--sand);}
.contact .container{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.contact-info-list{margin-top:36px;display:flex;flex-direction:column;gap:26px;}
.contact-info-item{display:flex;gap:18px;align-items:flex-start;}
.contact-info-item svg{width:19px;height:19px;stroke:var(--antique);flex:none;margin-top:3px;}
.contact-info-item .label{font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.contact-info-item .value{font-size:16.5px;margin-top:4px;}
.contact-info-item a.value:hover{color:var(--antique);}
.social-row{display:flex;gap:14px;margin-top:36px;}
.social-row a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease, background .3s ease;
}
.social-row a svg{width:16px;height:16px;stroke:var(--charcoal);}
.social-row a:hover{border-color:var(--gold);background:var(--ivory);}

.map-placeholder{
  margin-top:36px;
  border:1px dashed var(--line-gold);
  padding:22px;
  font-size:13px;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:12px;
}
.map-placeholder svg{width:18px;height:18px;stroke:var(--antique);flex:none;}

.form-card{
  background:var(--ivory);
  padding:44px;
  border:1px solid var(--line);
}
.field{margin-bottom:22px;}
.field label{display:block;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin-bottom:9px;}
.field input,.field textarea{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:10px 2px;
  font-family:var(--sans);
  font-size:15.5px;
  color:var(--charcoal);
  transition:border-color .3s ease;
}
.field input:focus,.field textarea:focus{border-color:var(--gold);outline:none;}
.field textarea{resize:vertical;min-height:90px;}
.form-note{font-size:12.5px;color:var(--ink-faint);margin-top:18px;line-height:1.6;}
.form-success{
  display:none;
  margin-top:18px;
  font-size:14px;
  color:var(--antique);
  font-weight:600;
}
.form-success.show{display:block;}

@media (max-width:900px){.contact .container{grid-template-columns:1fr;gap:56px;}}

/* ============================================================
   FOOTER
============================================================ */
footer{background:var(--charcoal);color:var(--ivory);padding:90px 0 30px;position:relative;overflow:hidden;}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(244,241,234,0.14);}
.footer-brand img{width:132px;height:auto;margin-bottom:22px;}
.footer-brand p{color:rgba(244,241,234,0.55);font-size:14.5px;max-width:260px;line-height:1.7;margin-top:14px;}
.footer-col h5{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:13px;}
.footer-col a,.footer-col span{font-size:14.5px;color:rgba(244,241,234,0.72);}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.footer-bottom p{font-size:13px;color:rgba(244,241,234,0.45);}
.footer-legal{display:flex;gap:24px;}
.footer-legal button{background:none;border:none;color:rgba(244,241,234,0.45);font-size:13px;padding:0;}
.footer-legal button:hover{color:var(--gold);}

@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;row-gap:40px;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ============================================================
   WHATSAPP FLOAT + BOOK CALL
============================================================ */
.wa-float{
  position:fixed;right:26px;bottom:26px;z-index:150;
  width:56px;height:56px;border-radius:50%;
  background:#2f7a52;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.4);
  animation:pulse 2.8s ease-in-out infinite;
}
.wa-float svg{width:26px;height:26px;fill:#fff;}
@keyframes pulse{
  0%,100%{box-shadow:0 14px 30px -10px rgba(47,122,82,0.5);}
  50%{box-shadow:0 14px 30px -6px rgba(47,122,82,0.75);}
}

/* ============================================================
   MODALS (Privacy / Terms)
============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(37,35,31,0.6);
  display:flex;align-items:center;justify-content:center;padding:24px;
  z-index:500;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  background:var(--ivory);max-width:620px;max-height:80vh;overflow-y:auto;
  padding:48px;position:relative;
  transform:translateY(16px);transition:transform .35s var(--ease);
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal h3{font-size:26px;margin-bottom:18px;}
.modal p{color:var(--ink-soft);font-size:14.5px;line-height:1.8;margin-bottom:14px;}
.modal-close{
  position:absolute;top:20px;right:20px;background:none;border:none;
  font-size:22px;color:var(--ink-faint);line-height:1;
}
.modal-note{
  margin-top:24px;padding:14px 16px;background:var(--sand);font-size:12.5px;color:var(--ink-soft);
  border-left:2px solid var(--gold);
}

/* ============================================================
   RESPONSIVE SECTION PADDING
============================================================ */
@media (max-width:700px){
  .section{padding:88px 0;}
  .container{padding:0 22px;}
}

/* ============================================================
   PAGE HERO (inner pages banner)
============================================================ */
.page-hero{
  padding:172px 0 76px;
  position:relative;
  overflow:hidden;
}
.page-hero-bg{
  position:absolute;top:92px;left:0;right:0;bottom:0;
  overflow:hidden;
  pointer-events:none;
}
.page-hero-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.page-hero-overlay{
  position:absolute;top:92px;left:0;right:0;bottom:0;
  background:linear-gradient(100deg, rgba(37,35,31,0.86) 0%, rgba(37,35,31,0.62) 45%, rgba(37,35,31,0.28) 100%);
  pointer-events:none;
}
.page-hero .container{position:relative;z-index:2;}
.page-hero-crumb{
  font-size:12.5px;color:rgba(244,241,234,0.6);font-weight:600;margin-bottom:22px;
  display:flex;align-items:center;gap:8px;
}
.page-hero-crumb a{color:rgba(244,241,234,0.85);}
.page-hero-crumb a:hover{color:var(--gold);}
.page-hero h1{font-size:clamp(36px,5vw,56px);line-height:1.1;max-width:720px;color:var(--ivory);}
.page-hero p{margin-top:20px;font-size:17px;color:rgba(244,241,234,0.75);max-width:520px;}
.page-hero-tri{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:340px;height:340px;opacity:0.5;pointer-events:none;
}

/* ============================================================
   TEASER LINK CARD (home page section-end links)
============================================================ */
.teaser-more{margin-top:44px;}

/* ============================================================
   BLOG
============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.blog-card{
  background:var(--ivory);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.blog-card-media{
  height:180px;
  background:linear-gradient(135deg, var(--sand), var(--taupe));
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.blog-card-media svg{width:46px;height:46px;stroke:var(--antique);opacity:.7;}
.blog-card-body{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1;}
.blog-tag{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--antique);font-weight:700;}
.blog-card h3{margin-top:14px;font-size:21px;line-height:1.3;}
.blog-card p{margin-top:12px;font-size:14.5px;color:var(--ink-soft);line-height:1.7;flex:1;}
.blog-card .blog-meta{margin-top:20px;font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:10px;font-weight:600;}
.blog-card{transition:border-color .35s ease;}
.blog-card:hover{border-color:var(--gold);}
.blog-card .blog-meta .arrow-hint{
  margin-left:auto;opacity:0;transform:translateX(-6px);color:var(--antique);
  transition:opacity .35s ease, transform .35s var(--ease);
}
.blog-card:hover .blog-meta .arrow-hint{opacity:1;transform:translateX(0);}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.blog-grid{grid-template-columns:1fr;}}

/* ============================================================
   ARTICLE / BLOG POST
============================================================ */
.article-cover{
  max-width:900px;margin:0 auto 8px;
  border:1px solid var(--line-gold);
  box-shadow:0 40px 70px -30px rgba(37,35,31,0.35);
  overflow:hidden;
}
.article-cover img{width:100%;height:auto;display:block;}
.article-meta-row{
  max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px;
  font-size:12.5px;color:var(--ink-faint);font-weight:600;flex-wrap:wrap;
}
.article-meta-row .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);}
.article-prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.85;color:var(--ink-soft);}
.article-prose h2{margin-top:44px;margin-bottom:16px;font-size:28px;color:var(--charcoal);}
.article-prose p{margin-top:0;margin-bottom:20px;}
.article-prose ul{margin:0 0 20px;padding-left:22px;}
.article-prose li{margin-bottom:10px;}
.article-prose blockquote{
  margin:32px 0;padding:22px 26px;background:var(--sand);
  border-left:2px solid var(--gold);font-family:var(--serif);
  font-size:21px;font-style:italic;color:var(--charcoal);
}
.article-cta{
  max-width:760px;margin:48px auto 0;padding:32px;
  background:var(--charcoal);color:var(--ivory);text-align:center;
}
.article-cta h3{color:var(--ivory);font-size:24px;margin-bottom:18px;}

.blog-notice{
  margin-top:48px;
  padding:20px 24px;
  background:var(--sand);
  border-left:2px solid var(--gold);
  font-size:13.5px;
  color:var(--ink-soft);
  display:flex;gap:14px;align-items:flex-start;
  max-width:640px;
}
.blog-notice svg{width:18px;height:18px;stroke:var(--antique);flex:none;margin-top:2px;}

/* ============================================================
   CUSTOM CURSOR (desktop, fine-pointer only)
============================================================ */
@media (hover:hover) and (pointer:fine){
  html.cc-active body{cursor:none;}
  html.cc-active a, html.cc-active button, html.cc-active input, html.cc-active textarea, html.cc-active .flip-card, html.cc-active .wa-float{cursor:none;}

  .cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:6px;height:6px;
    background:var(--gold);
  }
  .cursor-ring{
    width:38px;height:38px;
    border:1px solid var(--line-gold);
    transition:width .3s var(--ease), height .3s var(--ease), border-color .3s ease, background .3s ease;
    display:flex;align-items:center;justify-content:center;
  }
  .cursor-ring.is-hover{
    width:64px;height:64px;
    background:rgba(199,168,107,0.1);
    border-color:var(--gold);
  }
  .cursor-ring.is-down{width:30px;height:30px;}
  .cursor-ring .cursor-label{
    font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--antique);opacity:0;transition:opacity .25s ease;white-space:nowrap;
  }
  .cursor-ring.is-hover .cursor-label{opacity:1;}
}
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none;}
}

/* ============================================================
   FAQ ACCORDION (shared across pages)
============================================================ */
.faq-list{max-width:760px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;background:none;border:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 2px;text-align:left;
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--charcoal);
  transition:color .3s ease;
}
.faq-q:hover{color:var(--antique);}
.faq-q .plus{
  flex:none;font-size:20px;font-weight:300;color:var(--antique);
  transition:transform .4s var(--ease);
}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease), opacity .4s ease;opacity:0;}
.faq-item.open .faq-a{opacity:1;}
.faq-a-inner{padding:0 2px 26px;color:var(--ink-soft);font-size:15.5px;line-height:1.75;max-width:640px;}

/* ============================================================
   VALUE / DIFFERENTIATOR CARDS
============================================================ */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.value-grid-5{grid-template-columns:repeat(5,1fr);}
.value-card{background:var(--ivory);padding:38px 28px;transition:background .4s ease;}
.value-card:hover{background:var(--sand);}
.value-card .num{font-family:var(--serif);color:var(--gold);font-size:14px;font-weight:600;}
.value-card h4{margin-top:16px;font-size:19px;}
.value-card p{margin-top:12px;font-size:14px;color:var(--ink-soft);line-height:1.7;}
@media (max-width:980px){.value-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.value-grid{grid-template-columns:1fr;}}

/* ============================================================
   MINI STEP LIST (used on Contact / Services for "what happens next")
============================================================ */
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px;}
.mini-step{position:relative;padding-left:0;}
.mini-step .num-badge{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;color:var(--antique);font-size:15px;
  margin-bottom:16px;
}
.mini-step h4{font-size:18px;}
.mini-step p{margin-top:10px;font-size:14px;color:var(--ink-soft);line-height:1.7;}
@media (max-width:760px){.mini-steps{grid-template-columns:1fr;gap:32px;}}

/* ============================================================
   TAG CLOUD (Blog categories)
============================================================ */
.tag-cloud{display:flex;flex-wrap:wrap;gap:12px;}
.tag-pill{
  padding:10px 20px;border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;color:var(--charcoal);
  transition:border-color .3s ease, background .3s ease, transform .3s var(--ease);
  display:inline-block;
}
.tag-pill:hover{border-color:var(--gold);background:var(--sand);transform:translateY(-2px);color:var(--antique);}

/* ============================================================
   SECTION KICKER DIVIDER (small decorative element between sections)
============================================================ */
.tri-divider{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 0 0;}
.tri-divider .line{width:64px;height:1px;background:var(--line-gold);}
.tri-divider svg{width:14px;height:14px;stroke:var(--gold);}

/* ============================================================
   STAT ROW
============================================================ */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat-item{background:var(--ivory);padding:36px 28px;text-align:center;}
.stat-item .stat-num{font-family:var(--serif);font-size:clamp(28px,3vw,38px);color:var(--charcoal);font-weight:600;}
.stat-item .stat-label{margin-top:8px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
@media (max-width:700px){.stat-row{grid-template-columns:1fr;}}

/* subtle hover-lift utility used on select cards for extra motion polish */
.hover-lift{transition:transform .45s var(--ease), box-shadow .45s var(--ease);}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(37,35,31,0.25);}

/* ============================================================
   AMBIENT BACKGROUND MOTION (floating gradient orbs + brand
   triangles). Purely decorative: always pointer-events:none,
   always behind content (z-index 0 vs content's z-index 1+),
   and confined to a position:relative;overflow:hidden host so
   they never leak into neighbouring sections or affect layout.
============================================================ */
.bg-motion{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  will-change:transform;
}
/* light-section orbs: soft warm wash, very low intensity so text stays crisp */
.bg-orb-gold{
  background:radial-gradient(circle at 30% 30%, rgba(199,168,107,0.30), rgba(199,168,107,0) 70%);
}
.bg-orb-antique{
  background:radial-gradient(circle at 30% 30%, rgba(157,131,88,0.24), rgba(157,131,88,0) 70%);
}
/* dark-section orbs: a touch stronger so the glow reads against charcoal */
.bg-orb-glow{
  background:radial-gradient(circle at 30% 30%, rgba(199,168,107,0.22), rgba(199,168,107,0) 70%);
}

@keyframes orbFloatA{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(4%,6%) scale(1.08);}
}
@keyframes orbFloatB{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-5%,-4%) scale(1.06);}
}
@keyframes orbFloatC{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(3%,-5%) scale(1.1);}
}
.bg-orb.a{animation:orbFloatA 22s ease-in-out infinite;}
.bg-orb.b{animation:orbFloatB 26s ease-in-out infinite;}
.bg-orb.c{animation:orbFloatC 19s ease-in-out infinite;}

/* Brand triangle motif drifting slowly in section backgrounds */
.bg-tri{
  position:absolute;
  fill:none;
  pointer-events:none;
}
@keyframes triDrift1{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(2%,-4%) rotate(6deg);}
}
@keyframes triDrift2{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-3%,3%) rotate(-5deg);}
}
@keyframes triDrift3{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(2%,4%) rotate(4deg);}
}
.bg-tri.d1{animation:triDrift1 24s ease-in-out infinite;}
.bg-tri.d2{animation:triDrift2 30s ease-in-out infinite;}
.bg-tri.d3{animation:triDrift3 20s ease-in-out infinite;}

/* Reduced motion: freeze ambient decoration entirely */
@media (prefers-reduced-motion: reduce){
  .bg-orb, .bg-tri{animation:none !important;}
}
/* On small screens, keep ambient motion but lighten it: smaller/fewer
   blurred orbs (cheaper to paint) and hide the extra triangle outlines
   to avoid clutter on narrow layouts. */
@media (max-width:560px){
  .bg-tri{display:none;}
  .bg-orb{filter:blur(40px);}
  .bg-orb.b{display:none;}
}

/* ============================================================
   SIGNATURE ACCENTS: shimmer text + CTA glow pulse
============================================================ */
.text-shimmer{
  background:linear-gradient(100deg, var(--charcoal) 25%, var(--gold) 45%, var(--antique) 52%, var(--charcoal) 70%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmerSweep 7s ease-in-out 2.4s infinite;
}
@keyframes shimmerSweep{
  0%{background-position:220% 0;}
  55%{background-position:-40% 0;}
  100%{background-position:-40% 0;}
}

.btn-glow{
  animation:btnGlow 3.2s ease-in-out 2s infinite;
}
@keyframes btnGlow{
  0%,100%{box-shadow:0 10px 24px -12px rgba(157,131,88,0.55);}
  50%{box-shadow:0 10px 34px -8px rgba(199,168,107,0.75);}
}

@media (prefers-reduced-motion: reduce){
  .text-shimmer{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--charcoal);}
  .btn-glow{animation:none;}
}

/* ============================================================
   PRELOADER
============================================================ */
#preloader{
  position:fixed;inset:0;z-index:99999;
  background:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none;}
#preloader .pl-tri{width:64px;height:64px;overflow:visible;}
#preloader .pl-tri path{
  fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:plDraw 1.1s var(--ease) forwards infinite alternate;
}
@keyframes plDraw{to{stroke-dashoffset:0;}}
body.preloading{overflow:hidden;}

/* ============================================================
   SCROLL PROGRESS BAR
============================================================ */
#scrollProgress{
  position:fixed;top:0;left:0;height:2.5px;
  background:linear-gradient(90deg, var(--gold), var(--antique));
  width:0%;
  z-index:300;
  transition:width .1s linear;
}

/* ============================================================
   NAV — sliding active pill indicator
============================================================ */
.nav-pill{
  position:absolute;
  background:rgba(199,168,107,0.14);
  border-radius:var(--radius-pill);
  height:32px;
  top:50%;transform:translateY(-50%);
  transition:left .4s var(--ease), width .4s var(--ease), opacity .3s ease;
  opacity:0;
  pointer-events:none;
  z-index:0;
}
@media (max-width:920px){.nav-pill{display:none;}}
.nav-links a{position:relative;z-index:1;}

/* ============================================================
   MAGNETIC BUTTONS
============================================================ */
@media (hover:hover) and (pointer:fine){
  .btn-primary, .btn-outline{will-change:transform;}
}
.btn-primary, .btn-outline{position:relative;overflow:hidden;}
.btn-primary::before, .btn-outline::before{
  content:"";
  position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:left .65s var(--ease);
  pointer-events:none;
}
.btn-outline::before{background:linear-gradient(115deg, transparent, rgba(157,131,88,0.18), transparent);}
.btn-primary:hover::before, .btn-outline:hover::before{left:130%;}
.btn-primary span, .btn-outline span{position:relative;z-index:1;}

/* ============================================================
   CLICK RIPPLE (cursor click feedback, desktop only)
============================================================ */
@media (hover:hover) and (pointer:fine){
  .click-ripple{
    position:fixed;
    width:10px;height:10px;
    border:1px solid var(--gold);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(1);
    pointer-events:none;
    z-index:9998;
    animation:rippleOut .6s var(--ease) forwards;
  }
  @keyframes rippleOut{
    to{transform:translate(-50%,-50%) scale(6);opacity:0;}
  }
}

/* ============================================================
   SPLIT-TEXT HERO REVEAL
============================================================ */
.split-line{overflow:hidden;display:block;}
.split-line span{
  display:inline-block;
  transform:translateY(110%);
  animation:lineUp .9s var(--ease) forwards;
}
@keyframes lineUp{to{transform:translateY(0);}}

/* ============================================================
   CURTAIN REVEAL (for framed images: hero plaque, about visual)
============================================================ */
.curtain{position:relative;overflow:hidden;}
.curtain::after{
  content:"";
  position:absolute;inset:0;
  background:var(--charcoal);
  transform:scaleX(1);
  transform-origin:right;
  z-index:2;
  transition:transform .9s var(--ease);
}
.curtain.is-visible::after{transform:scaleX(0);}

/* ============================================================
   STAT COUNT-UP ROW (home page quick facts)
============================================================ */
.quickfacts-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.quickfacts-item{background:var(--ivory);padding:40px 24px;text-align:center;}
.quickfacts-item .qf-num{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);color:var(--charcoal);font-weight:600;}
.quickfacts-item .qf-num .suffix{color:var(--gold);}
.quickfacts-item .qf-label{margin-top:8px;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
@media (max-width:1000px){.quickfacts-item{padding:34px 12px;}}
@media (max-width:760px){.quickfacts-row{grid-template-columns:repeat(2,1fr);}.quickfacts-item:last-child{grid-column:1 / -1;}}


/* ============================================================
   PREMIUM POLISH — hero fix, flip-card effects, modal upgrade
============================================================ */
::selection{background:rgba(199,168,107,.38);color:var(--charcoal);}

/* ---------- HERO: scroll cue no longer collides with the meta row ---------- */
.hero{padding-bottom:120px;}
.hero-meta{margin-top:52px;gap:14px 30px;}
.hero-meta-item{white-space:nowrap;}
.scroll-cue{
  left:50%;bottom:26px;transform:translateX(-50%);
  flex-direction:column;gap:10px;
}
.scroll-cue .line{height:38px;}
@media (max-height:660px){.scroll-cue{display:none;}}
@media (max-width:1080px){.scroll-cue{display:none;}}

/* hero plaque: gentle float + light sweep */
.hero-plaque{animation:plaqueFloat 7s ease-in-out 2.6s infinite;}
@keyframes plaqueFloat{
  0%,100%{transform:translate(-50%,-50%);}
  50%{transform:translate(-50%,calc(-50% - 10px));}
}
.hero-plaque::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,240,205,.55) 50%,transparent 62%);
  transform:translateX(-130%);
  animation:plaqueSheen 6s ease-in-out 3s infinite;
}
@keyframes plaqueSheen{0%,55%{transform:translateX(-130%);}100%{transform:translateX(130%);}}

/* ---------- FLIP CARDS: hit-testing safety ---------- */
.flip-front{transform:translateZ(1px);pointer-events:auto;}
.flip-back{transform:rotateY(180deg) translateZ(1px);pointer-events:none;}
.flip-card.is-flipped .flip-front{pointer-events:none;}
.flip-card.is-flipped .flip-back{pointer-events:auto;}
@media (hover:hover) and (pointer:fine){
  .flip-card:hover .flip-front{pointer-events:none;}
  .flip-card:hover .flip-back{pointer-events:auto;}
}

/* ---------- FLIP CARDS: depth, motion, light ---------- */
.flip-card{transition:transform .6s var(--ease);}
@media (hover:hover) and (pointer:fine){
  .flip-card:hover{transform:translateY(-9px);}
}
.flip-face{box-shadow:0 26px 50px -30px rgba(37,35,31,.55), inset 0 0 0 1px rgba(199,168,107,.14);transition:box-shadow .6s var(--ease);}
.flip-card:hover .flip-face,.flip-card.is-flipped .flip-face{box-shadow:0 46px 80px -30px rgba(37,35,31,.75), 0 0 0 1px rgba(199,168,107,.4), inset 0 0 0 1px rgba(199,168,107,.2);}

/* front: fine gold frame draws in on hover/flip, echoing the back face */
.flip-front::before{
  content:"";position:absolute;inset:20px;z-index:2;pointer-events:none;
  border:1px solid rgba(199,168,107,0);
  transition:border-color .6s ease, inset .6s var(--ease);
}
.flip-card:hover .flip-front::before,.flip-card.is-flipped .flip-front::before{
  border-color:rgba(199,168,107,.55);inset:14px;
}

/* front: slow "breathing" image, drifting light sheen, title rule draws in */
.flip-front-media img,.flip-front-media video{animation:kenburns 16s ease-in-out infinite alternate;transform-origin:60% 42%;}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.13);}}
.flip-front::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,236,190,.2) 50%,transparent 60%);
  transform:translateX(-130%);
  animation:cardSheen 7s ease-in-out infinite;
}
.flip-card:nth-child(2n) .flip-front::after{animation-delay:1.6s;}
.flip-card:nth-child(3n) .flip-front::after{animation-delay:3.2s;}
@keyframes cardSheen{0%,60%{transform:translateX(-130%);}100%{transform:translateX(130%);}}
.reveal-stagger.is-visible .flip-title::before{animation:ruleGrow 1s var(--ease) .5s both;}
@keyframes ruleGrow{from{width:0;}to{width:34px;}}
.flip-title{transition:transform .5s var(--ease);}
.flip-card:hover .flip-title{transform:translateY(-3px);}

/* back: cursor-following gold spotlight */
.flip-back{
  background:
    radial-gradient(420px circle at var(--mxr,50%) var(--my,30%), rgba(199,168,107,.17), transparent 60%),
    linear-gradient(160deg,#2f2c26 0%,var(--charcoal) 60%);
}
/* back: frame draws in, content rises in one by one after the flip starts */
.flip-back::before{border-color:rgba(199,168,107,0);transition:border-color .8s ease .2s, inset .8s var(--ease) .2s;inset:22px;}
.flip-card.is-flipped .flip-back::before{border-color:rgba(199,168,107,.32);inset:12px;}
@media (hover:hover) and (pointer:fine){
  .flip-card:hover .flip-back::before{border-color:rgba(199,168,107,.32);inset:12px;}
}
.flip-back .service-tag,.flip-back p.desc{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .7s var(--ease);
}
.flip-back .flip-more-btn{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .7s var(--ease), color .3s ease, border-color .3s ease, gap .3s ease;
}
.flip-card.is-flipped .flip-back .service-tag,
.flip-card.is-flipped .flip-back p.desc,
.flip-card.is-flipped .flip-back .flip-more-btn{opacity:1;transform:none;}
.flip-card.is-flipped .flip-back .service-tag{transition-delay:.25s;}
.flip-card.is-flipped .flip-back p.desc{transition-delay:.38s;}
.flip-card.is-flipped .flip-back .flip-more-btn{transition-delay:.52s,.52s,0s,0s,0s;}
@media (hover:hover) and (pointer:fine){
  .flip-card:hover .flip-back .service-tag,
  .flip-card:hover .flip-back p.desc,
  .flip-card:hover .flip-back .flip-more-btn{opacity:1;transform:none;}
  .flip-card:hover .flip-back .service-tag{transition-delay:.25s;}
  .flip-card:hover .flip-back p.desc{transition-delay:.38s;}
  .flip-card:hover .flip-back .flip-more-btn{transition-delay:.52s,.52s,0s,0s,0s;}
}
.flip-more-btn svg{transition:transform .35s var(--ease);}
.flip-more-btn:hover svg{transform:translateX(4px);}

/* ---------- MODALS: premium glass + staggered content ---------- */
body.modal-open{overflow:hidden;}
.modal-overlay{
  background:rgba(24,22,19,.62);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  transition:opacity .4s ease;
}
.modal{
  border-top:2px solid var(--gold);
  box-shadow:0 60px 110px -30px rgba(0,0,0,.65);
  width:100%;
  opacity:0;transform:translateY(30px) scale(.97);
  transition:transform .6s var(--ease), opacity .45s ease;
}
.modal-overlay.open .modal{opacity:1;transform:none;}
.modal > *:not(.modal-close){opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .6s var(--ease);}
.modal-overlay.open .modal > *:not(.modal-close){opacity:1;transform:none;}
.modal-overlay.open .modal > *:nth-child(2){transition-delay:.12s;}
.modal-overlay.open .modal > *:nth-child(3){transition-delay:.19s;}
.modal-overlay.open .modal > *:nth-child(4){transition-delay:.26s;}
.modal-overlay.open .modal > *:nth-child(5){transition-delay:.33s;}
.modal-overlay.open .modal > *:nth-child(6){transition-delay:.40s;}
.modal-overlay.open .modal > *:nth-child(7){transition-delay:.47s;}
.modal-overlay.open .modal > *:nth-child(8){transition-delay:.54s;}
.modal h3{font-size:clamp(26px,3vw,32px);}
.modal h3::after{content:"";display:block;width:38px;height:1px;background:var(--gold);margin-top:14px;}
.modal-service-img{max-height:190px;object-fit:cover;}
.modal-close{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-gold);
  display:flex;align-items:center;justify-content:center;
  top:18px;right:18px;z-index:5;
  transition:transform .45s var(--ease), background .3s ease, color .3s ease;
}
.modal-close:hover,.modal-close:focus-visible{transform:rotate(90deg);background:var(--gold);color:var(--charcoal);}
.modal .modal-cta{margin-top:12px;}
@media (max-width:560px){.modal{padding:34px 24px;}}


/* ============================================================
   SCROLL ANIMATIONS (driven by the engine at the end of main.js)
============================================================ */
.anim{
  opacity:0;
  will-change:opacity,transform;
  transition:
    opacity .9s var(--ease) var(--d,0s),
    transform 1.05s var(--ease) var(--d,0s),
    filter .9s var(--ease) var(--d,0s),
    clip-path 1.15s var(--ease) var(--d,0s);
}
.anim[data-anim="up"]{transform:translate3d(0,46px,0);}
.anim[data-anim="fade-right"]{transform:translate3d(-30px,0,0);}
.anim[data-anim="left"]{transform:translate3d(-70px,0,0);}
.anim[data-anim="right"]{transform:translate3d(70px,0,0);}
.anim[data-anim="zoom"]{transform:scale(.9);}
.anim[data-anim="pop"]{transform:scale(.7);}
.anim[data-anim="rise"]{transform:translate3d(0,64px,0) scale(.95);filter:blur(6px);}
.anim[data-anim="tilt"]{transform:perspective(900px) rotateX(16deg) translate3d(0,54px,0);transform-origin:50% 100%;}
.anim[data-anim="img"]{opacity:1;clip-path:inset(0 0 100% 0);transform:scale(1.14);}
.anim[data-anim="split"]{opacity:1;}
.anim.anim-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);}
.anim.anim-instant,.anim.anim-instant *{transition:none !important;}

/* word-by-word heading reveal */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .14em;margin:-.08em 0 -.14em;}
.wd-i{
  display:inline-block;
  transform:translate3d(0,108%,0) rotate(3deg);transform-origin:0 100%;
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--wi,0) * 55ms + var(--d,0s));
}
.anim-in .wd-i{transform:none;}
.anim-instant .wd-i{transition:none;}

@media (max-width:760px){
  .anim[data-anim="left"]{transform:translate3d(-30px,0,0);}
  .anim[data-anim="right"]{transform:translate3d(30px,0,0);}
  .anim[data-anim="up"]{transform:translate3d(0,34px,0);}
}

/* ---------- header hides on scroll down, returns on scroll up ---------- */
.nav{transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), transform .55s var(--ease);}
.nav.nav-hide{transform:translateY(-115%);}

/* ---------- back-to-top with progress ring ---------- */
.to-top{
  position:fixed;right:26px;bottom:98px;z-index:149;
  width:48px;height:48px;padding:0;border:none;border-radius:50%;
  background:var(--ivory);color:var(--charcoal);
  box-shadow:0 14px 30px -12px rgba(37,35,31,.45);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;
  transition:opacity .4s ease, transform .5s var(--ease), background .3s ease, color .3s ease;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--charcoal);color:var(--gold);transform:translateY(-4px);}
.to-top .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.to-top .ring circle{fill:none;stroke-width:1.6;}
.to-top .ring-bg{stroke:rgba(199,168,107,.28);}
.to-top .ring-fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .15s linear;}
.to-top .arr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;position:relative;}
@media (max-width:620px){.to-top{right:20px;bottom:90px;width:44px;height:44px;}}

/* ---------- page transition wipe ---------- */
.page-wipe{
  position:fixed;inset:0;z-index:9990;pointer-events:none;
  background:var(--charcoal);
  transform:translateY(100%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.page-wipe::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.page-wipe::after{
  content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L92 88 L8 88 Z' fill='none' stroke='%23C7A86B' stroke-width='2'/%3E%3Cpath d='M50 36 L72 80 L28 80 Z' fill='none' stroke='%23C7A86B' stroke-width='1.2' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transition:opacity .4s ease .15s;
}
.page-wipe.in{transform:none;pointer-events:auto;}
.page-wipe.in::after{opacity:1;}
.page-wipe.leave{transform:translateY(-100%);}
.page-wipe.no-tr{transition:none;}

/* ---------- 3D tilt + glare on cards ---------- */
.tilt{position:relative;transform-style:flat;}
.tilt .glare{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%), rgba(199,168,107,.20), transparent 60%);
  transition:opacity .4s ease;
}
.tilt:hover .glare{opacity:1;}
.tilt:hover{box-shadow:0 28px 50px -28px rgba(37,35,31,.35), 0 0 0 1px rgba(199,168,107,.4);}

/* ---------- small hover polish ---------- */
.blog-card-media{overflow:hidden;}
.blog-card-media svg,.blog-card-media img{transition:transform .8s var(--ease);}
.blog-card:hover .blog-card-media svg,.blog-card:hover .blog-card-media img{transform:scale(1.12) rotate(-2deg);}
.footer-col a,.footer-legal button{transition:color .3s ease, transform .3s var(--ease);}
.footer-col a:hover{transform:translateX(5px);color:var(--gold);}
.section-head .eyebrow{position:relative;}


/* ============================================================
   V2 ADDITIONS
   About square image · process icons · client results ticker ·
   Industries page · service pages · enquiry popup · Google reviews
============================================================ */
[hidden]{display:none !important;}

/* ---------- ABOUT: square image slot, sits opposite the text ---------- */
.about .container{align-items:center;}
.about-visual{position:relative;top:auto;}
.about-visual-frame{aspect-ratio:1 / 1;width:100%;padding:0;}
.about-visual-frame img{width:52%;height:auto;filter:drop-shadow(0 10px 30px rgba(214,170,60,.18));}
.about-visual-frame img.about-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media (max-width:900px){
  .about-visual-frame{max-width:340px;}
}

/* ---------- PROCESS: icon inside each card ---------- */
.process-top{display:flex;align-items:center;justify-content:space-between;}
.process-ico{
  width:60px;height:60px;border-radius:50%;background:var(--sand);
  display:flex;align-items:center;justify-content:center;
}
.process-ico svg,.ico svg{width:26px;height:26px;stroke:var(--antique);fill:none;}
.process-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){.process-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.process-grid.cols-4{grid-template-columns:1fr;}}
.process-item .process-top + h3{margin-top:26px;}

/* ---------- SHARED BITS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chips li{
  font-size:12.5px;font-weight:600;padding:6px 13px;color:var(--charcoal);
  border:1px solid var(--line-gold);border-radius:var(--radius-pill);
}
.sample-pill{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border:1px dashed var(--antique);color:var(--antique);border-radius:var(--radius-pill);
  line-height:1.4;
}
.logo-tile{
  width:88px;height:88px;flex:none;background:var(--ivory);
  display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;
}
.logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.logo-mono{font-family:var(--serif);font-weight:600;font-size:34px;color:var(--antique);letter-spacing:.02em;line-height:1;}
.btn-light{background:transparent;color:var(--ivory);border:1px solid rgba(244,241,234,.7);}
.btn-light:hover{background:var(--ivory);color:var(--charcoal);}
.btn:disabled{opacity:.6;pointer-events:none;}
.empty-note{color:var(--ink-soft);font-size:15px;}
button.btn-ghost{background:none;border-top:0;border-left:0;border-right:0;font-family:var(--sans);cursor:pointer;text-align:left;}
.ico svg{stroke:var(--antique);}

/* ---------- HOME: rotating client results ---------- */
.results-showcase{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center;}
.results-copy h2{font-size:clamp(32px,4vw,48px);line-height:1.15;margin-top:18px;color:var(--ivory);}
.results-copy p{margin-top:20px;font-size:17px;color:rgba(244,241,234,.62);max-width:430px;}
.results-copy .teaser-more{margin-top:36px;}

.tick{position:relative;min-width:0;}
.tick-bar{height:2px;background:rgba(244,241,234,.14);margin-bottom:18px;overflow:hidden;}
.tick-bar i{display:block;height:100%;width:0;background:var(--gold);}
.tick-stage{position:relative;height:308px;overflow:hidden;}
.tick-card{
  position:absolute;inset:0;width:100%;
  display:flex;align-items:center;gap:30px;text-align:left;
  padding:34px;color:var(--ivory);font:inherit;cursor:pointer;
  background:rgba(244,241,234,.05);border:1px solid rgba(244,241,234,.18);
  transform:translateY(106%);opacity:0;
  transition:transform .85s var(--ease), opacity .55s ease, border-color .3s ease, background .3s ease;
}
.tick-card.is-active{transform:none;opacity:1;}
.tick-card.is-prev{transform:translateY(-106%);opacity:0;}
.tick-card.no-tr{transition:none;}
.tick-card:hover{border-color:var(--gold);background:rgba(244,241,234,.08);}
.tick-card:focus-visible{outline-offset:-4px;}
.tick-card .logo-tile{width:112px;height:112px;}
.tick-card .logo-mono{font-size:42px;}
.tick-body{display:flex;flex-direction:column;min-width:0;flex:1;}
.tick-cat{font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.04em;}
.tick-name{font-family:var(--serif);font-size:clamp(26px,2.6vw,32px);font-weight:600;line-height:1.15;margin-top:6px;}
.tick-sum{margin-top:12px;font-size:14.5px;line-height:1.65;color:rgba(244,241,234,.62);}
.tick-foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.tick-metric{font-size:13px;color:rgba(244,241,234,.62);}
.tick-metric b{font-family:var(--serif);font-size:24px;color:var(--ivory);font-weight:600;margin-right:6px;}
.tick-cta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--gold);}
.tick-cta svg{width:14px;height:14px;transition:transform .35s var(--ease);}
.tick-card:hover .tick-cta svg{transform:translateX(4px);}
.tick-card .sample-pill{position:absolute;top:14px;right:14px;color:var(--gold);border-color:rgba(199,168,107,.7);}
.tick-dots{display:flex;gap:8px;margin-top:18px;}
.tick-dot{width:26px;height:3px;border:0;padding:0;background:rgba(244,241,234,.2);transition:background .3s ease, width .3s ease;}
.tick-dot.active{background:var(--gold);width:40px;}
.tick.is-static .tick-stage{height:auto;display:grid;gap:16px;overflow:visible;}
.tick.is-static .tick-card{position:relative;transform:none;opacity:1;}
.tick.is-static .tick-bar,.tick.is-static .tick-dots{display:none;}
@media (max-width:980px){
  .results-showcase{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:560px){
  .tick-stage{height:400px;}
  .tick-card{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 22px;justify-content:center;}
  .tick-card .logo-tile{width:84px;height:84px;}
}

/* ---------- RESULTS PAGE: client grid ---------- */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.client-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:34px 28px 28px;color:var(--ivory);font:inherit;cursor:pointer;
  background:rgba(244,241,234,.04);border:1px solid rgba(244,241,234,.16);
  transition:border-color .3s ease, background .3s ease, transform .5s var(--ease);
}
.client-card:hover{border-color:var(--gold);background:rgba(244,241,234,.07);transform:translateY(-4px);}
.client-card .sample-pill{position:absolute;top:14px;right:14px;color:var(--gold);border-color:rgba(199,168,107,.7);}
.cc-cat{margin-top:22px;font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.04em;}
.cc-name{font-family:var(--serif);font-size:26px;font-weight:600;margin-top:6px;line-height:1.15;}
.cc-sum{margin-top:12px;font-size:14.5px;line-height:1.7;color:rgba(244,241,234,.62);flex:1;}
.cc-cta{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--gold);}
.cc-cta svg{width:14px;height:14px;transition:transform .35s var(--ease);}
.client-card:hover .cc-cta svg{transform:translateX(4px);}
@media (max-width:980px){.client-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.client-grid{grid-template-columns:1fr;}}

/* ---------- CLIENT DETAIL MODAL ---------- */
.modal.cm{max-width:720px;}
.cm-head{display:flex;align-items:center;gap:22px;margin-bottom:6px;}
.cm-head h3{margin-bottom:0;}
.cm-head .logo-tile{width:84px;height:84px;background:var(--sand);}
.cm-cat{font-size:12.5px;font-weight:700;color:var(--antique);letter-spacing:.04em;}
.cm-sample{margin-top:22px;padding:12px 14px;background:var(--sand);border-left:2px solid var(--gold);font-size:13px;color:var(--ink-soft);line-height:1.6;}
.cm-sample code{font-size:12px;}
.cm-tags{margin:20px 0 4px;}
.cm-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0 8px;}
.cm-metric{background:var(--ivory);padding:18px 16px;}
.cm-metric b{display:block;font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.1;color:var(--charcoal);}
.cm-metric span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-soft);line-height:1.45;}
.cm-body h4{font-size:19px;margin:22px 0 6px;}
.cm-body p{margin-bottom:0;}
.cm-cta{margin-top:28px;}
@media (max-width:560px){
  .cm-results{grid-template-columns:1fr;}
  .cm-head{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ---------- ENQUIRY MODAL ---------- */
.modal.enq{max-width:540px;}
.enq-lead{font-size:15px !important;margin-bottom:24px !important;}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field select{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:10px 22px 10px 2px;font-family:var(--sans);font-size:15.5px;color:var(--charcoal);
  appearance:none;-webkit-appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D8358' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:16px;
}
.field select:focus{border-color:var(--gold);outline:none;}
.field select option{color:#25231F;background:#FFFFFF;}  /* native dropdown popup: always dark-on-white, regardless of theme, so options stay readable */
.field label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;}
.field-err{display:block;font-size:12.5px;color:#9c3b2b;margin-top:6px;}
.field.has-err input{border-color:#9c3b2b;}
.enq-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px;}
.enq-wa{font-size:13.5px;font-weight:600;color:var(--antique);border-bottom:1px solid var(--line-gold);padding-bottom:1px;}
.enq-wa:hover{color:var(--charcoal);}
.enq-done{text-align:center;padding:14px 0 4px;}
.enq-done h4{font-size:26px;}
.enq-done p{margin:10px auto 24px;max-width:340px;}
.enq-tick{width:60px;height:60px;border-radius:50%;background:var(--sand);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;}
.enq-tick svg{width:28px;height:28px;color:var(--antique);}
@media (max-width:560px){.enq-row{grid-template-columns:1fr;gap:0;}}

/* ---------- INDUSTRIES PAGE ---------- */
.ind-nav{
  position:sticky;top:0;z-index:150;
  background:rgba(244,241,234,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:top .4s var(--ease);
}
.nav:not(.nav-hide) ~ .ind-nav{top:70px;}
.ind-nav-scroll{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none;}
.ind-nav-scroll::-webkit-scrollbar{display:none;}
.ind-nav a{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:var(--radius-pill);
  color:var(--ink-soft);border:1px solid transparent;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.ind-nav a svg{width:16px;height:16px;stroke:var(--antique);fill:none;transition:stroke .3s ease;}
.ind-nav a:hover{color:var(--charcoal);border-color:var(--line-gold);}
.ind-nav a.active{background:var(--charcoal);color:var(--ivory);}
.ind-nav a.active svg{stroke:var(--gold);}

.ind-intro{padding-top:96px;padding-bottom:88px;}
.ind{padding:104px 0;border-top:1px solid var(--line);scroll-margin-top:60px;position:relative;}
.ind.alt{background:var(--sand);}
.ind-grid{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start;}
.ind-side{position:sticky;top:150px;}
.ind-ico{width:74px;height:74px;border-radius:50%;background:var(--charcoal);display:flex;align-items:center;justify-content:center;}
.ind-ico svg{width:32px;height:32px;stroke:var(--gold);fill:none;}
.ind-side h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin-top:24px;}
.ind-sum{margin-top:14px;color:var(--ink-soft);font-size:16px;line-height:1.75;}
.ind-meta{margin-top:28px;}
.ind-meta h5{margin:0 0 10px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--charcoal);}
.ind-side .btn{margin-top:34px;}
.ind-h{font-size:26px;margin:0 0 22px;}
.ind-do{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:60px;}
.ind-do > div{background:var(--ivory);padding:28px 26px;}
.ind-do svg{width:24px;height:24px;stroke:var(--antique);fill:none;}
.ind-do h4{font-size:19px;margin-top:16px;}
.ind-do p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);line-height:1.7;}
.wf{list-style:none;margin:0;padding:0;position:relative;}
.wf li:not(:last-child)::after{content:"";position:absolute;left:24px;top:52px;bottom:2px;width:1px;background:var(--line-gold);}
.wf li{display:grid;grid-template-columns:50px 1fr;gap:24px;padding-bottom:30px;position:relative;}
.wf li:last-child{padding-bottom:0;}
.wf-node{
  width:50px;height:50px;border-radius:50%;background:var(--ivory);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.wf-node svg{width:21px;height:21px;stroke:var(--antique);fill:none;}
.wf-step{font-size:12.5px;font-weight:700;color:var(--antique);}
.wf h4{font-size:20px;margin:2px 0 6px;}
.wf p{font-size:14.5px;color:var(--ink-soft);line-height:1.75;max-width:560px;}
.ind-note{margin-top:38px;padding:16px 18px;background:var(--sand);border-left:2px solid var(--gold);font-size:14px;line-height:1.7;color:var(--ink-soft);}
.ind.alt .ind-note{background:var(--ivory);}
@media (max-width:1000px){
  .ind-grid{grid-template-columns:1fr;gap:44px;}
  .ind-side{position:static;}
}
@media (max-width:620px){
  .ind{padding:72px 0;}
  .ind-do{grid-template-columns:1fr;}
  .wf li{grid-template-columns:42px 1fr;gap:18px;}
  .wf-node{width:42px;height:42px;}
  .wf li:not(:last-child)::after{left:20px;top:44px;}
}

/* ---------- SERVICE PAGES ---------- */
.svc-hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.page-hero .svc-hero-actions{max-width:none;}
.svc-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;}
.svc-intro h2{font-size:clamp(30px,3.6vw,44px);line-height:1.15;margin-top:18px;}
.svc-intro .about-body{margin-top:22px;}
.svc-intro .chips{margin-top:26px;}
.svc-intro .fit-label{margin-top:30px;font-size:13px;font-weight:700;}
.svc-visual{
  position:relative;border:1px solid var(--line-gold);padding:14px;background:var(--ivory);
  box-shadow:0 40px 70px -34px rgba(37,35,31,.4), inset 0 0 0 1px rgba(199,168,107,.12);
  transition:box-shadow .6s var(--ease);
  overflow:hidden;
}
.svc-visual::before{                /* fine inner gold frame, matches flip-card / brand language */
  content:"";position:absolute;inset:22px;z-index:2;pointer-events:none;
  border:1px solid rgba(199,168,107,.3);
}
.svc-visual::after{                 /* corner ornament, echoes flip-back triangle */
  content:"";position:absolute;top:-24px;right:-18px;width:120px;height:120px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L92 88 L8 88 Z' fill='none' stroke='%23C7A86B' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.14;
}
.svc-visual:hover{box-shadow:0 54px 90px -32px rgba(37,35,31,.5), inset 0 0 0 1px rgba(199,168,107,.25);}
.svc-visual img{
  width:100%;height:auto;display:block;position:relative;
  filter:saturate(1.1) contrast(1.05);
  transition:transform .9s var(--ease), filter .6s ease;
}
.svc-visual:hover img{transform:scale(1.035);filter:saturate(1.2) contrast(1.08);}
.svc-block-title{font-size:clamp(26px,3vw,36px);margin:96px 0 34px;max-width:620px;line-height:1.2;}
.value-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.value-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.value-grid.cols-3{grid-template-columns:1fr;}}
.value-card .ico{display:block;margin-bottom:18px;}
.value-card .ico + h4{margin-top:0;}
.svc-section-sand{background:var(--sand);}
@media (max-width:900px){
  .svc-intro{grid-template-columns:1fr;gap:44px;}
  .svc-block-title{margin-top:72px;}
}

/* case studies (light) */
.case-list{display:grid;gap:28px;}
.case-card{
  display:grid;grid-template-columns:280px 1fr;gap:44px;
  background:var(--ivory);border:1px solid var(--line);padding:38px;
}
.case-who .logo-tile{background:var(--sand);width:96px;height:96px;margin-bottom:20px;}
.case-who h3{font-size:26px;line-height:1.15;margin:6px 0 12px;}
.case-main > p{font-size:16px;line-height:1.8;color:var(--ink-soft);}
.case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:24px 0;}
.case-metrics .cm-metric{background:var(--sand);}
.case-empty{padding:44px;border:1px dashed var(--line-gold);background:var(--ivory);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.case-empty p{font-size:17px;color:var(--ink-soft);max-width:520px;}
@media (max-width:900px){
  .case-card{grid-template-columns:1fr;gap:26px;padding:28px 24px;}
  .case-metrics{grid-template-columns:1fr;}
}

/* Google reviews */
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px;}
.rev-score{display:flex;align-items:center;gap:16px;}
.rev-g svg{width:34px;height:34px;display:block;}
.rev-num{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1;display:flex;align-items:center;gap:12px;}
.rev-count{margin-top:6px;font-size:13.5px;color:var(--ink-soft);}
.rev-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.rev-links .btn{padding:12px 24px;font-size:13.5px;}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.rev-card{
  margin:0;padding:28px 26px;background:var(--ivory);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;position:relative;
}
.rev-card.is-skel{min-height:200px;background:linear-gradient(100deg,var(--sand) 30%,var(--ivory) 50%,var(--sand) 70%);background-size:220% 100%;animation:revSkel 1.4s ease infinite;border-color:transparent;}
@keyframes revSkel{from{background-position:120% 0;}to{background-position:-120% 0;}}
.rev-top{display:flex;align-items:center;gap:12px;}
.rev-av{width:42px;height:42px;border-radius:50%;background:var(--sand);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--antique);flex:none;}
.rev-av img{width:100%;height:100%;object-fit:cover;}
.rev-name{font-weight:700;font-size:14.5px;line-height:1.3;}
.rev-name a:hover{color:var(--antique);}
.rev-when{font-size:12.5px;color:var(--ink-faint);}
.rev-top .rev-g{margin-left:auto;}
.rev-top .rev-g svg{width:20px;height:20px;}
.stars{display:inline-flex;gap:2px;}
.stars span{display:block;}
.stars svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round;display:block;}
.stars .on svg{fill:var(--gold);}
.rev-num .stars svg{width:20px;height:20px;}
.rev-card blockquote{margin:0;font-size:15px;line-height:1.75;color:var(--ink-soft);}
.rev-card .sample-pill{align-self:flex-start;margin-top:auto;}
.rev-attr{margin-top:22px;font-size:12.5px;color:var(--ink-faint);}
@media (max-width:980px){.rev-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.rev-grid{grid-template-columns:1fr;}}

/* book band */
.book-band{
  background:var(--charcoal);color:var(--ivory);padding:56px;border-top:2px solid var(--gold);
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.book-band h2{color:var(--ivory);font-size:clamp(26px,3.2vw,38px);line-height:1.15;max-width:520px;}
.book-band p{margin-top:12px;color:rgba(244,241,234,.66);font-size:16px;max-width:480px;}
.book-band .btn{flex:none;}
@media (max-width:620px){.book-band{padding:38px 26px;}}

/* services overview: cards are now links */
a.flip-more-btn{display:inline-flex;}

/* home: industries teaser */
.ind-teaser .section-head{max-width:640px;}
.ind-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.ind-tile{
  background:var(--ivory);padding:30px 24px;display:flex;flex-direction:column;gap:16px;
  transition:background .35s ease;
}
.ind-tile:hover{background:var(--sand);}
.ind-tile svg{width:28px;height:28px;stroke:var(--antique);fill:none;}
.ind-tile span{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2;}
@media (max-width:900px){.ind-tiles{grid-template-columns:repeat(2,1fr);}}
.btn-ghost svg{width:14px;height:14px;flex:none;transition:transform .35s var(--ease);}
.btn-ghost:hover svg{transform:translateX(4px);}
button.btn-ghost{white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--charcoal);padding:0 0 2px;border-bottom:1px solid var(--line-gold);}
.process-ico svg{width:28px;height:28px;}


/* ============================================================
   V3: DARK / LIGHT THEME + SPACE BACKGROUND
   How it works: dark mode re-defines the colour tokens (--ivory is the page
   surface, --charcoal is the text colour). Areas that are ALREADY dark in the
   light design (hero banners, results, footer, book band, flip cards...) are
   "pinned" back to their original tokens so they look the same in both themes.
============================================================ */
:root{
  --sand-a:rgba(231,224,213,.72);
  --nav-bg:rgba(244,241,234,.88);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ivory:#25231F;          /* brand deep charcoal = the dark page colour */
  --charcoal:#F0EADC;
  --sand:#2D2B26;
  --taupe:#37342E;
  --antique:#C9AC72;
  --gold:#D6B673;
  --ink-soft:rgba(238,232,218,.72);
  --ink-faint:rgba(238,232,218,.48);
  --line:rgba(238,232,218,.14);
  --line-gold:rgba(214,182,115,.42);
  --sand-a:rgba(255,255,255,.028);
  --nav-bg:rgba(37,35,31,.86);
}
html{background:var(--ivory);}
body{background:transparent;}

/* --- areas that stay dark in BOTH themes: restore original tokens --- */
html[data-theme="dark"] :is(.page-hero,.results,footer,.book-band,.strip,.article-cta,.flip-front,.flip-back,.page-wipe,.ind-side .ind-ico){
  --ivory:#F4F1EA;--charcoal:#25231F;--sand:#E7E0D5;--taupe:#D8D0C2;
  --antique:#9D8358;--gold:#C7A86B;
  --ink-soft:rgba(37,35,31,.66);--ink-faint:rgba(37,35,31,.42);
  --line:rgba(37,35,31,.14);--line-gold:rgba(199,168,107,.45);
}
html[data-theme="dark"] .results{background:transparent;}
html[data-theme="dark"] footer{background:rgba(0,0,0,.24);border-top:1px solid var(--line);}
html[data-theme="dark"] .book-band{background:rgba(0,0,0,.26);border-top-color:var(--gold);}
html[data-theme="dark"] .ind-ico{background:rgba(255,255,255,.05);border:1px solid var(--line-gold);}
html[data-theme="dark"] .ind-ico svg{stroke:#C7A86B;}
html[data-theme="dark"] .hero-plaque::after,
html[data-theme="dark"] .curtain::after{background:#25231F;}

/* --- surfaces that were hard-coded light --- */
html[data-theme="dark"] .nav.is-scrolled{background:var(--nav-bg);}
html[data-theme="dark"] .ind-nav{background:rgba(37,35,31,.9);}
html[data-theme="dark"] .nav-links{box-shadow:-10px 0 40px rgba(0,0,0,.4);}
html[data-theme="dark"] .to-top:hover{background:var(--gold);color:#14120F;}
html[data-theme="dark"] .modal-overlay{background:rgba(4,3,3,.72);}
html[data-theme="dark"] .hero-plaque,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .process-item{box-shadow:0 30px 60px -34px rgba(0,0,0,.7);}
/* nav links over a dark banner: in dark theme they are already light */
html[data-theme="dark"] body.nav-on-dark .nav:not(.is-scrolled) .brand-word,
html[data-theme="dark"] body.nav-on-dark .nav:not(.is-scrolled) .nav-links a,
html[data-theme="dark"] body.nav-on-dark .nav:not(.is-scrolled) .btn-outline{color:var(--charcoal);}
html[data-theme="dark"] body.nav-on-dark .nav:not(.is-scrolled) .btn-outline{border-color:var(--charcoal);}
html[data-theme="dark"] body.nav-on-dark .nav:not(.is-scrolled) .menu-toggle span{background:var(--charcoal);}
html[data-theme="dark"] .text-shimmer{background:linear-gradient(100deg,#EEE8DA 25%,#D6B673 45%,#C9AC72 52%,#EEE8DA 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;}
html[data-theme="dark"] ::selection{background:rgba(214,182,115,.35);color:#fff;}

/* sand bands become see-through so the sky shows */
.ind.alt,.svc-section-sand,.services,.contact,[style*="background:var(--sand)"]{background:var(--sand-a) !important;}

/* old drifting orbs: quieter over the night sky */
html[data-theme="dark"] .bg-orb{opacity:.5;}

/* --- theme toggle button --- */
.theme-toggle{
  width:42px;height:42px;flex:none;border-radius:50%;
  border:1px solid var(--line-gold);background:transparent;color:var(--charcoal);
  display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0;
  transition:border-color .3s ease, background .3s ease, transform .4s var(--ease);
}
.theme-toggle:hover{border-color:var(--gold);background:rgba(199,168,107,.12);transform:rotate(-12deg);}
.theme-toggle svg{
  position:absolute;width:19px;height:19px;fill:none;stroke:currentColor;
  transition:transform .65s var(--ease), opacity .4s ease;
}
/* light theme shows a moon (= "go dark"); dark theme shows a sun */
.theme-toggle .ico-sun{opacity:0;transform:rotate(-100deg) scale(.3);}
.theme-toggle .ico-moon{opacity:1;transform:none;}
html[data-theme="dark"] .theme-toggle .ico-sun{opacity:1;transform:none;}
html[data-theme="dark"] .theme-toggle .ico-moon{opacity:0;transform:rotate(100deg) scale(.3);}
body.nav-on-dark .nav:not(.is-scrolled) .theme-toggle{color:#F4F1EA;border-color:rgba(244,241,234,.5);}
.nav-cta{gap:14px;}
@media (max-width:920px){.theme-toggle{width:38px;height:38px;}}

/* --- circular reveal when switching theme (browsers with View Transitions) --- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:2;}

/* --- the sky --- */
#spaceCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;}

/* dark theme: cards are see-through so the sky glows behind them */
html[data-theme="dark"] :is(.stat-item,.quickfacts-item,.value-card,.process-item,.ind-do > div,.ind-tile,.blog-card,.svc-visual,.case-card,.rev-card,.cm-metric,.case-empty){background:rgba(255,255,255,.04);}
html[data-theme="dark"] .value-card:hover,html[data-theme="dark"] .ind-tile:hover{background:rgba(255,255,255,.075);}
html[data-theme="dark"] .modal{background:#2C2A25;}
html[data-theme="dark"] .modal .cm-metric{background:#35322C;}
/* the light logo card on the home hero: turn the light photo dark */

/* sky colour + nebulae (compositor-drawn; the canvas paints stars, galaxies, planets on top) */
#spaceBackdrop{
  position:fixed;inset:-8%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 38% at 14% 18%, rgba(199,168,107,.16), transparent 68%),
    radial-gradient(52% 44% at 88% 12%, rgba(157,131,88,.10), transparent 70%),
    radial-gradient(50% 46% at 50% 60%, rgba(199,168,107,.09), transparent 72%),
    radial-gradient(46% 40% at 84% 88%, rgba(199,168,107,.13), transparent 70%),
    radial-gradient(40% 36% at 8% 86%, rgba(157,131,88,.08), transparent 70%);
  animation:skyDrift 90s ease-in-out infinite alternate;
  will-change:transform;
}
html[data-theme="dark"] #spaceBackdrop{
  background:
    radial-gradient(46% 38% at 14% 18%, rgba(214,182,115,.11), transparent 68%),
    radial-gradient(52% 44% at 88% 10%, rgba(214,182,115,.055), transparent 70%),
    radial-gradient(52% 48% at 50% 58%, rgba(214,182,115,.045), transparent 72%),
    radial-gradient(46% 40% at 86% 90%, rgba(214,182,115,.08), transparent 70%),
    radial-gradient(40% 36% at 6% 88%, rgba(214,182,115,.045), transparent 70%),
    #25231F;
}
@keyframes skyDrift{from{transform:translate3d(-1.2%,-0.8%,0) scale(1);}to{transform:translate3d(1.2%,0.8%,0) scale(1.035);}}


/* dark theme: banners and bands are see-through so the sky flows behind the whole page (no flat boxes) */
html[data-theme="dark"] .strip{background:rgba(0,0,0,.22);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
html[data-theme="dark"] .page-hero{background:transparent;}
html[data-theme="dark"] .page-hero-bg{top:0;}
html[data-theme="dark"] .page-hero-bg img[src*="placeholders/"]{display:none;}
html[data-theme="dark"] .page-hero-overlay{top:0;background:linear-gradient(100deg,rgba(37,35,31,.55) 0%,rgba(37,35,31,.28) 55%,rgba(37,35,31,.08) 100%);}
html[data-theme="dark"] .about-visual-frame{background:rgba(255,255,255,.035);}
html[data-theme="dark"] .article-cta{background:rgba(0,0,0,.24);}
html[data-theme="dark"] .hero-plaque{background:rgba(37,35,31,.72);}
html[data-theme="dark"] .page-hero-bg:has(img[src*="placeholders/"]) + .page-hero-overlay{display:none;}


/* ============================================================
   V5: OPENING INTRO + PHOTO HERO
============================================================ */

/* ---- intro overlay (always dark: it is the brand moment, in both themes) ---- */
html.intro-off #preloader{display:none;}
#preloader{
  background:none;display:block;overflow:hidden;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader > .pl-tri{display:none;}                        /* old static triangle (replaced by intro.js) */
#preloader .pl-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 46% at 50% 46%, rgba(214,182,115,.10), transparent 70%),
    radial-gradient(ellipse at 50% 46%, #2B2924 0%, #201F1B 55%, #141311 100%);
  transition:opacity .9s ease .25s;
}
#preloader .pl-sky{position:absolute;inset:0;width:100%;height:100%;}
#preloader .pl-core{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform 1.1s cubic-bezier(.7,0,.2,1), opacity .8s ease .1s;
}
#preloader .pl-mark{position:relative;width:min(330px,68vw);aspect-ratio:655/700;}
#preloader .pl-logo{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(255,196,70,.22));
  animation:plLogoIn 1.1s cubic-bezier(.2,.7,.2,1) 1.3s forwards;
}
#preloader .pl-word{
  margin-top:26px;font-family:var(--serif);font-size:clamp(22px,3.4vw,30px);font-weight:600;letter-spacing:.06em;color:#F0EADC;
  opacity:0;transform:translateY(10px);animation:plUp .9s ease 1.85s forwards;
}
#preloader .pl-tag{
  margin-top:14px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:#D6B673;
  opacity:0;transform:translateY(10px);animation:plUp .9s ease 2.15s forwards;
}
#preloader .pl-line{
  margin-top:34px;width:min(260px,58vw);height:1px;background:rgba(240,234,220,.14);position:relative;
  opacity:0;animation:plUp .6s ease 1.8s forwards;
}
#preloader .pl-line i{
  position:absolute;left:0;top:-.5px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(214,182,115,0),#D6B673 60%,#FFF1CC);
  box-shadow:0 0 12px rgba(214,182,115,.8);
}
#preloader.pl-warp .pl-bg{opacity:0;}
#preloader.pl-warp .pl-core{transform:translate(-50%,-50%) scale(2.6);opacity:0;}
#preloader.pl-instant{transition:opacity .25s ease;}
@keyframes plDraw2{to{stroke-dashoffset:0;}}
@keyframes plFade{to{opacity:0;}}
@keyframes plLogoIn{from{opacity:0;transform:scale(.94);filter:blur(6px);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes plUp{to{opacity:1;transform:none;}}

/* the hero waits for the intro, then plays its entrance */
html.intro-on:not(.intro-done) .hero .anim{opacity:0 !important;transition:none !important;}
html.intro-on:not(.intro-done) .hero .split-line span{animation:none !important;transform:translateY(105%);}

/* ---- photo hero ---- */
.hero.has-photo{
  --charcoal:#F4F1EA;
  --ink-soft:rgba(244,241,234,.80);
  --ink-faint:rgba(244,241,234,.56);
  --line:rgba(244,241,234,.16);
  --antique:#CDB077;
  color:#F4F1EA;
  min-height:100vh;min-height:100svh;
  padding:128px 0 116px;
}
.hero.has-photo .container{grid-template-columns:1fr;}
.hero.has-photo .hero-copy{max-width:660px;}
.hero.has-photo h1{text-shadow:0 2px 30px rgba(0,0,0,.35);}

.hero-media{
  position:absolute;inset:0;z-index:0;overflow:hidden;background:#25231F;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
.hero-par{position:absolute;inset:-9% -3% -3%;will-change:transform;}
.hero-photo{
  position:absolute;inset:0;transform:scale(1.24);
  transition:transform 3.2s cubic-bezier(.16,.84,.3,1);
}
html:not(.intro-on) .hero-photo,html.intro-done .hero-photo{transform:scale(1);}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:54% 40%;display:block;
  animation:heroKB 38s ease-in-out infinite alternate;will-change:transform;
}
@keyframes heroKB{
  0%{transform:scale(1.04) translate3d(-2%,0,0);}
  100%{transform:scale(1.16) translate3d(2.4%,-1.8%,0);}
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(37,35,31,.84) 0%,rgba(37,35,31,.60) 36%,rgba(37,35,31,.24) 68%,rgba(37,35,31,.34) 100%),
    linear-gradient(180deg,rgba(37,35,31,.58) 0%,rgba(37,35,31,0) 24%,rgba(37,35,31,0) 66%,rgba(37,35,31,.55) 100%);
}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.hero-tri{position:absolute;z-index:1;pointer-events:none;fill:none;stroke:rgba(214,182,115,.55);stroke-width:1;animation:heroTri 9s ease-in-out infinite alternate;}
@keyframes heroTri{from{transform:translateY(0) rotate(0);}to{transform:translateY(-16px) rotate(6deg);}}
.hero.has-photo .scroll-cue{z-index:3;}
@media (max-width:700px){
  .hero-photo img{object-position:38% 40%;}
  .hero-shade{background:linear-gradient(180deg,rgba(37,35,31,.70) 0%,rgba(37,35,31,.5) 45%,rgba(37,35,31,.72) 100%);}
}
.hero.has-photo .hero-copy{margin:0;}
.hero.has-photo .container{width:100%;}


/* ---- V6: brighter, more premium photo hero (the sunset skyline photo) ---- */
.hero-media{background:#2a2723;}
.hero-photo img{
  object-position:60% 46%;
  filter:saturate(1.08) contrast(1.05) brightness(1.06);
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(24,22,19,.80) 0%,rgba(24,22,19,.58) 30%,rgba(24,22,19,.20) 58%,rgba(24,22,19,0) 78%),
    linear-gradient(180deg,rgba(24,22,19,.50) 0%,rgba(24,22,19,0) 20%,rgba(24,22,19,0) 70%,rgba(24,22,19,.38) 100%);
}
/* warm golden light spilling in from the right, plus a slow sheen, so the photo feels alive and rich */
.hero-glow{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(55% 70% at 82% 34%,rgba(255,196,96,.55),transparent 70%),
    radial-gradient(40% 50% at 96% 60%,rgba(255,168,72,.32),transparent 70%);
}
.hero-sheen{
  position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(100deg,transparent 0%,rgba(255,236,190,.34) 50%,transparent 100%);
  transform:skewX(-14deg);animation:heroSheen 11s ease-in-out 3.5s infinite;
}
@keyframes heroSheen{0%{left:-40%;opacity:0;}12%{opacity:1;}45%{left:112%;opacity:1;}46%,100%{left:112%;opacity:0;}}
.hero-grain{opacity:.08;}
.hero.has-photo h1{text-shadow:0 2px 26px rgba(0,0,0,.45);}
.hero.has-photo .hero-sub{text-shadow:0 1px 14px rgba(0,0,0,.4);}
@media (max-width:700px){
  .hero-photo img{object-position:72% 46%;}
  .hero-shade{background:linear-gradient(180deg,rgba(24,22,19,.62) 0%,rgba(24,22,19,.42) 40%,rgba(24,22,19,.66) 100%);}
}
/* show more of the scene: gentler zoom, laptop + skyline in frame */
.hero-par{inset:-5% -2% -2%;}
.hero-photo img{object-position:62% 48%;animation:heroKB2 40s ease-in-out infinite alternate;}
@keyframes heroKB2{
  0%{transform:scale(1.0) translate3d(-1.2%,0,0);}
  100%{transform:scale(1.07) translate3d(1.4%,-1%,0);}
}
.hero-sheen{background:linear-gradient(100deg,transparent 0%,rgba(255,236,190,.2) 50%,transparent 100%);}
@media (max-width:700px){.hero-photo img{object-position:70% 48%;}}


/* ---- V7: hero bottom fix ---- */
.hero.has-photo{padding-bottom:150px;}
.hero.has-photo .hero-meta-item{color:rgba(244,241,234,.86);text-shadow:0 1px 10px rgba(0,0,0,.55);}
.hero-media{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);}
html:not([data-theme="dark"]) .hero-media{-webkit-mask-image:none;mask-image:none;}
html:not([data-theme="dark"]) .hero-shade{
  background:
    linear-gradient(90deg,rgba(24,22,19,.80) 0%,rgba(24,22,19,.58) 30%,rgba(24,22,19,.20) 58%,rgba(24,22,19,0) 78%),
    linear-gradient(180deg,rgba(24,22,19,.50) 0%,rgba(24,22,19,0) 20%,rgba(24,22,19,0) 58%,rgba(37,35,31,.88) 100%);
}
@media (max-width:920px){.brand img{height:46px;}}

/* Blog posts written in the WP editor: keep same look as static article pages */
.article-prose h3{margin-top:34px;margin-bottom:12px;font-size:22px;color:var(--charcoal);}
.article-prose ol{margin:0 0 20px;padding-left:22px;}
.article-prose strong{color:var(--charcoal);font-weight:600;}
.article-prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.article-prose hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:36px 0;}
.article-prose img{max-width:100%;height:auto;border-radius:12px;margin:8px 0 24px;}
.article-prose figure{margin:0 0 24px;}

/* Bullets/numbers were removed by the global "ul{list-style:none}" reset — restore them inside articles */
.article-prose ul{list-style:disc;padding-left:26px;}
.article-prose ol{list-style:decimal;padding-left:26px;}
.article-prose li{margin-bottom:6px;padding-left:4px;}
.article-prose li::marker{color:var(--gold);}
.article-prose li p{margin:0;}
.article-prose li > br{display:none;}
.article-prose ul ul,.article-prose ol ol{margin:8px 0 0;}

/* Blog hero with a 3:4 portrait featured image */
.page-hero-split .page-hero-bg img{filter:blur(22px) brightness(.55);transform:scale(1.15);}
.page-hero-split .page-hero-overlay{background:linear-gradient(100deg,rgba(37,35,31,.9) 0%,rgba(37,35,31,.7) 55%,rgba(37,35,31,.5) 100%);}
.page-hero-split .container{
  max-width:1100px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:56px;align-items:center;
}
.page-hero-split .phs-figure{margin:0;justify-self:end;width:100%;max-width:340px;aspect-ratio:3 / 4;border-radius:18px;overflow:hidden;
  box-shadow:0 28px 60px rgba(0,0,0,.4);border:1px solid rgba(201,169,110,.35);}
.page-hero-split .phs-figure img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:820px){
  .page-hero-split .container{grid-template-columns:1fr;gap:32px;}
  .page-hero-split .phs-figure{justify-self:start;max-width:260px;}
}

/* Show the whole featured image (no cropping), a bit larger */
.page-hero-split .container{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);}
.page-hero-split .phs-figure{aspect-ratio:auto;max-width:440px;background:transparent;}
.page-hero-split .phs-figure img{height:auto;object-fit:contain;}
@media (max-width:820px){.page-hero-split .phs-figure{max-width:320px;}}

/* Mobile fix for the split blog hero (must stay last so it wins over the desktop rules above) */
@media (max-width:820px){
  .page-hero-split{padding:128px 0 48px;}
  .page-hero-split .container{grid-template-columns:1fr;gap:28px;max-width:100%;}
  .page-hero-split h1{font-size:clamp(28px,8vw,38px);line-height:1.15;}
  .page-hero-split p{font-size:15.5px;margin-top:14px;}
  .page-hero-split .page-hero-crumb{flex-wrap:wrap;margin-bottom:16px;}
  .page-hero-split .phs-figure{justify-self:center;width:100%;max-width:280px;border-radius:14px;}
  .page-hero-split .page-hero-bg,.page-hero-split .page-hero-overlay{top:0;}
}

/* Blog listing cards: image ratio about 15:16 (near square) so the cover title stays visible */
.blog-card-media:has(img){height:auto;aspect-ratio:15 / 16;background:var(--sand);}
.blog-card-media:has(img) img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Jetpack extras we don't want on posts ---------- */
.sharedaddy,.sd-sharing-enabled,.sd-block,.sd-like,.sd-rating,#jp-post-flair,.jp-relatedposts,.jetpack-likes-widget-wrapper,.wpl-likebox,#like-post-wrapper{display:none !important;}

/* Google reviews plugin widget: keep it inside the layout */
.bpd-reviews-plugin{max-width:1100px;margin:0 auto;overflow:hidden;}
.bpd-reviews-plugin img{max-width:100%;}

/* Rendering: cheaper blurred backdrop on blog hero (source is a small image, so a lighter blur is enough) */
.page-hero-split .page-hero-bg{overflow:hidden;contain:paint;}
.page-hero-split .page-hero-bg img{filter:blur(14px) brightness(.55);will-change:auto;}
/* Footer is far below the fold: let the browser skip its layout/paint until needed */
body > footer{content-visibility:auto;contain-intrinsic-size:auto 480px;}

/* form send failure message */
.enq-fail{color:#e0917f;font-size:13.5px;line-height:1.5;margin:14px 0 0;flex-basis:100%;}

/* Phone field with country-code picker (default India +91) */
.phone-row{display:flex;align-items:flex-end;gap:10px;}
.phone-row input{flex:1;min-width:0;}
.cc-wrap{position:relative;flex:0 0 auto;min-width:78px;border-bottom:1px solid var(--line);padding:10px 2px;font-family:var(--sans);font-size:15.5px;color:var(--charcoal);cursor:pointer;}
.cc-wrap:focus-within{border-color:var(--gold);}
.cc-label{display:block;white-space:nowrap;}
.cc-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;}

/* ============================================================
   Mobile: no sideways entrance animations (they showed content cut off at the screen edge while loading)
============================================================ */
html{overflow-x:clip;}
body{overflow-x:clip;}
@media (max-width:820px){
  .anim[data-anim="left"],
  .anim[data-anim="right"],
  .anim[data-anim="fade-right"]{transform:translate3d(0,28px,0);}
  .anim.anim-in{transform:none;}
}

/* ============================================================
   Google reviews widget in DARK mode: dark cards + light text so nothing turns black-on-black
============================================================ */
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget .ti-review-item > .ti-inner,
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget .ti-review-item .ti-inner{
  background:#2E2B26 !important;border:1px solid rgba(199,168,107,.35) !important;box-shadow:none !important;
}
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget,
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget *:not(.ti-star):not(svg):not(path){color:#F4F1EA !important;}
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget .ti-date,
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget .ti-profile-details .ti-date{color:rgba(244,241,234,.66) !important;}
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget .ti-read-more,
html[data-theme="dark"] .bpd-reviews-plugin .ti-widget .ti-read-more *{color:#C7A86B !important;}

/* ============================================================
   PERFORMANCE — phones / touch screens / small windows:
   turn off purely decorative endless animations and heavy blur so scrolling stays smooth.
============================================================ */
@media (max-width:820px), (hover:none){
  .bg-motion{display:none !important;}
  #spaceBackdrop{animation:none !important;will-change:auto !important;}
  .hero-plaque,.hero-plaque::after,.hero-tri,.hero-photo img,.hero-photo::after,
  .flip-front-media img,.flip-front-media video,.flip-front::after,
  .btn-glow,.btn-glow::after,.btn-primary::after{animation:none !important;}
  .anim{will-change:auto !important;}
  .anim[data-anim="rise"]{filter:none !important;transform:translate3d(0,36px,0) !important;}
  .anim.anim-in{transform:none !important;}
  .hero-dust{opacity:.6;}
}
/* once an element has appeared, drop its GPU layer */
.anim.anim-in{will-change:auto;}

/* FAQs shown inside a blog post: keep them the same width as the article text */
.article-prose + .faq-list,
.article-prose ~ h3.svc-block-title{max-width:760px;margin-left:auto;margin-right:auto;}
.article-prose ~ .faq-list{max-width:760px;margin:0 auto 8px;}


/* Footer social icons */
.footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.footer-social a{width:38px;height:38px;border:1px solid rgba(244,241,234,0.22);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease, background .3s ease, transform .3s ease;}
.footer-social a svg{width:16px;height:16px;stroke:rgba(244,241,234,0.78);transition:stroke .3s ease;}
.footer-social a:hover{border-color:var(--gold);background:rgba(199,168,107,0.12);transform:translateY(-2px);}
.footer-social a:hover svg{stroke:var(--gold);}
.social-row{flex-wrap:wrap;}


/* ============================================================
   Client results as small number boxes (per service)
============================================================ */
.svc-res{margin:22px 0 4px;}
.svc-res h5{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--antique);margin:0 0 10px;}
.res-boxes{display:flex;flex-wrap:wrap;gap:10px;}
.res-box{flex:1 1 118px;max-width:190px;min-width:104px;background:var(--sand);border:1px solid var(--line);padding:12px 14px;text-align:left;}
.res-box b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.1;color:var(--charcoal);}
.res-box span{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:var(--ink-soft);}
.cc-boxes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;width:100%;}
.cc-boxes .res-box{flex:1 1 84px;min-width:84px;max-width:none;background:rgba(244,241,234,.06);border-color:rgba(244,241,234,.18);padding:9px 11px;}
.cc-boxes .res-box b{font-size:19px;color:var(--ivory);}
.cc-boxes .res-box span{color:rgba(244,241,234,.6);font-size:11.5px;margin-top:3px;}
.case-boxes{margin:16px 0 22px;}
.case-boxes .svc-res:first-child{margin-top:0;}
.case-boxes .res-box{background:var(--sand);}
html[data-theme="dark"] .res-box{background:rgba(255,255,255,.05);}
html[data-theme="dark"] .modal .res-box{background:#35322C;}
html[data-theme="dark"] .res-box b{color:var(--ivory);}

/* ============================================================
   Industries: running strip of that industry's clients
============================================================ */
.ind-clients{margin-top:64px;margin-bottom:-104px;background:var(--charcoal);color:var(--ivory);padding:22px 0 24px;overflow:hidden;}
.ind-clients-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:16px;}
.ind-clients-track{display:flex;width:max-content;animation:marquee var(--dur,40s) linear infinite;}
.ind-clients:hover .ind-clients-track,.ind-clients:focus-within .ind-clients-track{animation-play-state:paused;}
.ind-clients-group{display:flex;flex:none;}
.ind-client{display:flex;align-items:center;gap:14px;background:none;border:0;padding:4px 0;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;}
.ind-client::after{content:"\25C1\25B7";font-family:var(--sans);color:var(--gold);font-size:10px;letter-spacing:6px;margin:0 44px 0 44px;}
.ind-client .logo-tile{width:48px;height:48px;padding:7px;}
.ind-client .logo-mono{font-size:18px;}
.ind-client-name{font-family:var(--serif);font-style:italic;font-size:19px;color:rgba(244,241,234,.78);transition:color .3s ease;}
.ind-client:hover .ind-client-name,.ind-client:focus-visible .ind-client-name{color:var(--gold);}
.ind-client:focus-visible{outline:1px solid var(--gold);outline-offset:4px;}
html[data-theme="dark"] .ind-clients{background:rgba(0,0,0,.22);border-top:1px solid var(--line);}
@media (max-width:620px){.ind-clients{margin-top:48px;margin-bottom:-72px;}}
@media (prefers-reduced-motion:reduce){
  .ind-clients-track{animation:none;width:auto;overflow-x:auto;}
  .ind-clients-group[aria-hidden="true"]{display:none;}
}