:root{
  --bg:#f7f3ea;            /* warmer cream */
  --panel:#ffffff;
  --panel2:#fdfcf9;
  --text:#1a1f2a;
  --muted:#6d7484;
  --line:#ebe6dc;
  --soft:#ffffff;
  --accent:#660199;   /* purple */
  --accent2:#3049b4;  /* blue */
  --max:1160px;
  --radius:20px;
  --shadow:0 10px 24px rgba(16,24,40,.06);
}

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 10000 !important;
  border-radius: 999px !important;
  padding: 12px 14px !important;
  background: #25d366 !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
}
.whatsapp-fab svg {
  width: 18px !important;
  height: 18px !important;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-size:16px; line-height:1.6;}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
/*.topbar{position:sticky;top:0;background:rgba(0,0,0,0.5);backdrop-filter: blur(12px);border-bottom:1px solid var(--line);z-index:50}*/
.topbar{position:sticky;top:0;background:transparent;backdrop-filter: blur(12px);border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.2px;color:#fff}
.brand-mark{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent), var(--accent2));display:inline-block;box-shadow:0 0 0 6px rgba(107,44,255,.12)}
.menu{display:flex;align-items:center;gap:18px;font-size:14px}
.menu a{padding:10px 10px;border-radius:999px;color:#fff}
.menu a.active{background:var(--soft)}
.actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;color:var(--text);transition:all .2s ease}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;font-weight:600;box-shadow:0 6px 18px rgba(48,73,180,.15)}
.btn.ghost{background:transparent}
.hero{position:relative; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-slider{position:absolute; inset:0; z-index:1;}
.hero-slider img{width:100%; height:100%; object-fit:cover;}
/*.hero-overlay{position:absolute; inset:0; z-index:2; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center;}*/
/* ===== HERO OVERLAY CENTER FIX — V86.1 ===== */
.hero-overlay{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;   /* ⭐ centers card horizontally */}
.hero-overlay .container{display:flex;justify-content:center;   /* ⭐ ensures hero-card stays centered */}
.hero-card{margin:0 auto;text-align:center;           /* ⭐ extra safety centering */}

/* Center the hero card inside the overlay without affecting global .container */
.hero-overlay > .container{display:flex;justify-content:center;align-items:center}
.hero-card{max-width:920px;width:100%;padding:28px;border-radius:18px;background:rgba(0,0,0,0.28);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.hero-content{color:#fff; text-align:center; max-width:600px;}
.hero-content h1{font-size:48px; line-height:1.2; margin:0 0 20px; font-weight:650;}
.hero-content p{font-size:18px; line-height:1.6; margin:0 0 30px;}
.hero-dots{ /* consolidated: progress-bar style, centered */
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:10px;
}

.hero-dot{ /* progress pill */
  width:34px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
  cursor:pointer;
}

.hero-dot > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 6500ms linear}
.hero-dot.active > span{width:100%}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#ffffff;box-shadow:var(--shadow)}
.kicker{color:rgba(107,44,255,.95)}
h1{font-size:36px;line-height:1.2;letter-spacing:-.015em;margin:12px 0 14px;font-weight:650}
@media (max-width: 520px){ h1{font-size:36px;line-height:1.2;letter-spacing:-.015em;margin:12px 0 14px;font-weight:650} }
.lead{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 18px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.pill{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:8px 10px;color:var(--muted);background:rgba(255,255,255,.03)}
.section{padding:72px 0;background:var(--bg)}
.section h2{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px;font-weight:600}
.section p{color:var(--muted);line-height:1.7;margin:0 0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr} }
.feature{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg, rgba(18,22,34,.9), rgba(15,18,23,.9));box-shadow:0 12px 36px rgba(0,0,0,.25)}
.feature h3{font-size:18px;line-height:1.25;margin:0 0 8px;font-weight:600}
.feature p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width: 900px){ .split{grid-template-columns:1fr} }
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .gallery{grid-template-columns:1fr} }
.thumb{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#f3f3f3;min-height:220px;cursor:pointer}
.thumb img{width:100%;height:220px;object-fit:cover}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 900px){ .projects{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .projects{grid-template-columns:1fr} }
.project{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#f3f3f3; cursor:pointer;}
.project img{width:100%;height:220px;object-fit:cover;}
.project h3{margin:14px; font-size:18px; margin-bottom:0;}
.project .btn{margin:0 14px 14px;}
blockquote{margin:0;padding:18px;border-left:3px solid var(--accent);background:var(--soft);border-radius:16px;color:var(--muted);line-height:1.7}
.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.footer{padding:34px 0 54px;border-top:1px solid var(--line);margin-top:30px;background:linear-gradient(180deg, rgba(18,22,34,.35), rgba(11,13,16,0))}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }
.small{font-size:13px;color:var(--muted);line-height:1.7}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}
.form{display:grid;gap:10px}
.field{display:grid;gap:6px}
label{font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(10,12,16,.65);color:var(--text);font:inherit}
textarea{min-height:120px;resize:vertical}
.note{font-size:12px;color:var(--muted)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:18px;z-index:80}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px, 96vw);max-height:86vh;border-radius:18px}
.lightbox .close{position:absolute;top:14px;right:14px;background:#fff;border:0;border-radius:999px;padding:10px 12px;cursor:pointer}
.lightbox .share{position:absolute;top:14px;right:70px;background:#fff;border:0;border-radius:999px;padding:10px 12px;cursor:pointer}
.lightbox .download{position:absolute;top:14px;right:126px;background:#fff;border:0;border-radius:999px;padding:10px 12px;cursor:pointer}

/* Alternating section background for depth */
.section.alt{background:#ffffff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/*.section.alt{background:#ffffff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}*/


/* Nav underline and subtle interactions */
.menu a{position:relative}
.menu a.active{background:transparent}
.menu a.active::after,.menu a:hover::after{content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; background:linear-gradient(90deg,var(--accent), var(--accent2)); border-radius:999px;}

/* Hero image overlay */
.hero-media{position:relative}
.hero-media::after{content:""; position:absolute; inset:0; background:radial-gradient(820px 460px at 35% 18%, rgba(102,1,153,.08), rgba(0,0,0,0) 62%), radial-gradient(760px 420px at 75% 10%, rgba(48,73,180,.06), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events:none;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;color:var(--text);transition:all .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(16,17,20,.08)}

/* Stats + process blocks */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media (max-width:900px){.stats{grid-template-columns:1fr}}
.stat{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.stat .num{font-size:22px;font-weight:700;letter-spacing:-.01em}
.stat .lbl{color:var(--muted);font-size:13px;line-height:1.4;margin-top:4px}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.process{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.process{grid-template-columns:1fr}}
.step{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.step .t{font-weight:650}
.step .d{color:var(--muted);font-size:13px;line-height:1.5;margin-top:6px}

.kicker{color:rgba(107,44,255,.95)}
.lead{color:var(--muted)}
.badge{color:var(--muted)}
.thumb{background:rgba(255,255,255,.04)}
blockquote{background:rgba(255,255,255,.03);border-left:3px solid var(--accent)}
.hero-media img{filter:contrast(1.05) saturate(1.05)}

.thumb > div{background:rgba(11,13,16,.55);backdrop-filter: blur(10px);}
.thumb{cursor:pointer}

/* Hero slider */
.hero-slider{position:relative; width:100%; height:100%}
.hero-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 900ms ease}
.hero-slider img.active{opacity:1}
.hero-media{min-height:440px}
.hero-media::after{content:""; position:absolute; inset:0; background:radial-gradient(820px 460px at 35% 18%, rgba(102,1,153,.08), rgba(0,0,0,0) 62%), radial-gradient(760px 420px at 75% 10%, rgba(48,73,180,.06), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events:none;}

/* Elite glass surfaces */
.glass{
  background:linear-gradient(180deg, rgba(35,44,64,.62), rgba(30,36,51,.34));
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 70px rgba(0,0,0,.33);
}
/* Luxury gradient hairline divider */
.lux-divider{height:1px;background:linear-gradient(90deg, transparent, rgba(107,44,255,.25), rgba(30,91,255,.25), transparent);margin:44px 0}
/* Subtle noise overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.55;
}

.hero-media{min-height:500px}
.hero-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1100ms ease, transform 8s ease;transform:scale(1.07)}
.hero-slider img.active{opacity:1;transform:scale(1.00)}
.hero-media{position:relative}
.hero-media::after{content:""; position:absolute; inset:0; background:radial-gradient(820px 460px at 35% 18%, rgba(102,1,153,.08), rgba(0,0,0,0) 62%), radial-gradient(760px 420px at 75% 10%, rgba(48,73,180,.06), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events:none;}

.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(250,250,250,.65));
  backdrop-filter: blur(10px);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.06);
}

/* Typography */
h1{font-size:36px;line-height:1.2;letter-spacing:-.015em;margin:12px 0 14px;font-weight:650}
h2{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px;font-weight:600}
h3{font-size:18px;line-height:1.25;margin:0 0 8px;font-weight:600}
p{margin:0 0 12px}
.small{font-size:14px;color:var(--muted);line-height:1.55}
.lead{font-size:18px;color:var(--muted);line-height:1.6}
@media (max-width:900px){
  h1{font-size:36px;line-height:1.2;letter-spacing:-.015em;margin:12px 0 14px;font-weight:650}
  h2{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px;font-weight:600}
  .lead{font-size:16px}
}

/* Links + nav */
a{color:inherit}
a:hover{color:var(--accent)}
.menu a{color:var(--text)}
.menu a.active{color:var(--text)}
.topbar .btn{background:var(--panel2)}

.card{background:var(--panel)}
.feature{background:var(--panel2)}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(251,250,247,.60));
  backdrop-filter: blur(10px);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(16,24,40,.06);
}
blockquote{color:var(--text); background:rgba(30,91,255,.04); border-left:3px solid var(--accent)}

.brand{text-decoration:none}
.brand .logo svg{flex:0 0 auto}

/* Navbar logo */
.brand-logo{height:64px;width:auto;display:block}
@media (max-width:900px){
  .brand-logo{height:64px;width:auto;display:block}
}
.brand{display:flex;align-items:center;gap:10px}

.menu a{
  font-weight:600;
  letter-spacing:.02em;
}

@media (max-width:900px){
  h1{font-size:36px;line-height:1.2;letter-spacing:-.015em;margin:12px 0 14px;font-weight:650}
  h2{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px;font-weight:600}
}

/* V14 polish – refined shadows & spacing */
:root{
  --bg:#f7f3ea;            /* warmer cream */
  --panel:#ffffff;
  --panel2:#fdfcf9;
  --text:#1a1f2a;
  --muted:#6d7484;
  --line:#ebe6dc;
  --soft:#ffffff;
  --accent:#660199;   /* purple */
  --accent2:#3049b4;  /* blue */
  --max:1160px;
  --radius:20px;
  --shadow:0 10px 24px rgba(16,24,40,.06);
}
.card{box-shadow:var(--shadow-soft)}
.card:hover{box-shadow:var(--shadow-hover)}

.btn{will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn.primary:hover{filter:saturate(1.04) brightness(1.02)}

.menu a{
  transition:color .2s ease, transform .2s ease;
}
.menu a:hover{
  color:var(--accent);
  transform:translateY(-1px);
}

.section.alt p, .section.alt li{color:var(--text)}
.section.alt .small, .section.alt .lead{color:var(--muted)}

.thumb{
  transition:transform .25s ease, box-shadow .25s ease;
}
.thumb:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
.thumb img{transition:transform .8s ease}
.thumb:hover img{transform:scale(1.03)}

ul.list{padding-left:18px}
ul.list li{margin:8px 0; line-height:1.55}

input, textarea, select{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  font-size:15px;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:rgba(48,73,180,.55);
  box-shadow:0 0 0 4px rgba(48,73,180,.12);
}

/* Architectural calm background rhythm */
.section{
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(247,243,234,0));
}
.section.alt{
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(253,252,249,0.6));
}

p{line-height:1.65}
.lead{color:#5f6677}

.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(48,73,180,.20);
}

.menu a{
  font-weight:600;
  opacity:.9;
}
.menu a:hover{
  opacity:1;
}

/* Calm reveal animation */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:all .7s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* V16: footer logo */
.footer-logo{height:44px;width:auto;display:block}

/* V16: feature icons */
.feature svg{color:rgba(102,1,153,.85)}

/* V17: make purple labels readable */
.kicker{
  font-weight:750;
  color:var(--accent);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.pill{font-weight:650}

/* V17: certifications not clickable */
.feature{cursor:default}
.feature:hover{transform:none; box-shadow:none}

@media (max-width:900px){.brand-logo{height:48px}}

/* V18 menu buttons visibility */
.topbar .btn{
  color:var(--text) !important;
  font-weight:600;
}

/* V19 – Navigation polish */
.topbar{
  position:sticky; top:0; z-index:60;
  background:transparent;
  border-bottom:none;
}
.topbar .container{
  padding-top:10px; padding-bottom:10px;
}
.nav-shell{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(235,230,220,.9);
  border-radius:999px;
  padding:10px 12px;
  box-shadow:0 16px 34px rgba(16,24,40,.06);
}
.brand{padding-left:6px}
.menu{
  display:flex; align-items:center; gap:6px;
}
.menu a{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  font-weight:650;
  letter-spacing:.02em;
  color:var(--text);
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.menu a:hover{
  background:rgba(48,73,180,.08);
  color:var(--text);
  transform:none;
}
.menu a.active{
  background:rgba(102,1,153,.08);
}
.menu a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:6px;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:999px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
  opacity:.85;
}
.menu a:hover::after, .menu a.active::after{
  transform:scaleX(1);
}
.top-actions{
  display:flex; align-items:center; gap:10px;
  padding-right:6px;
}
.top-actions .btn{
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:none;
}
.top-actions .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(16,24,40,.08);
}
@media (max-width:900px){
  .nav-shell{border-radius:18px; padding:10px}
  .menu{gap:4px}
  .menu a{padding:9px 10px;font-weight:650}
  .menu a::after{left:10px; right:10px}
  .brand-logo{height:46px}
}

/* V20: Icon-only header buttons with hover tooltip */
.icon-btn{
  position:relative;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--text);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease;
}
.icon-btn:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(16,24,40,.08)}
.icon-btn svg{width:20px;height:20px}


/* Tooltip */
.icon-btn .tip{
  position:absolute;
  bottom:-40px; left:50%;
  transform:translateX(-50%);
  background:rgba(20,24,36,.92);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  transform:translateX(-50%) translateY(-4px);
}
.icon-btn:hover .tip{opacity:1; transform:translateX(-50%) translateY(0)}
@media (max-width:900px){
  .icon-btn .tip{display:none}
}

/* V21: Header icon-only actions */
.actions{display:flex;align-items:center;gap:10px;margin-left:10px}
.actions .btn, .actions .btn.primary{display:none !important}

.icon-btn{
  position:relative;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--text);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(16,24,40,.08)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .tip{
  position:absolute;bottom:-40px;left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:rgba(20,24,36,.92);
  color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.icon-btn:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:900px){.icon-btn .tip{display:none}}

/* V21: Footer contact block */
.footer-contact{margin-top:10px}
.footer-contact .row{display:flex;gap:8px;align-items:flex-start;margin:6px 0;color:var(--muted)}
.footer-contact .row strong{color:var(--text)}
.footer-contact svg{width:16px;height:16px;flex:0 0 auto;color:rgba(48,73,180,.85);margin-top:2px}

/* V22: header right-side icon group */
.actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.icon-btn{
  position:relative;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--text);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease;
}
.icon-btn:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(16,24,40,.08)}
.icon-btn svg{width:20px;height:20px}

