/* =============================================
   ADETUTU CONCIERGE — LIGHT MODE
   Nigerian Green #008751 · Gold #B8963E · Bold Contemporary
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&display=swap');

:root {
  --green:       #008751;
  --green-dk:    #005c37;
  --green-lt:    #00a863;
  --green-pale:  #e8f5ef;
  --green-sub:   rgba(0,135,81,.08);

  --gold:        #B8963E;
  --gold-lt:     #D4AF60;
  --gold-dk:     #8A6E28;
  --gold-pale:   #fdf7eb;

  --white:       #FFFFFF;
  --off:         #FAFAF6;
  --cream:       #F5F0E8;
  --cream-dk:    #EDE8DC;

  --ink:         #111111;
  --ink-s:       #2C2C2C;
  --ink-m:       #555550;
  --ink-l:       #888882;
  --border:      #E0DAD0;
  --border-lt:   #EDE9E1;

  --fh: 'Fraunces', serif;
  --fb: 'Inter', sans-serif;

  --tr:   all .3s cubic-bezier(.25,.46,.45,.94);
  --r:    6px;
  --s1:   0 2px 12px rgba(0,0,0,.06);
  --s2:   0 8px 32px rgba(0,0,0,.10);
  --s3:   0 20px 60px rgba(0,0,0,.11);
  --sg:   0 8px 32px rgba(0,135,81,.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--ink); font-family:var(--fb); font-weight:400; line-height:1.7; overflow-x:hidden; }

::-webkit-scrollbar        { width:5px; }
::-webkit-scrollbar-track  { background:var(--cream); }
::-webkit-scrollbar-thumb  { background:var(--green); border-radius:10px; }
::selection                { background:var(--green); color:#fff; }

/* ── PRELOADER ── */
#preloader { position:fixed; inset:0; z-index:99999; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .5s,visibility .5s; }
#preloader.hidden { opacity:0; visibility:hidden; }
.pre-logo { font-family:var(--fh); font-size:clamp(2.5rem,6vw,4rem); font-weight:900; letter-spacing:-.03em; color:var(--ink); }
.pre-logo span { color:var(--green); }
.pre-sub  { font-size:.6rem; font-weight:700; letter-spacing:.35em; text-transform:uppercase; color:var(--ink-l); margin:.3rem 0 2.5rem; }
.pre-bar  { width:160px; height:3px; background:var(--border); border-radius:4px; overflow:hidden; }
.pre-bar::after { content:''; display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); animation:prebar 1.6s ease-in-out infinite; }
@keyframes prebar { 0%{width:0%;margin-left:0} 50%{width:60%;margin-left:20%} 100%{width:0%;margin-left:100%} }

/* ── NAV ── */
#navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:1.3rem 0; transition:var(--tr); }
#navbar.scrolled { background:rgba(255,255,255,.97); padding:.85rem 0; border-bottom:1px solid var(--border); box-shadow:var(--s1); backdrop-filter:blur(14px); }
.nav-wrap { max-width:1400px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { text-decoration:none; line-height:1; }
.nav-logo-name { font-family:var(--fh); font-size:1.75rem; font-weight:900; letter-spacing:-.03em; color:var(--ink); display:block; }
.nav-logo-name span { color:var(--green); }
.nav-logo-tag  { font-size:.55rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-l); display:block; margin-top:2px; }
.nav-links { list-style:none; display:flex; align-items:center; gap:.1rem; }
.nav-links a { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-m); text-decoration:none; padding:.5rem .85rem; transition:var(--tr); position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:.85rem; right:.85rem; height:2px; background:var(--green); transform:scaleX(0); transition:transform .25s ease; border-radius:2px; }
.nav-links a:hover,.nav-links a.active { color:var(--green); }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
.nav-links .nav-cta a { background:var(--green); color:#fff !important; border-radius:var(--r); padding:.5rem 1.2rem; }
.nav-links .nav-cta a::after { display:none; }
.nav-links .nav-cta a:hover { background:var(--green-dk); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:var(--tr); }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
@media(max-width:1080px){
  .hamburger { display:flex; }
  .nav-links { position:fixed; top:0; right:-100%; width:290px; height:100vh; background:var(--white); border-left:1px solid var(--border); flex-direction:column; align-items:flex-start; padding:6rem 2rem 2rem; gap:.2rem; transition:right .4s ease; box-shadow:-10px 0 40px rgba(0,0,0,.08); }
  .nav-links.open { right:0; }
  .nav-links a { font-size:.85rem; padding:.8rem 0; width:100%; }
  .nav-links .nav-cta a { background:none; color:var(--green) !important; }
}

/* ── LAYOUT ── */
.container { max-width:1400px; margin:0 auto; padding:0 2rem; }
.section    { padding:6rem 0; }
.section-sm { padding:4rem 0; }

/* ── TYPE ── */
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:var(--green); margin-bottom:1rem; }
.eyebrow::before { content:''; width:26px; height:2px; background:var(--green); border-radius:2px; }
.eyebrow-center { justify-content:center; }

