/*
Theme Name: Company Site
Description: Responsive business theme with banner slider, services, gallery, blog and contact. Admin-managed via custom post types and the Customizer.
Version: 1.0
Text Domain: companysite
*/
:root{--ink:#0f2a26;--teal:#1f6f5f;--saf:#f2a93b;--mist:#eef3f1;--line:#d8e2de;--w:#fff;--r:6px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}h3{font-size:1.3rem}
img{max-width:100%;height:auto;display:block}a{color:var(--teal)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sec{padding:80px 0}.sec.alt{background:var(--mist)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sec-head p{max-width:46ch;margin:0;color:#44625c}
.btn{display:inline-block;background:var(--saf);color:var(--ink);padding:13px 26px;border-radius:99px;font-weight:700;text-decoration:none;border:2px solid var(--saf);cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.wa{background:#1fa855;border-color:#1fa855;color:#fff}.btn.wa:hover{background:#12803f;border-color:#12803f}
.btn-sm{padding:9px 20px;font-size:.95rem}
:focus-visible{outline:3px solid var(--saf);outline-offset:2px}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:72px}
.brand{font:700 1.4rem 'Bricolage Grotesque',sans-serif;color:var(--ink);text-decoration:none}
.brand img{max-height:48px;width:auto}
.nav{margin-left:auto}.nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}.nav a:hover,.nav .current-menu-item>a{color:var(--teal)}
.nav-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:99px;padding:6px 16px;font:inherit;font-weight:600}
/* slider */
.slider{position:relative;overflow:hidden;background:var(--ink)}
.slide{display:none;min-height:min(78vh,660px);background-size:cover;background-position:center;position:relative;color:#fff;align-items:center}
.slide.on{display:flex}.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,42,38,.88),rgba(15,42,38,.35))}
.slide.g0{background-image:linear-gradient(135deg,#0f2a26,#1f6f5f)}.slide.g1{background-image:linear-gradient(135deg,#1f6f5f,#0f2a26 70%)}.slide.g2{background-image:linear-gradient(135deg,#0f2a26,#7a5a14)}
.slide .wrap{position:relative;width:100%}.slide-in{max-width:620px}.slide-in p{font-size:1.2rem;margin:0 0 28px;opacity:.92}
.sl-nav{position:absolute;bottom:24px;right:24px;display:flex;gap:8px;z-index:2}
.sl-nav button{width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25);color:#fff;font-size:1.2rem;cursor:pointer}
.sl-nav button:hover{background:var(--saf);color:var(--ink);border-color:var(--saf)}
/* layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}.imgs img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%}.imgs img:nth-child(2){margin-top:40px}
.ph{background:linear-gradient(135deg,var(--teal),var(--ink));aspect-ratio:3/4;border-radius:var(--r)}
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:10/7;background:linear-gradient(135deg,var(--mist),var(--line));overflow:hidden}.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:22px;display:flex;flex-direction:column;gap:6px;flex:1}.card .body p{margin:0;color:#44625c}
.card a.more{margin-top:auto;padding-top:10px;font-weight:700;text-decoration:none}
.card h3 a{color:var(--ink);text-decoration:none}.date{font-size:.9rem;color:#6b837d}
.gal{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.gal a{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r);background:var(--line)}.gal img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.gal a:hover img{transform:scale(1.06)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.pills a,.pills button{padding:7px 18px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font:600 .95rem inherit;font-family:inherit;cursor:pointer}
.pills .on,.pills a:hover,.pills button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta{background:var(--ink);color:#fff;text-align:center;padding:80px 0}.cta p{max-width:52ch;margin:0 auto 28px;opacity:.85}.cta .btn.ghost{color:#fff}
.page-head{background:var(--ink);color:#fff;padding:64px 0}.page-head p{margin:0;max-width:60ch;opacity:.85;font-size:1.15rem}
.content{max-width:760px}.content img{border-radius:var(--r)}.content.full{max-width:none}
.timeline{border-left:3px solid var(--saf);padding-left:28px;display:grid;gap:26px}.timeline b{font:700 1.3rem 'Bricolage Grotesque',sans-serif;display:block}
.vals{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.vals div{padding:26px;background:#fff;border-radius:var(--r);border:1px solid var(--line)}
.side{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}.box{background:var(--mist);padding:26px;border-radius:var(--r);position:sticky;top:96px;display:grid;gap:12px}.box .btn{text-align:center}
.tools{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px}
.sform{display:flex;gap:8px}.sform input{padding:10px 16px;border:1px solid var(--line);border-radius:99px;font:inherit;min-width:220px}
form.contact{display:grid;gap:14px}form.contact input,form.contact textarea{width:100%;padding:13px 15px;border:1px solid #b9c9c4;border-radius:var(--r);font:inherit}
.hp{position:absolute;left:-9999px}.note{padding:14px 18px;border-radius:var(--r);margin-bottom:18px}.ok{background:#dff3e6}.bad{background:#fbe0dc}
.map iframe{width:100%;height:340px;border:0;border-radius:var(--r);margin-top:20px}
.info p{margin:.2em 0 1em}.pagination{margin-top:36px}.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}.pagination a,.pagination span{padding:8px 15px;border:1px solid var(--line);border-radius:99px;text-decoration:none}.pagination .current{background:var(--ink);color:#fff}
/* footer */
.foot{background:#0a1b18;color:#cfe0db;padding:64px 0 24px}.foot a{color:#cfe0db}.foot h4{color:#fff}.foot ul{list-style:none;padding:0;margin:0}
.fg{display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1.2fr 1fr}.copy{border-top:1px solid #1e3a35;margin-top:40px;padding-top:20px;font-size:.9rem}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;background:#1fa855;color:#fff;border-radius:99px;padding:12px 20px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.lb{position:fixed;inset:0;background:rgba(5,15,13,.93);display:none;align-items:center;justify-content:center;z-index:100}.lb.on{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:4px}.lb button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:14px}
.lb .x{top:8px;right:14px}.lb .p{left:8px}.lb .n{right:8px}
@media(max-width:860px){.split,.side,.fg{grid-template-columns:1fr}.sec{padding:56px 0}.nav-toggle{display:block}
.nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 20px}.nav.open{display:block}.nav ul{flex-direction:column;gap:14px}
.bar>.btn{display:none}.box{position:static}.imgs img:nth-child(2){margin-top:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* css code faq */

.blog-faq {
    margin-top: 35px;
}

.blog-faq h2 {
    margin-bottom: 20px;
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fff;
}

.faq-item summary {
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    float: right;
    font-size: 20px;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-answer {
    padding: 0 18px 16px;
    line-height: 1.7;
}
/* ===== Contact form: design + responsive ===== */
.split>*{min-width:0}
.sec form.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.sec form.contact label{display:grid;gap:6px;font-weight:600;min-width:0;margin:0}
.sec form.contact label:has(textarea),
.sec form.contact button{grid-column:1/-1}
.sec form.contact input,
.sec form.contact textarea,
.sec form.contact select{
  width:100%;max-width:100%;min-height:50px;padding:12px 15px;
  border:1px solid #b9c9c4;border-radius:8px;background-color:#fff;
  color:#0f2a26;font:inherit;font-size:16px;font-weight:400;line-height:1.4;
  box-shadow:none;margin:0
}
.sec form.contact textarea{min-height:130px;resize:vertical}
.sec form.contact select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231f6f5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center
}
.sec form.contact input:focus,
.sec form.contact textarea:focus,
.sec form.contact select:focus{outline:none;border-color:#1f6f5f;box-shadow:0 0 0 3px rgba(31,111,95,.18)}
.sec form.contact button{width:100%;padding:15px 26px}
@media(max-width:640px){
  .sec form.contact{grid-template-columns:1fr;gap:14px}
}
@media(min-width:641px){
  .sec form.contact button{width:auto;justify-self:start}
}