/* Tooltip */
.icon-btn .tip{
  position:absolute;
  bottom:-38px; left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:rgba(20,24,36,.92);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.icon-btn:hover .tip{opacity:1; transform:translateX(-50%) translateY(0)}
@media (max-width:900px){
  .icon-btn .tip{display:none}
  .icon-btn{width:42px;height:42px}
}

/* V22: footer social buttons */
.footer-social{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.footer-social a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:650;
}


/* V23: smaller header icons + right alignment */
.actions{
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.icon-btn{
  width:36px;
  height:36px;
}
.icon-btn svg{
  width:16px;
  height:16px;
}

/* Smoother overall motion */
*{scroll-behavior:smooth}
a, .card, .icon-btn, .btn, .thumb img{transition-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Refined nav shell + scroll state */
.nav-shell{
  box-shadow:0 14px 30px rgba(16,24,40,.055);
  border:1px solid rgba(235,230,220,.92);
}
body.scrolled .nav-shell{
  background:rgba(255,255,255,.68);
  box-shadow:0 12px 26px rgba(16,24,40,.05);
  transform:translateY(-1px);
}
body.scrolled .topbar .container{padding-top:8px;padding-bottom:8px}

/* Menu hover more “silk” */
.menu a{
  transition:background .22s ease, color .22s ease;
}
.menu a::after{
  opacity:.75;
  transition:transform .22s ease, opacity .22s ease;
}
.menu a:hover::after{opacity:1}

/* Header icon buttons – glassy, subtle */
.icon-btn{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(235,230,220,.95);
  box-shadow:0 10px 20px rgba(16,24,40,.045);
}
.icon-btn:hover{
  box-shadow:0 14px 28px rgba(16,24,40,.07);
}

/* Card polish */
.card{
  border:1px solid rgba(235,230,220,.95);
  box-shadow:0 10px 24px rgba(16,24,40,.055);
}
.card:hover{
  box-shadow:0 18px 44px rgba(16,24,40,.08);
}

/* Footers – lighter, more premium */
footer{
  border-top:1px solid rgba(235,230,220,.9);
}
.footer-social a{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(235,230,220,.95);
  box-shadow:none;
}
.footer-social a:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(16,24,40,.06);
}

/* Make footer social buttons slightly smaller + cleaner */
.footer-social a{
  padding:6px 9px;
  font-size:12.5px;
}
.footer-social a svg{width:15px;height:15px}

/* Reduce footer visual weight (if footer has large padding) */
/*footer .container{padding-top:26px;padding-bottom:26px}*/
footer .container{padding-top:26px;padding-bottom:26px; padding-left: 26px; padding-right: 26px;}

/* Subtle highlight for key labels (purple) without losing readability */
.kicker{
  color:rgba(102,1,153,.95);
  letter-spacing:.03em;
}

/* V25: header not pill-shaped */
.nav-shell{border-radius:14px !important; padding:12px 14px !important;}
@media (max-width:900px){.nav-shell{border-radius:12px !important;}}

/* V25: footer address block */
.footer-address{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.65;}
.footer-address a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(102,1,153,.25)}
.footer-address a:hover{color:var(--text);border-bottom-color:rgba(48,73,180,.45)}

/* Better readable width and rhythm */
.container{max-width:1180px}
.section{padding:86px 0}
@media (max-width:900px){.section{padding:64px 0}}

/* Hero breathing space */
.hero{padding:94px 0 48px}
.hero .lead{max-width:62ch}
@media (max-width:900px){.hero{padding:78px 0 36px}}

/* Editorial typography */
h1{
  font-size:38px;
  line-height:1.18;
  letter-spacing:-.018em;
  font-weight:650;
  max-width:18ch;
}
h2{
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:620;
  max-width:36ch;
}
p{max-width:72ch}
.lead{font-size:17px;line-height:1.75;color:var(--muted)}
.small{line-height:1.65}
@media (max-width:900px){
  h1{font-size:32px;max-width:22ch}
  h2{font-size:22px;max-width:40ch}
  .lead{font-size:16px}
}

/* Subtle section separators */
.section + .section{border-top:1px solid rgba(235,230,220,.7)}

/* Refined cards */
.card{
  border-radius:22px;
  box-shadow:0 10px 24px rgba(16,24,40,.055);
}
.card:hover{transform:translateY(-2px)}

/* Softer buttons */
.btn.primary{
  border-radius:999px;
  padding:12px 16px;
}
.btn{border-radius:999px}

/* Micro fade for reveal elements */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* Reduce visual noise: lighter lines and shadows */
:root{
  --line: rgba(235,230,220,.9);
}

/* Footer editorial spacing */
footer .container{padding-top:30px;padding-bottom:30px}
.footer-address{max-width:64ch}

/* Remove accidental decorative phone background (causing giant icon) */
footer::before,
.footer::before,
footer .bg-icon,
footer svg.big-icon{
  display:none !important;
  background:none !important;
}

/* Ensure footer layout is clean grid */
footer .container{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:start;
}

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

/* Clean typography */
footer h4, footer h5{
  font-weight:600;
}

.footer-address{
  margin-top:10px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

/* Remove any leftover Phone label row */
footer strong{
  display:none;
}

.footer{
  background:linear-gradient(180deg, rgba(20,22,28,.05), rgba(20,22,28,.015));
  border-top:1px solid rgba(235,230,220,.85);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr .65fr;
  gap:56px;
  align-items:start;
  padding:34px 0;
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr; gap:26px; padding:26px 0;}
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.footer-logo{width:60px;height:auto; opacity:.95;}
.footer-title{
  font-weight:700;
  letter-spacing:-.01em;
}
.footer-sub{
  margin-top:2px;
  font-size:12.5px;
  color:var(--muted);
}
.footer-head{
  font-weight:700;
  margin-bottom: 10px;
}
.footer-right a{
  display:block;
  text-decoration:none;
  color:var(--muted);
  padding:6px 0;
}
.footer-right a:hover{color:var(--text)}
.footer-copy{
  margin-top:18px;
  font-size:12.5px;
  color:var(--muted);
}
.footer-address a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(102,1,153,.22);
}
.footer-address a:hover{
  color:var(--text);
  border-bottom-color:rgba(48,73,180,.35);
}

.footer-ig-square{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
}
.footer-ig-square svg{width:16px;height:16px}
.footer-ig-square svg path, .footer-ig-square svg circle{fill:#fff}
.footer-ig-square img{width:100%;height:100%;object-fit:cover}



/* V35: FIX hero slider gap (ensure images cover full hero) */
.hero{background:#0f1115;} /* fallback if images not loaded */
.hero-slider{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}
.hero-slider img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}


/* V36: Premium hero slider (fade + subtle ken burns) */
.hero-slider img{
  opacity:0;
  transition: opacity 1.1s ease;
  transform:scale(1.06);
  will-change: opacity, transform;
}
.hero-slider img.active{
  opacity:1;
  animation: heroKenBurns 7.5s ease both;
}
@keyframes heroKenBurns{
  from{transform:scale(1.06);}
  to{transform:scale(1.12);}
}

/* Dots: subtle progress feel */
.hero-dots .hero-dot span{
  transform-origin:left center;
  transform:scaleX(.35);
  opacity:.55;
  transition:transform .6s ease, opacity .6s ease;
}
.hero-dots .hero-dot.active span{
  transform:scaleX(1);
  opacity:1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slider img{transition:none !important;}
  .hero-slider img.active{animation:none !important;}
}


/* V38: Fix - keep hero scrollable, make TOPBAR overlay hero */
:root{ --topbar-h: 84px; }
@media (max-width:900px){ :root{ --topbar-h: 76px; } }

/* Fixed topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:transparent;
  pointer-events:none; /* let inner nav handle */
}
.topbar .container{pointer-events:auto}

/* Square header (no rounded pill) */
.nav-shell{
  border-radius:0 !important;
  width:100%;
  max-width:none;
  margin:0 !important;
}

/* Default pages: keep content below fixed topbar */
body{ padding-top: var(--topbar-h); }

/* Home page: header overlays hero (no body padding) */
body.has-hero{ padding-top:0; }

/* Glassy background only after scroll */
body.scrolled .nav-shell{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(235,230,220,.92);
  box-shadow:0 12px 26px rgba(16,24,40,.06);
  backdrop-filter:saturate(1.2) blur(10px);
}

/* Hero section: one viewport, scrolls normally */
header.hero{
  position:relative;
  min-height:100vh;
  height:100vh;
  margin:0;
  overflow:hidden;
}

/* Slider fills hero */
header.hero .hero-slider{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:hidden;
}
header.hero .hero-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Hero content stays below topbar */
header.hero .hero-overlay{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  padding-top: calc(var(--topbar-h) + 18px);
  padding-bottom:40px;
  justify-content:center;/*talin*/
}

/* Optional: make nav text readable on top of images */
.topbar .nav-shell{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:saturate(1.2) blur(8px);
}
body.scrolled .topbar .nav-shell{
  background:rgba(255,255,255,.72);
}

/* V39: Hero overlay should be transparent (no gray frame) */
.hero-overlay, header.hero .hero-overlay{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* V39: Stronger visible header on top of hero */
.topbar .nav-shell{
  background:rgba(255,255,255,.38) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
}
.topbar .menu a, .topbar .menu a span, .topbar a{
  color:rgba(255,255,255,.95);
}
body.scrolled .topbar .menu a, body.scrolled .topbar a{
  color:var(--text) !important;
}
body.scrolled .topbar .nav-shell{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(235,230,220,.92) !important;
  box-shadow:0 12px 26px rgba(16,24,40,.07) !important;
}

/* Ensure hero content readability if header text becomes white */
.topbar .icon-btn{
  background:rgba(255,255,255,.85);
}

/* V40: Fix Send Enquiry icon visibility */
.topbar .icon-btn{
  color:rgba(20,22,28,.95);
}
.topbar .icon-btn svg,
.topbar .icon-btn svg path,
.topbar .icon-btn svg circle{
  fill:currentColor !important;
}

/* Adjust glass background based on tone for best contrast */
body.has-hero.tone-dark .topbar .nav-shell{
  background:rgba(255,255,255,.20) !important;
  border:1px solid rgba(255,255,255,.26) !important;
}
body.has-hero.tone-light .topbar .nav-shell{
  background:rgba(255,255,255,.60) !important;
  border:1px solid rgba(255,255,255,.40) !important;
}

/* Ensure enquiry icon stays visible in both tones */
body.has-hero.tone-dark .topbar .icon-btn{
  background:rgba(255,255,255,.90);
  color:rgba(20,22,28,.95);
}
body.has-hero.tone-light .topbar .icon-btn{
  background:rgba(255,255,255,.90);
  color:rgba(20,22,28,.95);
}

/* V41: Cinematic scrim + luxury hero card for guaranteed readability */

/* Scrim overlay that sits above slider but below text */
header.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(70% 60% at 20% 40%, rgba(0,0,0,.55), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.10) 100%);
}