.h-display { font-family:var(--fh); font-size:clamp(2.4rem,5vw,4rem); font-weight:900; color:var(--ink); line-height:1.05; letter-spacing:-.035em; margin-bottom:1.2rem; }
.h-display em   { font-style:italic; color:var(--green); }
.h-display span { color:var(--gold); }

.body-lg { font-size:1rem; color:var(--ink-m); line-height:1.8; max-width:560px; }

.accent-line { width:48px; height:4px; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:4px; margin-bottom:1.4rem; }
.accent-center { margin-left:auto; margin-right:auto; }

/* ── PAGE BANNER ── */
.page-banner { background:var(--cream); border-bottom:1px solid var(--border); padding:9rem 0 4.5rem; position:relative; overflow:hidden; }
.page-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 120% at 90% 60%,rgba(0,135,81,.06),transparent); }
.banner-bg { position:absolute; right:-1rem; top:50%; transform:translateY(-50%); font-family:var(--fh); font-size:clamp(6rem,18vw,16rem); font-weight:900; color:rgba(0,135,81,.05); white-space:nowrap; pointer-events:none; letter-spacing:-.05em; line-height:1; }
.page-banner .container { position:relative; z-index:1; }
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-l); margin-bottom:1.2rem; }
.breadcrumb a { color:var(--ink-l); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover,.breadcrumb .cur { color:var(--green); }
.breadcrumb .sep { color:var(--gold); }
.page-banner h1 { font-family:var(--fh); font-size:clamp(3rem,7.5vw,6.5rem); font-weight:900; color:var(--ink); line-height:1.0; letter-spacing:-.04em; }
.page-banner h1 em { font-style:italic; color:var(--green); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--fb); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; text-decoration:none; padding:.9rem 2rem; border-radius:var(--r); border:2px solid transparent; transition:var(--tr); cursor:pointer; line-height:1; }
.btn-green { background:var(--green); color:#fff; border-color:var(--green); }
.btn-green:hover { background:var(--green-dk); border-color:var(--green-dk); transform:translateY(-2px); box-shadow:var(--sg); }
.btn-gold  { background:var(--gold); color:#fff; border-color:var(--gold); }
.btn-gold:hover  { background:var(--gold-dk); border-color:var(--gold-dk); transform:translateY(-2px); }
.btn-outline-green { background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline-green:hover { background:var(--green); color:#fff; transform:translateY(-2px); }
.btn-outline-dark  { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline-dark:hover  { background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-white { background:#fff; color:var(--ink); border-color:#fff; }
.btn-white:hover { background:var(--cream); transform:translateY(-2px); }

/* ── IMAGE PLACEHOLDER ── */
.img-ph { background:var(--cream); border:1.5px dashed var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; color:var(--ink-l); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; overflow:hidden; position:relative; width:100%; height:100%; min-height:220px; }
.img-ph::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(0,135,81,.03) 20px,rgba(0,135,81,.03) 21px); }
.img-ph svg { width:40px; height:40px; opacity:.25; position:relative; z-index:1; }
.img-ph-lbl { position:relative; z-index:1; text-align:center; padding:0 1rem; }
.img-ph-lbl small { display:block; color:var(--green); font-size:.62rem; margin-top:.3rem; }

/* ── CARDS ── */
.card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden; transition:var(--tr); }
.card:hover { border-color:var(--green); box-shadow:var(--sg); transform:translateY(-4px); }

/* service icon box */
.sic { width:54px; height:54px; background:var(--green-pale); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.2rem; transition:var(--tr); }
.card:hover .sic { background:var(--green); }

/* ── STATS BAR ── */
.stats-bar { background:var(--green); padding:3.5rem 0; }
.sb-grid   { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.sb-item   { padding:0 2rem; border-right:1px solid rgba(255,255,255,.2); }
.sb-item:last-child { border-right:none; }
.sb-num    { font-family:var(--fh); font-size:clamp(2.8rem,5vw,4.5rem); font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1; }
.sb-lbl    { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.65); margin-top:.4rem; }

/* ── SERVICE CARD ── */
.svc-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); padding:2.2rem 1.8rem; text-decoration:none; display:block; transition:var(--tr); position:relative; overflow:hidden; }
.svc-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.svc-card:hover { border-color:var(--green); transform:translateY(-6px); box-shadow:var(--sg); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-card h3 { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.6rem; }
.svc-card p  { font-size:.8rem; color:var(--ink-m); line-height:1.7; margin-bottom:1.2rem; }
.svc-card .arr { font-size:.78rem; font-weight:700; color:var(--green); display:inline-block; transition:transform .2s; }
.svc-card:hover .arr { transform:translateX(5px); }

/* ── WHY POINT ── */
.why-pt { display:flex; gap:1.5rem; align-items:flex-start; padding:1.5rem; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); transition:var(--tr); }
.why-pt:hover { border-color:var(--green); box-shadow:var(--s1); }
.why-ic { width:44px; height:44px; flex-shrink:0; background:var(--green-pale); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:var(--tr); }
.why-pt:hover .why-ic { background:var(--green); }
.why-pt h4 { font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.why-pt p  { font-size:.8rem; color:var(--ink-m); line-height:1.6; }

/* ── TESTIMONIAL ── */
.t-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); padding:2.5rem; transition:var(--tr); position:relative; }
.t-card::before { content:'"'; font-family:var(--fh); font-size:7rem; font-weight:900; color:var(--green-pale); position:absolute; top:-.5rem; left:1.5rem; line-height:1; pointer-events:none; }
.t-card:hover { border-color:var(--green); box-shadow:var(--sg); transform:translateY(-3px); }
.stars  { color:var(--gold); font-size:.85rem; letter-spacing:.1em; margin-bottom:1rem; }
.t-text { font-family:var(--fh); font-size:1.05rem; font-weight:400; font-style:italic; color:var(--ink-s); line-height:1.7; margin-bottom:1.5rem; }
.t-author { display:flex; align-items:center; gap:1rem; }
.t-av   { width:46px; height:46px; border-radius:50%; background:var(--green-pale); border:2px solid var(--green); display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:1.2rem; font-weight:900; color:var(--green); flex-shrink:0; }
.t-name { font-size:.88rem; font-weight:700; color:var(--ink); margin-bottom:.1rem; }
.t-loc  { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-l); }

