/* ===== Colours & basics ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap');
:root {
    --bg: oklch(.17 .006 60);
    --fg: oklch(.95 .012 80);
    --card: oklch(.21 .008 60);
    --pri: #ffd200;
    --prf: oklch(.15 .01 60);
    --mut: oklch(.72 .02 75);
    --acc: oklch(.28 .02 60);
    --bd: oklch(1 0 0/10%);
    --r: .75rem;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 16px/1.65 Manrope, "Segoe UI", sans-serif; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: 1.1; }
h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h3 { font-size: 1.7rem; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 80rem; margin: auto; padding: 0 1.5rem; }
section { padding: 4.5rem 0; }
.muted { color: var(--mut); }
.eyebrow { text-transform: uppercase; color: var(--pri); font-size: .75rem; letter-spacing: .1em; margin-bottom: .75rem; }

/* ===== Banner (hero) ===== */
.hero { position: relative; isolation: isolate; min-height: 70vh; display: flex; align-items: flex-end; padding: 9rem 0 4rem; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(.12 .006 60/.55), oklch(.12 .006 60/.35) 50%, var(--bg)); }
.hero p.lead { max-width: 40rem; margin-top: 1rem; color: var(--mut); }
.hero .wrap { animation: rise .9s ease both; }

/* Home page banner */
.hero.home { min-height: 88vh; align-items: center; padding: 8rem 0 4rem; }
.hero.home::after { background: linear-gradient(90deg, oklch(.12 .006 60/.93) 0%, oklch(.12 .006 60/.72) 42%, oklch(.12 .006 60/.1) 100%); }
.hero.home > .wrap { width: 100%; margin: 0 auto; }
.hero.home h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); max-width: 44rem; }
.hero.home h1 em { font-style: normal; color: #ffa909; }
.hero.home p.lead { max-width: 34rem; color: var(--fg); opacity: .8; }
.hero.home .btn { border-radius: .35rem; }
.hero.home .btn.ghost { border-color: #ffa909; color: #ffa909; }
.hero.home .btn.ghost:hover { background: #ffa909; color: var(--prf); }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding: .8rem 1.6rem; cursor: pointer; border: 1px solid transparent; font: inherit; font-weight: 500; background: var(--pri); color: var(--prf); transition: filter .2s; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: none; color: var(--fg); border-color: oklch(.95 .012 80/40%); }
.btn.ghost:hover { background: var(--acc); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, .field:focus { outline: 2px solid var(--pri); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ===== Grids, cards, photos ===== */
.grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 1.75rem; }
.card p { color: var(--mut); margin-top: .5rem; font-size: .95rem; }
.card.img { padding: 0; overflow: hidden; }
.card.img > div { padding: 1.5rem; }
.card.img img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
a.card:hover { border-color: #ffa909; }
.more { display: inline-block; margin-top: 1rem; color: #ffa909; font-size: .9rem; }
.photo { border-radius: var(--r); width: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split { display: grid; gap: 3rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.stats { display: flex; gap: 3rem; margin-top: 2rem; }
.stats b { display: block; font: 500 3rem/1 "Cormorant Garamond", serif; color: var(--pri); }
.alt { background: oklch(.21 .008 60/.4); border-block: 1px solid var(--bd); }
.chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.chips span { border: 1px solid var(--bd); border-radius: 9999px; padding: .4rem 1rem; font-size: .9rem; }
ul.tick { list-style: none; padding: 0; display: grid; gap: .5rem; margin-top: 1.5rem; }
ul.tick li::before { content: "✓ "; color: var(--pri); }
figure { position: relative; overflow: hidden; border-radius: var(--r); }
figure img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
figcaption { display: flex; justify-content: space-between; gap: .5rem; padding: .8rem 0 0; font-size: .9rem; }
figcaption span { color: var(--mut); }
details { border-bottom: 1px solid var(--bd); padding: 1.1rem 0; }
summary { cursor: pointer; font-weight: 500; }
details p { color: var(--mut); margin-top: .5rem; }

/* ===== Header ===== */
header.top { position: absolute; inset: 0 0 auto; z-index: 30; background: #000; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .3rem; }
header.top img { height: 5rem; width: auto; }
header.top a.logo { display: flex; align-items: center; gap: .75rem; }
.brandname { font: 500 1.4rem "Cormorant Garamond", Georgia, serif; letter-spacing: .04em; white-space: nowrap; color: #ffa909; }
nav.main { display: none; gap: 1.5rem; font-size: .875rem; }
nav.main a:hover, nav.main a.on, .mnav a.on { color: var(--pri); }
.menu { background: none; border: 0; color: var(--fg); font-size: 1.6rem; cursor: pointer; }
.mnav { display: none; background: var(--bg); border-block: 1px solid var(--bd); padding: 1rem 1.5rem; }
.mnav.open { display: block; }
.mnav a { display: block; padding: .75rem 0; font-size: .9rem; }
@media (min-width: 1024px) {
    nav.main { display: flex; }
    .menu, .mnav { display: none !important; }
}
@media (max-width: 480px) { .brandname { font-size: 1.2rem; } }

/* ===== "Ready to start" strip & footer ===== */
.cta { text-align: center; border-top: 1px solid var(--bd); }
.cta p { max-width: 36rem; margin: 1rem auto 0; color: var(--mut); }
.cta .row { justify-content: center; }
footer { border-top: 1px solid var(--bd); background: var(--card); }
footer .wrap { display: grid; gap: 2.5rem; padding-block: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
footer nav, footer .contact { display: grid; gap: .75rem; align-content: start; font-size: .9rem; color: var(--mut); }
footer a:hover { color: var(--pri); }
.brand { font: 500 1.6rem "Cormorant Garamond", serif; color: var(--pri); }
.copy { border-top: 1px solid var(--bd); text-align: center; font-size: .75rem; color: var(--mut); padding: 1.25rem; }

/* ===== Contact form ===== */
form { display: grid; gap: 1rem; }
.two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.field { width: 100%; min-height: 48px; border: 1px solid oklch(1 0 0/14%); border-radius: 8px; background: var(--bg); color: var(--fg); padding: .8rem 1rem; font: inherit; }
textarea.field { min-height: 7rem; resize: vertical; }
label { display: grid; gap: .4rem; font-size: .85rem; color: var(--mut); }
.msg { min-height: 1.5rem; color: var(--pri); }
.hp { display: none; }
iframe { width: 100%; height: 20rem; border: 0; border-radius: var(--r); filter: grayscale(.4) invert(.9) hue-rotate(180deg); }

/* ===== Floating buttons (right side: WhatsApp, Call, then Chat below) ===== */
.float { position: fixed; right: 1.1rem; bottom: 5.25rem; z-index: 40; display: grid; gap: .75rem; }
.fab { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); transition: transform .2s; }
.fab:hover { transform: scale(1.08); }
.fab svg { width: 1.7rem; height: 1.7rem; }
.fab.wa { background: #25d366; }
.fab.wa svg { fill: #fff; }
.fab.call { background: var(--pri); }
.fab.call svg { fill: none; stroke: var(--prf); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Chat bot ===== */
.cb-open { position: fixed; right: 1.1rem;isolation: isolate; bottom: 1.1rem; z-index: 40; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0; background: #ffa909; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.cb { position: fixed; right: 5.5rem; bottom: 1.1rem; z-index: 50; width: min(22rem, calc(100vw - 6.6rem)); height: 30rem; max-height: calc(100vh - 2.2rem); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--bd); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.cb[hidden] { display: none; }
.cb-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; background: #000; }
.cb-head b { color: #ffa909; flex: 1; }
.cb-head span { font-size: .75rem; color: #4ade80; }
.cb-x { background: none; border: 0; color: var(--fg); cursor: pointer; font-size: 1rem; }
.cb-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.cb-m { max-width: 85%; background: var(--acc); padding: .6rem .85rem; border-radius: .9rem; font-size: .9rem; }
.cb-m.me { align-self: flex-end; background: #ffa909; color: #1a1200; }
.cb-opts { display: grid; gap: .5rem; }
.cb-opts button { background: none; border: 1px solid var(--bd); color: var(--fg); border-radius: 9999px; padding: .55rem; cursor: pointer; font: inherit; font-size: .85rem; }
.cb-opts button:hover { border-color: #ffa909; color: #ffa909; }
.cb-form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--bd); }
.cb-form .field { min-height: 42px; padding: .5rem .8rem; }
.cb-form .btn { padding: .5rem 1rem; }

/* ===== Scroll animation ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ===== Moving "Why choose us" strip ===== */
.marquee { overflow: hidden; margin-top: 2.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; width: max-content; animation: slide 35s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.mi { flex: none; width: 11rem; display: grid; justify-items: center; gap: .7rem; text-align: center; font-size: .8rem; text-transform: uppercase; color: var(--mut); }
.mi i { font-style: normal; font-size: 2.4rem; line-height: 1; color: #ffa909; font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ===== Intro splash ===== */
.splash { position: fixed; inset: 0; z-index: 100; background: #0b0a09; display: grid; place-content: center; justify-items: center; gap: 1rem; transition: opacity .8s ease; }
.splash.out { opacity: 0; pointer-events: none; }
.splash img { width: min(16rem, 60vw); opacity: 0; animation: sfade 1s .2s ease forwards; }
.sline { height: 2px; width: 0; background: #ffa909; animation: sgrow 1s 1s ease forwards; }
.splash p { color: var(--mut); letter-spacing: .12em; font-size: .9rem; opacity: 0; animation: sfade 1s 1.6s ease forwards; }
@keyframes sfade { to { opacity: 1; } }
@keyframes sgrow { to { width: 8rem; } }

/* ===== Small screens & reduced motion ===== */
@media (max-width: 767px) {
    main h1 { font-size: 3rem; }
    main h2 { font-size: 2.5rem; }
    .stats { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .track { animation: none; }
    .marquee { overflow-x: auto; }
}

.cb-open { animation: cbwiggle 5s ease-in-out infinite; }
.cb-open::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ffa909; z-index: -1; animation: cbpulse 2s ease-out infinite; }
.cb-open:hover { animation: none; transform: scale(1.1); }
@keyframes cbpulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes cbwiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-8deg); } 96% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .cb-open, .cb-open::before { animation: none; } }

.step{position:relative;overflow:hidden;isolation:isolate;min-height:20rem;display:flex;flex-direction:column;justify-content:flex-end}
.step>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.step::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(.12 .006 60/.3),oklch(.12 .006 60/.88))}
.step:hover>img{transform:scale(1.08)}
.step p{color:var(--fg);opacity:.9}

.hero.full{display:block;min-height:0;padding:5.6rem 0 0}
.hero.full>img{position:static;width:100%;height:auto;max-height:85vh;object-fit:contain;z-index:auto}
.hero.full::after{z-index:0}
.hero.full>.wrap{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:100%;z-index:1;padding-bottom:2.5rem}

.step{position:relative;overflow:hidden;isolation:isolate;min-height:20rem;display:flex;flex-direction:column;justify-content:flex-end}
.step>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.step::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(.12 .006 60/.3),oklch(.12 .006 60/.88))}
.step:hover>img{transform:scale(1.08)}
.step p{color:var(--fg);opacity:.9}

.ceo{display:flex;align-items:center;gap:1rem}
.ceo img{width:5rem;height:5rem;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid #ffa909;flex:none}
.ceo b{display:block;color:var(--fg);font:500 1.3rem "Cormorant Garamond",Georgia,serif}
.ceo span{display:block;color:#ffa909;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}

.partners{max-width:80rem;margin:0 auto;padding:2rem 1.5rem 2.5rem;border-top:1px solid var(--bd)}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:.5rem}
.ceo{display:flex;align-items:center;gap:1rem;min-width:0}
.ceo img{width:4rem;height:4rem;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid #ffa909;flex:none;background:var(--acc)}
.ceo b{display:block;color:var(--fg);font:500 1.2rem "Cormorant Garamond",Georgia,serif;line-height:1.2}
.ceo span{display:block;color:#ffa909;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}
@media(max-width:600px){
  .ceo{flex-direction:column;text-align:center;gap:.6rem}
}

.partners{text-align:center}
.plist{display:flex;justify-content:center;gap:2rem 4rem;flex-wrap:wrap}
.ceo{justify-content:center;text-align:left}

.partners{max-width:80rem;margin:0 auto;padding:2rem 1.5rem 2.5rem;border-top:1px solid var(--bd)}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:.5rem}
.ceo{display:flex;align-items:center;gap:1rem;min-width:0}
.ceo img{width:4rem;height:4rem;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid #ffa909;flex:none;background:var(--acc)}
.ceo b{display:block;color:var(--fg);font:500 1.2rem "Cormorant Garamond",Georgia,serif;line-height:1.2}
.ceo span{display:block;color:#ffa909;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}
@media(max-width:600px){
  .ceo{flex-direction:column;text-align:center;gap:.6rem}
}

.brandname{display:flex;flex-direction:column;align-items:stretch;line-height:1;font-family:Montserrat,Manrope,sans-serif}
.bn1{font-size:1.7rem;font-weight:600;letter-spacing:.06em;white-space:nowrap;text-align:center}
.bn1 .w{background:linear-gradient(180deg,#fff,#c9c9c9);-webkit-background-clip:text;background-clip:text;color:transparent}
/* .bn1 .g{background:linear-gradient(180deg,#ffd978,#d99a1c 55%,#a8710c);-webkit-background-clip:text;background-clip:text;color:transparent} */
.bn1 .g{color:var(--pri)}
.bn2{display:flex;align-items:center;gap:.6rem;margin-top:.4rem;font-size:.8rem;font-weight:500;letter-spacing:.5em;padding-left:.5em;color:#ffa909}
.bn2::before,.bn2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#d99a1c)}
.bn2::after{background:linear-gradient(270deg,transparent,#d99a1c)}
@media(max-width:480px){.bn1{font-size:1.25rem}.bn2{font-size:.6rem}}

.splash img{width:min(11rem,45vw)}
.splash .brandname{opacity:0;animation:sfade 1s .6s ease forwards}
.splash .bn1{font-size:clamp(2rem,7vw,3.4rem)}
.splash .bn2{font-size:clamp(.7rem,2.4vw,1.1rem)}

.layouts figure{background:var(--card);border:1px solid var(--bd);transition:border-color .2s}
.layouts figure:hover{border-color:#ffa909}
.layouts figure img{aspect-ratio:4/3}
.layouts figcaption{flex-direction:column;gap:.15rem;padding:1rem 1.2rem 1.2rem}
.layouts figcaption{font:500 1.5rem "Cormorant Garamond",Georgia,serif}
.layouts figcaption span{font:400 .85rem Manrope,sans-serif}

.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mosaic img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);transition:transform .4s ease}
.mosaic img:hover{transform:scale(1.03)}