/* Ensure slider is behind scrim */
header.hero .hero-slider{ z-index:0 !important; }
header.hero .hero-overlay{ z-index:2 !important; }

/* Hero card */
.hero-card{
  max-width:760px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  border-radius:18px;
  padding:22px 22px;
}
@media(max-width:900px){
  .hero-card{padding:18px 16px;border-radius:16px;}
}

/* Text on hero */
header.hero .hero-overlay h1,
header.hero .hero-overlay p{
  color:rgba(255,255,255,.96) !important;
  text-shadow:0 10px 26px rgba(0,0,0,.40);
}
header.hero .hero-overlay .lead{
  color:rgba(255,255,255,.92) !important;
}

/* Make header more visible on top of hero (but still premium) */
.topbar .nav-shell{
  background:rgba(18,20,26,.42) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:0 16px 34px rgba(0,0,0,.20) !important;
}
.topbar .menu a{ color:rgba(255,255,255,.95) !important; font-weight:650; }
.topbar .menu a:hover{ color:#fff !important; }
.topbar .icon-btn{
  background:rgba(255,255,255,.92) !important;
  color:rgba(18,20,26,.95) !important;
}
body.scrolled .topbar .nav-shell{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(235,230,220,.92) !important;
  box-shadow:0 12px 26px rgba(16,24,40,.07) !important;
}
body.scrolled .topbar .menu a{ color:var(--text) !important; }

/* V42: Improve header logo visibility on dark glass header */
.brand-logo{
  height:42px;
  width:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}

/* Put logo on a subtle light chip so it reads on any background */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .brand-logo{
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(8px);
}

/* Slightly larger on desktop */
@media(min-width:901px){
  .brand .brand-logo{height:46px;}
}

/* When scrolled (light header), reduce chip opacity so it blends */
body.scrolled .brand .brand-logo{
  background:rgba(255,255,255,.78);
  border-color:rgba(235,230,220,.85);
}

/* V45: Bigger logo, and remove logo white chip when header becomes light (scrolled) */

/* Bigger logo (about ~1.6-2x) */
.brand .brand-logo{
  height:78px !important;
  width:auto !important;
}
@media (max-width:900px){
  .brand .brand-logo{height:60px !important;}
}

/* Keep subtle chip on dark hero header for visibility */
.brand .brand-logo{
  padding:8px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.40);
  backdrop-filter: blur(8px);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
}