/* ── CTA BAND ── */
.cta-band { background:var(--green); padding:5rem 3rem; border-radius:var(--r); text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(0,0,0,.15),transparent); }
.cta-band > * { position:relative; z-index:1; }
.cta-band .h-display { color:#fff; }
.cta-band .h-display em { color:var(--gold-lt); }
.cta-band .body-lg { color:rgba(255,255,255,.75); margin:0 auto 2.5rem; }

/* ── FAQ ── */
.faq-item { border-bottom:1.5px solid var(--border); }
.faq-q { width:100%; background:none; border:none; font-family:var(--fb); font-size:.95rem; font-weight:700; color:var(--ink); text-align:left; padding:1.4rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:color .2s; }
.faq-q:hover { color:var(--green); }
.faq-ic { width:26px; height:26px; flex-shrink:0; border:2px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--ink-m); transition:transform .3s,border-color .2s,color .2s; }
.faq-item.open .faq-ic { transform:rotate(45deg); border-color:var(--green); color:var(--green); }
.faq-a { font-size:.87rem; color:var(--ink-m); line-height:1.8; max-height:0; overflow:hidden; transition:max-height .4s ease,padding-bottom .3s; padding-bottom:0; }
.faq-item.open .faq-a { max-height:300px; padding-bottom:1.5rem; }

