/*
Theme Name: Select Consult
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Custom consulting WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: select-consult
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Include all your CSS here (paste your <style> contents) */
:root{--bg:#fbf8fc; --paper:#ffffff; --ink:#1e232a; --muted:#70747c; --brand:#dd6020; --brand-700:#c24f15; --accent:#dd6020; --slate:#273e81; --soft:#f2eef6; --ring:rgba(0,0,0,.08); --radius:22px; --radius-lg:28px; --shadow:0 10px 25px rgba(0,0,0,.06); --shadow-lg:0 18px 45px rgba(0,0,0,.1); --max:1200px}
*,*:before,*:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--slate); background:var(--bg)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(var(--max), 100% - 40px); margin-inline:auto}

/* Animations */
@keyframes fadeIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}
@keyframes float{0%{transform:translateY(0px)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0px)}}
.animate-fadeIn{animation:fadeIn 0.8s ease-out forwards}
.animate-float{animation:float 3s ease-in-out infinite}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.6); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid rgba(0,0,0,.05)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand .logo{width:250px; height:100%; border-radius:10px; display:grid; place-items:center;}
.brand .logo span{font-weight:900; color:#fff}
.menu{display:flex; align-items:center; gap:28px}
.menu a{font-weight:500; color:var(--muted); transition:color 0.3s ease}
.menu a.active, .menu a:hover{color:var(--ink)}
.nav-cta{display:flex; align-items:center; gap:10px}
.search{position:relative}
.search input{height:42px; width:220px; border-radius:14px; border:1px solid var(--ring); padding:0 42px 0 14px; background:#fff; transition:a l 0.3s ease}
.search input:focus{width:260px; outline:none; border-color:var(--brand)}
.search svg{position:absolute; right:12px; top:50%; translate:0 -50%; transition:all 0.3s ease}
.search input:focus + svg{stroke:var(--brand)}
.nav-btn{height:42px; padding:0 18px; border-radius:14px; background:var(--brand); color:#fff; font-weight:600; border:none; cursor:pointer; transition:all 0.3s ease}
.nav-btn:hover{background:var(--brand-700); transform:translateY(-2px)}
.burger{display:none; background:none; border:none}

/* Hero */
.hero{position:relative; padding:60px 0 30px; overflow:visible}
.hero-inner{display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center}
.badge{display:inline-block; font-size:13px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--ring); box-shadow:var(--shadow); animation:fadeIn 0.8s ease-out 0.2s forwards; opacity:0}
.hero h1{font-size:52px; line-height:1.05; margin:14px 0; letter-spacing:-.5px; animation:fadeIn 0.8s ease-out 0.4s forwards; opacity:0; text-transform: uppercase; }
.hero h1 .brandify{color:var(--brand)}
.sub{color:var(--muted); max-width:58ch; animation:fadeIn 0.8s ease-out 0.6s forwards; opacity:0}
.cta-row{display:flex; gap:12px; margin-top:22px; animation:fadeIn 0.8s ease-out 0.8s forwards; opacity:0;}
.btn{height:48px; padding:0 22px; border-radius:14px; border:0; cursor:pointer; font-weight:700; transition:all 0.3s ease}
.btn.primary{background:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-700); transform:translateY(-2px); box-shadow:0 10px 20px rgba(221,96,32,0.3)}
.btn.ghost{background:#fff; border:1px solid var(--ring)}
.btn.ghost:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px)}
.stats{display:flex; gap:24px; margin-top:26px; flex-wrap:wrap; animation:fadeIn 0.8s ease-out 1s forwards; opacity:0}
.stat{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:16px 18px; min-width:160px; box-shadow:var(--shadow); transition:all 0.3s ease}
.stat:hover{transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,0.1)}
.stat b{font-size:22px}
.stat small{display:block; color:var(--muted)}
.hero-visual{position:relative; animation:fadeIn 0.8s ease-out 1.2s forwards; opacity:0}
.card-vertical{position:relative; width:100%; height:550px; border-top-right-radius:var(--radius-lg); border-top-left-radius:50%; background:linear-gradient(180deg,#ffe9d5,#ffdca8 65%, #efefef 66%); padding:18px; display:flex; align-items:flex-end}
.portrait{position:absolute; inset:auto 0 0 auto; width:95%; translate:0 10px; animation:float 6s ease-in-out infinite}
.pill{position:absolute; z-index:1; right:20px; bottom:18px; background:#fff; border:1px solid var(--ring); border-radius:999px; padding:10px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; animation:fadeIn 0.8s ease-out 1.4s forwards; opacity:0}
.pill b{color:var(--brand)}
.shape-right{position:absolute; right:-60px; bottom:-40px; width:220px; height:220px; border-radius:40px; background:var(--brand); animation:fadeIn 0.8s ease-out 1.6s forwards; opacity:0}
.dots{position:absolute; inset:auto auto -24px -24px; width:220px; height:120px; opacity:.35; animation:fadeIn 0.8s ease-out 1.8s forwards; opacity:0}

/* Sections */
section{padding:80px 0}
.section-title{font-size:38px; line-height:1.15; margin:0 0 12px; padding: 5px 0px;text-transform: uppercase;}
.section-sub{color:var(--muted); max-width:62ch}
.promo{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center}
.promo .panel{transition:all 0.3s ease}
.promo .panel:hover{transform:translateY(-5px)}
.call-row{display:flex; align-items:center; gap:12px; margin-top:18px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px}
.card{background:#fff; border:1px solid var(--ring); border-radius:18px; padding:28px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:all 0.5s ease; height:300px}
.card .icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--soft); margin-bottom:12px; transition:all 0.5s ease}
.card h4{margin:6px 0; transition:all 0.5s ease}
.card p{color:var(--muted); transition:all 0.5s ease}
.card a{margin-top:10px; display:inline-block; font-weight:600; color:var(--brand); transition:all 0.5s ease}
.card::after{content:""; position:absolute; width:120px; height:120px; right:-40px; bottom:-40px; border-radius:50%; background:rgba(221,96,32,.13); transition:all 0.5s ease}
.card:hover{height:340px; background-size:cover; background-position:center; color:white}
.card:hover .icon, .card:hover p, .card:hover a, .card:hover::after{opacity:0}
.card:hover h4{color:white; font-size:24px; position:absolute; bottom:28px; left:28px; text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.card:nth-child(1):hover {  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1551836022-4c4c79ecde51?q=80&w=1000&auto=format&fit=crop'); /* Business Strategy */}
.card:nth-child(2):hover {  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1000&auto=format&fit=crop'); /* Management Consulting */}
.card:nth-child(3):hover {  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80'); /* Financial Advisory */}
.card:nth-child(4):hover {  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1000&auto=format&fit=crop'); /* Human Capital */}

/* Clients */
.clients-section{background:var(--soft); padding:60px 0; margin:60px 0}
.clients-heading{text-align:center; margin-bottom:40px}
.clients-carousel{padding:20px 0}
.client-logo{height:80px; display:flex; align-items:center; justify-content:center; filter:grayscale(100%); opacity:0.6; transition:all 0.3s ease}
.client-logo:hover{filter:grayscale(0%); opacity:1}
.client-logo img{max-height:50px; max-width:150px}

/* About */
.about{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center}
.about .photo{border-radius:22px; overflow:hidden; background:linear-gradient(0deg,rgba(221,96,32,.15),rgba(221,96,32,0)); padding:10px; transition:all 0.5s ease}
.about .photo:hover{transform:translateY(-5px) rotate(2deg)}
.about .photo img{border-radius:18px}
.note{display:inline-block; padding:8px 12px; border-radius:999px; border:1px dashed rgba(0,0,0,.14); color:var(--brand); font-weight:600; background:#fff}

/* Team */
.team-strip{display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:center}
.team-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.person{background:#fff; border:1px solid var(--ring); border-radius:18px; padding:30px; box-shadow:var(--shadow); transition:all 0.5s ease; position:relative; overflow:hidden}
.person img{border-radius:14px; height:400px; width:100%; object-fit:cover; transition:all 0.5s ease}
.person h3{margin:10px 0 4px}
.person .bio{position:absolute; bottom:-100%; left:0; right:0; background:rgba(221,96,32,0.9); color:white; padding:20px; transition:all 0.5s ease; border-radius:14px 14px 18px 18px}
.person:hover{transform:translateY(-10px)}
.person:hover img{filter:brightness(0.7)}
.person:hover .bio{bottom:0}
.ticks{display:flex; gap:16px; flex-wrap:wrap; margin:12px 0}
.tick{display:flex; gap:8px; align-items:center; font-size:14px}
.team-carousel{position:relative}
.swiper{padding:20px 10px 60px}
.swiper-button-next, .swiper-button-prev{color:var(--brand); background:white; width:40px; height:40px; border-radius:50%; box-shadow:var(--shadow)}
.swiper-button-next:after, .swiper-button-prev:after{font-size:18px; font-weight:bold}
.swiper-pagination-bullet{width:12px; height:12px; background:var(--muted); opacity:0.5}
.swiper-pagination-bullet-active{background:var(--brand); opacity:1}

/* Dark Hero */
.dark-hero{position:relative; color:#fff; background:var(--slate) center/cover no-repeat; border-radius:28px; overflow:hidden}
.dark-hero .mask{position:absolute; inset:0; background:rgba(39,62,129,.85)}
.dark-hero .inner{position:relative; padding:70px 50px}
.dark-hero h2{font-size:44px; margin:0 0 6px}
.dark-hero p{color:#e4e7ee}
.dark-hero .btn{background:#fff; color:#111; transition:all 0.3s ease}
.dark-hero .btn:hover{background:var(--accent)}
.dotgrid{position:absolute; right:40px; top:40px; opacity:.35}

/* Welcome Section */
.welcome-section{position:relative; padding:100px 0; background:linear-gradient(rgba(39,62,129,0.8), rgba(39,62,129,0.8)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1471&auto=format&fit=crop') center/cover no-repeat; color:white; text-align:center; overflow:hidden;}
.welcome-content{position:relative; z-index:2; max-width:800px; margin:0 auto}
.welcome-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px}
.welcome-card{background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:30px; text-align:center; transition:all 0.3s ease}
.welcome-card:hover{transform:translateY(-10px); background:rgba(255,255,255,0.15); box-shadow:0 15px 30px rgba(0,0,0,0.2)}
.welcome-card .icon{width:70px; height:70px; border-radius:50%; background:rgba(221,96,32,0.2); display:grid; place-items:center; margin:0 auto 20px}
.welcome-card h3{margin:0 0 15px; font-size:22px}
.welcome-card p{color:rgba(255,255,255,0.8); margin:0}

/* Values Section */
.values-section{padding:100px 0; background:var(--soft)}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:50px}
.value-card{background:#fff; border-radius:20px; padding:30px; box-shadow:var(--shadow); transition:all 0.3s ease; text-align:center}
.value-card:hover{transform:translateY(-10px); box-shadow:var(--shadow-lg)}
.value-icon{width:80px; height:80px; border-radius:50%; background:rgba(221,96,32,0.1); display:grid; place-items:center; margin:0 auto 20px}
.value-card h3{margin:0 0 15px; color:var(--slate)}
.value-card p{color:var(--muted); margin:0}

/* Feature Bar */
.featurebar{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px}
.featurebar .feature{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:20px; display:flex; gap:12px; align-items:flex-start; transition:all 0.3s ease}
.featurebar .feature:hover{transform:translateY(-5px); box-shadow:var(--shadow)}

/* Article Grid */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
.article-card{background:#fff; border:1px solid var(--ring); border-radius:18px; padding:28px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:all 0.3s ease}
.article-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.article-card .thumb{height:180px; border-radius:12px; overflow:hidden; margin-bottom:16px}
.article-card h4{margin:6px 0; font-size:18px}
.article-card p{color:var(--muted); margin-bottom:16px}
.article-card .btn{height:40px; padding:0 18px; border-radius:12px; background:var(--brand); color:#fff; font-weight:600; border:none; cursor:pointer; transition:all 0.3s ease; display:inline-flex; align-items:center; gap:6px}
.article-card .btn:hover{background:var(--brand-700); transform:translateY(-2px)}
.article-card .btn svg{transition:transform 0.3s ease}
.article-card .btn:hover svg{transform:translateX(4px)}
.qr{background:#fff; border:1px dashed rgba(0,0,0,.2); border-radius:16px; padding:20px; display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center}
.contact-card{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:20px}

/* Contact Section */
.contact-section{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.contact-info{padding-right:30px}
.contact-info h3{font-size:32px; margin-bottom:20px}
.contact-detail{display:flex; align-items:center; gap:15px; margin-bottom:20px}
.contact-detail .icon{width:50px; height:50px; border-radius:12px; background:var(--soft); display:grid; place-items:center}
.contact-form{background:#fff; border-radius:20px; padding:30px; box-shadow:var(--shadow)}

/* Footer */
.site-footer{background:#1f232a;color:#cfd2d9;padding:80px 0px 10px 0px;}
.footer-container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}
.footer-left{flex:2}
.footer-right{flex:2;text-align:right}
.footer-nav a{color:var(--brand);text-decoration:none;margin:0 5px;transition:color 0.3s}
.footer-nav a:hover{color:var(--brand-700)}
.footer-logo{font-weight:700;color:#fff}
.copyright{border-top: 1px solid #444; padding: 10px 0;}
.copyright a{color:var(--brand);text-decoration:none;transition:color 0.3s}
.copyright a:hover{color:var(--brand-700)}
@media (max-width:768px){.footer-row{flex-direction:column;text-align:center}.footer-right{text-align:center}}

/* Utilities */
.row{display:flex; align-items:center; gap:14px}
.dotsep{display:inline-flex; gap:8px; align-items:center}
.dotsep i{width:6px; height:6px; background:var(--brand); border-radius:50%}
.tag{display:inline-block; font-weight:600; font-size:12px; padding:6px 10px; background:var(--soft); border-radius:999px}

/* Responsive */
@media (max-width:1080px){.hero-inner{grid-template-columns:1fr} .card-vertical{position:relative; width:100%; height:420px} .shape-right{right:-40px} .promo{grid-template-columns:1fr} .about{grid-template-columns:1fr} .team-strip{grid-template-columns:1fr} .article-grid{grid-template-columns:repeat(2,1fr)} .welcome-cards{grid-template-columns:repeat(2,1fr)} .values-grid{grid-template-columns:repeat(2,1fr)} .featurebar{grid-template-columns:repeat(2,1fr)} .cards{grid-template-columns:repeat(2,1fr)} .contact-section{grid-template-columns:1fr} .nav .menu{display:none} .burger{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--ring)} .search{display:none}}
@media (max-width:640px){.hero h1{font-size:40px} .section-title{font-size:30px} .stats{gap:12px} .cards{grid-template-columns:1fr} .team-cards{grid-template-columns:1fr} .article-grid{grid-template-columns:1fr} .welcome-cards{grid-template-columns:1fr} .values-grid{grid-template-columns:1fr} .featurebar{grid-template-columns:1fr}}

/* Mobile Menu */
.mobile-menu{position:fixed; inset:0 0 0 auto; width:min(86vw, 420px); background:#fff; border-left:1px solid var(--ring); padding:18px; translate:100% 0; transition:translate .35s ease; z-index:60}
.mobile-menu.open{translate:0 0}
.mobile-menu a{display:block; padding:12px 10px; border-radius:10px; color:var(--muted); transition:all 0.3s ease}
.mobile-menu a:hover{background:var(--soft); color:var(--ink)}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:55}
.overlay.show{opacity:1; pointer-events:auto}

.swiper-wrapper{padding-bottom:60px !important}
.swiper-pagination-bullet-active{background: var(--brand) !important;}
.swiper-pagination-bullet{width: 12px !important; height: 12px !important;}