/* When scrolled (light header), make logo chip transparent (no frame) */
body.scrolled .brand .brand-logo{
  background:transparent !important;
  border-color:transparent !important;
  backdrop-filter:none !important;
  padding:0 !important;
  border-radius:0 !important;
  filter: none !important;
}

/* V46: Hamburger menu + mobile drawer */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  height:2px;
  width:18px;
  background:currentColor;
  border-radius:2px;
}
.topbar .hamburger{ color:rgba(255,255,255,.96); }
body.scrolled .topbar .hamburger{ color:rgba(20,22,28,.92); border-color:rgba(20,22,28,.10); background:rgba(255,255,255,.60); }

.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:1400;
  display:none;
  background:rgba(0,0,0,.42);
  backdrop-filter: blur(2px);
}
.mobile-drawer__panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(86vw, 360px);
  background:rgba(255,255,255,.92);
  border-left:1px solid rgba(235,230,220,.92);
  box-shadow:-18px 0 50px rgba(0,0,0,.18);
  padding:18px 16px;
  transform:translateX(100%);
  transition: transform .25s ease;
  display:flex;
  flex-direction:column;
}
.mobile-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 4px 14px;
}
.mobile-drawer__title{
  font-weight:700;
  letter-spacing:-.01em;
}
.mobile-close{
  width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(20,22,28,.10);
  background:rgba(255,255,255,.70);
  cursor:pointer;
  font-size:18px;
}
.mobile-nav a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  color:rgba(20,22,28,.92);
  text-decoration:none;
  font-weight:650;
}
.mobile-nav a:hover{
  background:rgba(48,73,180,.08);
}
.mobile-cta{ margin-top:auto; padding-top:14px; }
.mobile-cta .btn{ width:100%; justify-content:center; }