/* ── PROCESS STEP ── */
.proc-step { display:flex; gap:2rem; align-items:flex-start; padding:2rem 0; border-bottom:1.5px solid var(--border); }
.proc-num  { font-family:var(--fh); font-size:3.5rem; font-weight:900; color:var(--border); line-height:1; flex-shrink:0; width:64px; transition:var(--tr); }
.proc-step:hover .proc-num { color:var(--green); }
.proc-body h4 { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.proc-body p  { font-size:.85rem; color:var(--ink-m); line-height:1.7; }

/* ── FORM ── */
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-m); margin-bottom:.4rem; }
.form-group input,.form-group textarea,.form-group select { width:100%; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); color:var(--ink); padding:.85rem 1.1rem; font-family:var(--fb); font-size:.9rem; outline:none; transition:border-color .2s,box-shadow .2s; resize:vertical; }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--ink-l); }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,135,81,.1); }
.form-group select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23888882' viewBox='0 0 16 16'%3E%3Cpath d='M8 10L3 5h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── FOOTER ── */
footer { background:var(--ink); color:rgba(255,255,255,.65); padding:5rem 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:4rem; padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,.08); }
.f-brand { font-family:var(--fh); font-size:2rem; font-weight:900; color:#fff; letter-spacing:-.03em; margin-bottom:.2rem; }
.f-brand span { color:#00d882; }
.f-tag   { font-size:.57rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.2rem; }
.f-desc  { font-size:.85rem; line-height:1.8; color:rgba(255,255,255,.5); margin-bottom:1.5rem; }
.f-head  { font-size:.63rem; font-weight:800; text-transform:uppercase; letter-spacing:.25em; color:#00d882; margin-bottom:1.3rem; }
.f-links { list-style:none; }
.f-links li { margin-bottom:.6rem; }
.f-links a { font-size:.84rem; color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s; display:flex; align-items:center; gap:.5rem; }
.f-links a::before { content:'›'; color:#00d882; font-size:1rem; }
.f-links a:hover { color:#fff; }
.f-ci   { display:flex; gap:.9rem; margin-bottom:1rem; align-items:flex-start; }
.f-ci-ic{ width:32px; height:32px; background:rgba(0,135,81,.2); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.f-ci-tx{ font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.5; }
.f-ci-tx strong { display:block; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:#00d882; margin-bottom:.15rem; }
.social-row { display:flex; gap:.65rem; margin-top:1.2rem; }
.social-a { width:36px; height:36px; border:1px solid rgba(255,255,255,.15); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); text-decoration:none; font-size:.78rem; font-weight:800; transition:var(--tr); }
.social-a:hover { background:var(--green); border-color:var(--green); color:#fff; }
.f-news { display:flex; margin-top:1rem; }
.f-news input { flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-right:none; border-radius:var(--r) 0 0 var(--r); color:#fff; padding:.75rem 1rem; font-family:var(--fb); font-size:.82rem; outline:none; }
.f-news input::placeholder { color:rgba(255,255,255,.28); }
.f-news input:focus { border-color:var(--green); }
.f-news button { background:var(--green); color:#fff; border:none; padding:0 1.2rem; border-radius:0 var(--r) var(--r) 0; font-weight:800; cursor:pointer; transition:background .2s; }
.f-news button:hover { background:var(--green-lt); }
.f-bottom { padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; }
.f-copy   { font-size:.76rem; color:rgba(255,255,255,.28); }
.f-copy span { color:#00d882; }

/* ── BACK TO TOP ── */
#btt { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:var(--green); color:#fff; border:none; border-radius:var(--r); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:900; opacity:0; visibility:hidden; transition:var(--tr); z-index:500; transform:translateY(8px); }
#btt.show { opacity:1; visibility:visible; transform:translateY(0); }
#btt:hover { background:var(--green-dk); transform:translateY(-2px); }

/* ── WHATSAPP ── */
#wa { position:fixed; bottom:5.5rem; right:2rem; width:44px; height:44px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,.35); transition:var(--tr); z-index:500; animation:wp 2.5s ease-in-out infinite; }
#wa:hover { transform:scale(1.12); }
@keyframes wp { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.35)} 50%{box-shadow:0 4px 36px rgba(37,211,102,.6)} }

/* ── GRIDS ── */
.g2   { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.g3   { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.g4   { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.gfit { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:2rem; }
.split    { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.split-32 { display:grid; grid-template-columns:1.3fr 1fr; gap:5rem; align-items:center; }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .split,.split-32 { grid-template-columns:1fr; gap:3rem; }
  .g4      { grid-template-columns:1fr 1fr; }
  .sb-grid { grid-template-columns:1fr 1fr; }
  .sb-item:nth-child(2){ border-right:none; }
  .sb-item:nth-child(3){ border-top:1px solid rgba(255,255,255,.2); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .cta-band { padding:4rem 2rem; }
}
@media(max-width:768px){
  .g2,.g3,.g4 { grid-template-columns:1fr; }
  .section { padding:4rem 0; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .f-bottom { flex-direction:column; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .cta-band { padding:2.5rem 1.2rem; }
  .sb-grid { grid-template-columns:1fr 1fr; }
}