body.drawer-open .mobile-drawer{ display:block; }
body.drawer-open .mobile-drawer__panel{ transform:translateX(0); }

/* Mobile breakpoint: hide desktop menu + actions, show hamburger */
@media (max-width:900px){
  .topbar .menu{ display:none !important; }
  .topbar .actions{ display:none !important; }
  .hamburger{ display:flex !important; margin-left:auto; }
  .nav-shell{ padding:10px 12px; }
  .brand .brand-logo{ height:56px !important; }
}

/* V49: Services cards with 2-image crossfade */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:18px;
}
@media(max-width:1100px){
  .services-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr;}
}

.service-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 56px rgba(0,0,0,.12);
}
.service-media{
  position:relative;
  height:190px;
  background:#e7dfd3;
}
.service-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .6s ease;
}
.service-media img.is-on{opacity:1;}
.service-meta{padding:14px 14px 16px;}
.service-sub{color:var(--muted); font-size:13px; margin-top:4px;}


/* V51: Technical gallery (About page) */
.tech-gallery{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  height:360px;
  background:#e7dfd3;
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
  margin-top:14px;
}
.tech-gallery img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .7s ease;
}
.tech-gallery img.is-on{opacity:1;}
.tech-dots{
  position:absolute;
  left:18px;
  bottom:16px;
  display:flex;
  gap:8px;
}
.tech-dots button{
  width:8px;height:8px;border-radius:99px;
  border:none;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}
.tech-dots button.is-on{background:rgba(255,255,255,.92);}
@media(max-width:900px){
  .tech-gallery{height:260px;}
}

/* V52: Decorative Metal Work images fill box better (some PNGs have empty margins) */
.service-card[href*="decorative-metalwork"] .service-media{
  overflow:hidden;
}
.service-card[href*="decorative-metalwork"] .service-media img{
  object-fit:cover !important;
  transform:scale(1.10);
}

/* V52: About page - tighter technical gallery next to text */
.tech-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  align-items:start;
}
.tech-copy p{ margin-bottom:0; }
.tech-media .tech-gallery{ height:260px; margin-top:0; }
@media(max-width:900px){
  .tech-split{ grid-template-columns:1fr; }
  .tech-media .tech-gallery{ height:240px; }
}

/* V53 Inspiration before/after 2-column layout */
.inspiration-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}
.insp-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.insp-col img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
}
@media(max-width:900px){
  .inspiration-compare{grid-template-columns:1fr;}
}

/* V55 Premium Inspiration layout */
.inspiration-compare.premium{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:26px;
  position:relative;
}
.inspiration-compare.premium::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.15), transparent);
}
.insp-label{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:rgba(20,22,28,.55);
  margin-bottom:10px;
}
.insp-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.insp-col img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.10);
}
@media(max-width:900px){
  .inspiration-compare.premium{grid-template-columns:1fr;}
  .inspiration-compare.premium::before{display:none;}
}


/* V56: Index inspiration teaser header */
.inspiration-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.insp-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid rgba(20,22,28,.18);
  padding-bottom:3px;
}
.insp-more:hover{ border-bottom-color:rgba(20,22,28,.42); }
@media(max-width:900px){
  .inspiration-head{ align-items:flex-start; flex-direction:column; }
}


/* V54 Premium Inspiration layout */
.inspiration-compare.premium{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:26px;
  position:relative;
}
.inspiration-compare.premium::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.15), transparent);
}
.insp-label{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:rgba(20,22,28,.55);
  margin-bottom:10px;
}
.insp-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.insp-col img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.10);
}
.inspiration-compare.premium.teaser .insp-col img{
  height:320px;
}
@media(max-width:900px){
  .inspiration-compare.premium{grid-template-columns:1fr;}
  .inspiration-compare.premium::before{display:none;}
  .inspiration-compare.premium.teaser .insp-col img{ height:260px; }
}


/* V57 Inspiration kicker text (Selection of our transformations) */
.insp-kicker{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:rgba(20,22,28,.45);
  margin:0 0 6px 0;
  text-transform:uppercase;
}


/* V58: Premium motion (subtle reveal) */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .65s ease, transform .65s ease;
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}
.reveal.delay-1{ transition-delay:.08s; }
.reveal.delay-2{ transition-delay:.16s; }
.reveal.delay-3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* V60: Inner pages header should be white with black menu */
.inner-page .topbar .nav-shell{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(235,230,220,.92) !important;
  box-shadow:0 12px 26px rgba(16,24,40,.07) !important;
}
.inner-page .topbar .menu a{
  color:rgba(20,22,28,.92) !important;
}
.inner-page .topbar .hamburger{
  color:rgba(20,22,28,.92) !important;
  border-color:rgba(20,22,28,.10) !important;
  background:rgba(255,255,255,.60) !important;
}
.inner-page .topbar .icon-btn{
  background:rgba(20,22,28,.06) !important;
  color:rgba(20,22,28,.92) !important;
}

/* V60: Inspiration page CTA */
.insp-cta{
  margin-top:26px;
}
.insp-cta__box{
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
  padding:18px 18px;
}
.insp-cta__title{
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.insp-cta__text{
  color:var(--muted);
  margin-bottom:12px;
}

/* V66: Tech slider inside The Link Space Way */
.tech-gallery{ margin-top:0; height:320px; }
@media(max-width:900px){ .tech-gallery{ height:240px; } }

/* V67: Inner pages logo without white chip */
.inner-page .brand .brand-logo{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  backdrop-filter:none !important;
  border-radius:0 !important;
}




/* V69: Smooth transition into Inspiration section */
.section.alt{
  position:relative;
  background:linear-gradient(to bottom, rgba(20,22,28,.035), rgba(255,255,255,0) 120px);
}
.section.alt::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height:32px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(20,22,28,.045), rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}
.section.alt .container{ padding-top:10px; }

/* V72: TerraFest extra images layout */
.terrafest-extra{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.terrafest-extra img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}
@media(max-width:900px){
  .terrafest-extra{
    grid-template-columns:1fr;
  }
}

/* V73: Smooth transition from Inspiration to next section */
.section.alt-next{
  position:relative;
  background:linear-gradient(to bottom, rgba(20,22,28,.03), rgba(255,255,255,0) 140px);
}
.section.alt-next::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-28px;
  height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(20,22,28,.04), rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}

/* V73: Partners TerraFest left space fillers */
.terrafest-extra{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
.terrafest-extra img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}
@media(max-width:900px){
  .terrafest-extra{
    grid-template-columns:1fr;
  }
  .terrafest-extra img{ height:200px; }
}

/* V76 TerraFest left space images */
.terrafest-extra{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
.terrafest-extra img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}
@media(max-width:900px){
  .terrafest-extra{grid-template-columns:1fr;}
}

/* V78 Terafest editorial layout */
.terrafest-editorial{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  align-items:stretch;
  margin-top:14px;
}
.terrafest-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}
.terrafest-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:16px;
}
.terrafest-side img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}
@media(max-width:900px){
  .terrafest-editorial{
    grid-template-columns:1fr;
  }
  .terrafest-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
}

/* V84 Hero tagline adjustment */
.hero-subtitle{
  text-align:center;
  font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.04em;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  opacity:.92;
}

/* V85 Editorial luxury refinement for hero tagline */
.hero-subtitle{
  letter-spacing:0.12em;
  text-transform:none;
  font-weight:400;
}

/* V86 Perfect vertical & horizontal centering for hero tagline */
.hero-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.hero-subtitle{
  text-align:center;
  margin-top:10px;
}

/* V86.1: override global h1 max-width so the hero headline can truly center */
header.hero .hero-card h1{
  max-width:none;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ===== V86.2 HERO TYPOGRAPHY REFINEMENT ===== */
header.hero .hero-card h1{
  font-size: clamp(34px, 4.2vw, 52px); /* slightly smaller */
  font-weight: 600;                     /* thinner than current bold */
  line-height: 1.2;                     /* more breathing space */
  letter-spacing: 0.2px;                /* subtle luxury feel */
  max-width: 820px;                     /* nicer line breaks */
  margin-inline:auto;
  text-align:center;
}

/* ===== V86.2 — LUXURY EDITORIAL HERO STYLE ===== */
header.hero .hero-card h1{
  font-size: clamp(32px, 3.8vw, 48px);  /* elegant, slightly smaller */
  font-weight: 500;                      /* thinner = premium feel */
  line-height: 1.22;                     /* airy editorial spacing */
  letter-spacing: 0.3px;                 /* subtle refinement */
  max-width: 780px;                      /* balanced line breaks */
  margin-inline: auto;
  text-align: center;
}

/* optional: refine subtitle to match luxury tone */
header.hero .hero-card p{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  opacity: 0.9;
  max-width: 640px;
  margin-inline: auto;
}

/* ===== V86.3 EDITORIAL LINE BREAK CONTROL ===== */

/* desktop & tablet: force elegant 2-line layout */
.hero-break{
  display:block;
}

/* mobile: allow natural wrapping so it doesn't look cramped */
@media (max-width:640px){
  .hero-break{
    display:none;
  }
}

/* =======================================================================
   V86.4 — HERO CARD GRID POLISH (Luxury Editorial)
   ======================================================================= */

/* Ensure overlay centers the card reliably (horizontal + vertical) */
header.hero .hero-overlay{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Make the container a centering flex wrapper (safe override) */
header.hero .hero-overlay .container{
  width:100%;
  display:flex;
  justify-content:center;
}

/* Center hero content and avoid inherited max-width constraints */
header.hero .hero-card{
  text-align:center;
}

/* Luxury Editorial hero headline */
header.hero .hero-card h1{
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.3px;
  max-width: 780px;
  margin: 0 auto 16px;
  text-align: center;
}

/* Subtitle refinement */
header.hero .hero-card p{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  opacity: 0.9;
  max-width: 640px;
  margin: 0 auto;
  text-align:center;
}

/* Controlled headline break (desktop), natural wrap (mobile) */
.hero-break{ display:block; }
@media (max-width:640px){
  .hero-break{ display:none; }
}

/* Optical grid polish on very wide screens */
@media (min-width:1200px){
  header.hero .hero-card{
    max-width: 980px;
  }
}

/* ===== Inspiration Before/After pairing (Mobile-friendly) ===== */
.inspiration-pairs{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}

.insp-pair{
  display:grid;
  grid-template-columns: 1fr 1fr;  /* desktop: side-by-side */
  gap:16px;
}

.insp-item{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.insp-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
}

@media (max-width:900px){
  .insp-pair{
    grid-template-columns: 1fr; /* mobile: Before then After, per pair */
  }
}

/* ===== Mobile Footer Horizontal Spacing Fix ===== */
@media (max-width: 768px) {
  .footer .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}