/* ==========================================================================
   SMP Constructions, Brickon layout
   Tokens follow the Brickon kit: Urbanist headings, DM Sans text,
   #131720 dark, #6B6C6C text, 1242px container, 124px section rhythm.
   ========================================================================== */

@font-face { font-family: "Urbanist"; src: url(../fonts/urbanist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url(../fonts/urbanist-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dmsans.woff2) format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

:root {
	--accent: #1f9a70;
	--soft: #f3faf6;
	--dark: #131720;
	--text: #6b6c6c;
	--gray: #c1c1c1;
	--border: #d1d1d1;
	--white: #fff;
	--white-10: rgba(255, 255, 255, .1);
	--white-5: rgba(255, 255, 255, .05);
	--head: "Urbanist", "Helvetica Neue", Arial, sans-serif;
	--body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	--wrap: 1242px;
	--pad: 20px;
	--section: 124px;
	--shadow: 0 4px 16px rgba(19, 23, 32, .2);
}

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 24px; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; font-family: var(--head); color: var(--dark); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--dark); color: #fff; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

.h1-page { font-size: 60px; line-height: 72px; font-weight: 500; }
.h2 { font-size: 52px; line-height: 68px; font-weight: 600; }
.h3 { font-size: 36px; line-height: 48px; }
.h4 { font-size: 28px; line-height: 36px; }
.h5 { font-size: 24px; line-height: 32px; }
.text-large { font-size: 20px; line-height: 32px; }
.text-medium { font-size: 18px; line-height: 26px; }
.muted { color: var(--text); }
.accent-word { color: var(--accent); font-style: italic; font-weight: inherit; }
.center { text-align: center; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: calc(860px + var(--pad) * 2); }
.section { position: relative; padding: var(--section) 0; }
.pt-0 { padding-top: 0; }
.pt-sm { padding-top: 68px; }
.soft { background: var(--soft); }
.dark { background: var(--dark); color: var(--gray); overflow: hidden; }
.dark .h2, .dark h3 { color: var(--white); }

/* Pill tag --------------------------------------------------------------- */
.pill { display: inline-block; padding: 8px 24px; border: 1px solid var(--border); border-radius: 32px; font-size: 16px; line-height: 24px; color: var(--dark); background: var(--white); }
.pill--soft { background: var(--soft); }
.pill--light { background: transparent; color: var(--white); border-color: var(--border); }
.pill--white { background: var(--white); }

/* Buttons ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 12px 12px 24px; border-radius: 32px; border: 1px solid transparent; font-family: var(--body); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -.02em; cursor: pointer; transition: transform .3s, background-color .3s, color .3s, border-color .3s; }
.btn:hover { transform: scale(.9); }
.btn__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--dark); transition: background-color .2s, color .2s; }
.btn--accent { background: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--dark); color: var(--white); }
.btn--accent:hover .btn__icon { background: var(--accent); color: var(--white); }
.btn--white { background: var(--white); color: #222; border-color: var(--white); padding: 12px 28px; }
.btn--white:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--outline { background: transparent; color: var(--dark); border-color: var(--border); padding: 12px 28px; }
.btn--outline:hover { border-color: var(--dark); color: var(--dark); }
.btn--sm { font-size: 16px; padding: 12px 20px; gap: 6px; border-radius: 58px; }
.btn--block { width: 100%; padding: 13px 24px; font-size: 18px; border-radius: 100px; }
button.btn--accent:not(:has(.btn__icon)), .btn--accent.btn--block { padding: 13px 28px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 32px 0; }
.round-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--dark); cursor: pointer; transition: .2s; }
.round-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.round-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.round-btn--accent:hover { background: var(--dark); border-color: var(--dark); }

/* Header ----------------------------------------------------------------- */
.site-header { position: relative; z-index: 50; background: var(--soft); }
.site-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(19, 23, 32, .35); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.site-header__brand img, .custom-logo { width: auto; height: var(--logo-h, 60px); max-width: 260px; object-fit: contain; }
.primary-nav .menu { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.primary-nav .menu > li { position: relative; }
.primary-nav a { display: block; padding: 8px 14px; font-size: 18px; line-height: 26px; color: var(--dark); }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a, .primary-nav .current-menu-ancestor > a { color: var(--accent); }
.primary-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; list-style: none; margin: 0; padding: 10px 0; background: var(--white); box-shadow: var(--shadow); border-radius: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; }
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-nav .sub-menu a { font-size: 16px; padding: 8px 20px; }
.primary-nav__mobile-extra { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 24px; }
.header-phone { font-size: 18px; line-height: 26px; color: #1d2025; }
.nav-toggle { display: none; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--dark); }
.nav-toggle .icon-close { display: none; }

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; background: var(--soft); padding: 60px 0 60px; overflow: hidden; }
.hero__sketch { position: absolute; right: 0; top: 20px; width: 40%; pointer-events: none; }
.hero__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.hero__title { width: 695px; max-width: 100%; margin: 16px 0 0; font-size: 80px; line-height: 96px; font-weight: 500; }
.hero__row { position: relative; z-index: 2; margin-top: 48px; min-height: 552px; }
.hero__side { position: relative; z-index: 3; width: 339px; }
.hero__arrow { display: block; width: 72px; height: 72px; color: var(--dark); margin-bottom: 74px; }
.hero__side .text-medium { margin: 0 0 32px; color: var(--text); }
.hero__media { position: absolute; right: 0; top: 0; width: 970px; max-width: calc(100% - 390px); }
.hero__media img { width: 100%; height: 552px; object-fit: cover; }
.circle-link { position: absolute; right: 148px; top: -110px; z-index: 4; display: grid; place-items: center; width: 158px; height: 158px; border-radius: 50%; background: var(--accent); border: 5px solid var(--white); color: var(--white); transition: transform .4s; }
.circle-link::before { content: ""; position: absolute; left: 12px; bottom: 15px; width: 85%; height: 50%; border: 2px solid var(--white); border-top: 0; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; opacity: .9; }
.circle-link__text { position: absolute; top: 14px; left: 14px; width: 120px; height: 120px; }
.circle-link__text text { font-family: var(--body); font-size: 13px; letter-spacing: 1.6px; fill: var(--white); }
.circle-link__arrow { position: relative; z-index: 1; display: grid; place-items: center; transition: transform .4s; }
.circle-link:hover { color: var(--white); }
.circle-link:hover .circle-link__arrow { transform: rotate(45deg); }

/* Section heads ---------------------------------------------------------- */
.sec-head { margin-bottom: 44px; }
.sec-head .h2, .sec-head .h1-page { margin: 16px 0 0; max-width: 760px; }
.sec-head--narrow .h2 { max-width: 602px; }
.sec-head--center { text-align: center; }
.sec-head--center .h2 { margin-left: auto; margin-right: auto; }
.sec-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.sec-head--split .h2 { max-width: 560px; }
.sec-head__aside { max-width: 440px; margin: 0; }

/* About ------------------------------------------------------------------ */
.about__grid { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.about__media { position: relative; width: 40.91%; min-height: 602px; display: flex; align-items: flex-end; justify-content: flex-end; background: center / cover no-repeat; }
.float-card { width: 282px; margin: 0 -34px 24px 0; padding: 24px 16px; background: var(--white); border-radius: 8px; box-shadow: var(--shadow); }
.float-card__logos { display: flex; margin-bottom: 12px; }
.float-card__logos span { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; border-radius: 50%; background: var(--white); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.15); overflow: hidden; }
.float-card__logos img { width: 30px; height: 30px; object-fit: contain; }
.float-card__num { margin: 0; font-family: var(--head); font-size: 24px; line-height: 24px; font-weight: 600; color: var(--dark); }
.float-card__num b, .counter__num b { color: var(--accent); font-weight: inherit; margin-left: 2px; }
.counter__num b:not(:only-child) { }

.float-card__label { margin: 4px 0 0; }
.about__copy { width: 53.66%; }
.about__copy .h2 { margin: 16px 0 0; max-width: 559px; line-height: 72px; font-weight: 500; }
.about__copy { display: flex; flex-direction: column; align-items: flex-start; }
.lead-text { margin-top: 18px; max-width: 559px; }
.counters { display: flex; gap: 12px; margin: 34px 0 42px; }
.counter { width: 214px; padding: 16px 16px 16px 32px; border: 1px solid var(--border); border-radius: 12px; }
.counter__num { margin: 0 0 4px; font-family: var(--head); font-size: 56px; line-height: 1.1; font-weight: 600; color: var(--dark); }
.counter__label { margin: 0; }

/* Services --------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.svc-card { display: flex; flex-direction: column; justify-content: space-between; background: var(--soft); height: 100%; }
.svc-card__top { padding: 28px 20px; }
.svc-card__row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.svc-card__icon { color: var(--accent); }
.svc-card__title { margin: 0; font-size: 20px; line-height: 28px; }
.svc-card__title a { color: var(--dark); }
.svc-card__title a:hover { color: var(--accent); }
.svc-card__img { width: 100%; aspect-ratio: 297 / 220; object-fit: cover; }
.svc-grid--all { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
.svc-anchor { scroll-margin-top: 130px; display: flex; flex-direction: column; }
.svc-anchor .svc-card { height: auto; flex: none; }
.svc-anchor__text { margin: 16px 0 0; }

/* Recent work (dark) ----------------------------------------------------- */
.decor { position: absolute; color: rgba(255, 255, 255, .14); pointer-events: none; }
.decor--circle { width: 260px; right: 6%; top: 80px; animation: left-circle 4s ease-in-out infinite alternate; transform-origin: center; }
.decor--star { width: 56px; right: 18%; top: 150px; color: var(--accent); animation: anim-scale 3s ease infinite alternate-reverse; }
@keyframes left-circle { from { transform: scale(1); } to { transform: scale(.6); } }
@keyframes anim-scale { from { transform: scale(1); } to { transform: scale(.5); } }
.work .wrap { position: relative; z-index: 1; }
.work__list { width: 80.4%; margin-top: 48px; display: grid; gap: 24px; }
.work-box { display: flex; gap: 24px; padding: 16px 55px 16px 17px; background: var(--white-10); }
.work-box__media { width: 45.1%; flex: none; }
.work-box__media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.work-box__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.work-box h3 { font-size: 28px; line-height: 36px; color: var(--white); margin-bottom: 12px; }
.work-box__body > p { color: #f2ffff; }
.work-box__meta { display: flex; gap: 30px; margin: 36px 0 40px; }
.work-box__meta dt { font-size: 12px; line-height: 16px; color: rgba(242, 255, 255, .6); }
.work-box__meta dd { margin: 2px 0 0; font-size: 18px; line-height: 26px; color: #f2ffff; }
.work__foot { width: 79.4%; margin-top: 68px; }
.work__foot .text-large { color: var(--white); margin-bottom: 32px; }

/* Capabilities (pricing layout) ------------------------------------------ */
.plans { padding-top: 20px; padding-bottom: 132px; }
.work + .plans { padding-top: 20px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.plan { display: flex; flex-direction: column; justify-content: space-between; background: var(--white-5); padding-top: 36px; }
.plan__body { padding: 0 24px 40px; }
.plan__head { display: flex; align-items: center; gap: 16px; }
.plan__icon { display: grid; place-items: center; width: 64px; height: 64px; flex: none; color: var(--white); }
.plan h3 { font-size: 24px; line-height: 32px; margin-bottom: 4px; }
.plan__desc { color: #ddd; margin: 0; font-size: 16px; }
.plan__price { margin: 32px 0; font-family: var(--head); font-size: 48px; line-height: 56px; font-weight: 600; color: var(--white); }
.plan__price small { font-size: 24px; font-weight: 500; }
.plan__note { margin: 32px 0; color: #ddd; }
.plan__inc { margin: 32px 0 16px; color: #fefbf7; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plan__list li { display: flex; gap: 10px; align-items: center; color: var(--white); }
.plan__list .icon { color: var(--accent); flex: none; }
.plan__line { margin-top: 32px; }
.plan__line p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 18px; line-height: 26px; color: var(--white); }
.plan__line p span { flex: 1; display: flex; align-items: center; gap: 10px; }
.plan__line p span::after { content: ""; flex: 1; border-top: 1px dashed rgba(255, 255, 255, .3); }
.plan__line p b { font-weight: 400; }
.plan__line small { font-size: 14px; line-height: 20px; color: #ddd; }
.plan__foot { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px; background: rgba(255, 255, 255, .16); color: var(--white); font-size: 18px; }
.plan__foot:hover { background: var(--accent); color: var(--white); }

/* Recognition (Jeg Kit testimonial style-2) ----------------------------- */
.recog { background: var(--dark) var(--bg) center / cover no-repeat; }
.recog__card { position: relative; width: 546px; max-width: 100%; padding: 40px 40px 48px; background: var(--soft); overflow: hidden; }
.recog__card::after { content: ""; position: absolute; right: 0; top: 0; width: 263px; height: 263px; background: url(../images/logo-icon.png) top right / 70% no-repeat; opacity: .07; pointer-events: none; }
.recog__track { position: relative; display: grid; }
.recog__slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.recog__slide.is-active { opacity: 1; visibility: visible; }
.recog__slide figcaption { display: flex; align-items: center; gap: 12px; }
.recog__avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: var(--white); }
.recog__avatar img { width: 100%; height: 100%; object-fit: cover; }
.recog__slide figcaption strong { display: block; margin-bottom: 6px; font-family: var(--head); font-size: 24px; line-height: 28px; font-weight: 600; color: var(--dark); }
.recog__slide blockquote { margin: 46px 0 78px; font-size: 20px; line-height: 32px; color: var(--dark); }
.recog__controls { position: absolute; left: 40px; bottom: 48px; display: flex; align-items: center; gap: 24px; }
.pill-arrow { display: grid; place-items: center; padding: 8px 24px; border-radius: 35px; border: 1px solid var(--border); background: transparent; color: var(--dark); cursor: pointer; transition: .3s; }
.pill-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.recog__dots { display: flex; gap: 12px; }
.recog__dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: #dbdddf; cursor: pointer; transition: background-color .3s; }
.recog__dots button.is-active { background: var(--accent); }

/* Clients marquee -------------------------------------------------------- */
.clients { padding-bottom: 0; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0 10px; }
.marquee li { display: grid; place-items: center; width: 196px; height: 104px; padding: 16px 24px; background: var(--soft); border-radius: 12px; }
.marquee img { max-height: 60px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Blog (Jeg Kit post block type-2) -------------------------------------- */
.blog__title { max-width: 494px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 24px; border: 1px solid #e2e0e0; background: var(--white); }
.post-card__media { display: block; width: 100%; height: 286px; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__cat { margin: 24px 0 12px; padding: 7px 20px; border: 1px solid var(--border); border-radius: 32px; font-size: 14px; line-height: 20px; color: var(--dark); }
.post-card__cat:hover { border-color: var(--accent); color: var(--accent); }
.post-card__title { margin: 0; font-size: 32px; line-height: 44px; font-weight: 500; }
.post-card__title a { color: var(--dark); }
.post-card__title a:hover { color: var(--accent); }
.post-card__foot { width: 100%; margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
.post-card__foot time { font-size: 20px; line-height: 32px; font-weight: 500; color: var(--dark); }
.post-card .round-btn { width: 40px; height: 40px; }

/* CTA -------------------------------------------------------------------- */
.cta { position: relative; background: var(--soft); overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(19, 23, 32, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 23, 32, .04) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.cta__grid { position: relative; display: flex; align-items: center; }
.cta__media { position: relative; width: 52.42%; margin-right: 51px; padding-top: 90px; }
.cta__media > img { width: 100%; }
.cta__bird { position: absolute; color: var(--dark); }
.cta__bird svg { display: block; width: 100%; }
.cta__bird--group { right: -10px; top: 40px; width: 150px; }
.cta__bird--a { right: 87px; top: 160px; width: 79px; }
.cta__bird--b { left: 60px; top: 160px; width: 79px; }
.cta__bird.is-animated svg { animation: anim-scale-down 3s ease infinite alternate-reverse; transform-origin: top; }
@keyframes anim-scale-down { from { transform: translateY(0) scale(1); } to { transform: translateY(50px) scale(.5); } }
.cta__copy { width: 31.9%; flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 60px 0; }
.cta__copy .h2 { font-weight: 500; }
.cta__copy .accent-word { font-weight: 700; }
.cta__copy .text-medium { width: 307px; max-width: 100%; margin: 16px 0 32px; }

/* Inner page hero -------------------------------------------------------- */
.page-hero { position: relative; background: var(--soft); padding: 68px 0 0; overflow: hidden; }
.page-hero__sketch { position: absolute; right: 0; top: 0; width: 46%; max-width: 760px; opacity: .55; pointer-events: none; }
.page-hero__head { position: relative; z-index: 1; padding-bottom: 40px; }
.page-hero h1 { margin: 16px 0 0; font-size: 60px; line-height: 72px; font-weight: 500; max-width: 820px; }
.page-hero__lead { margin: 16px 0 0; max-width: 620px; font-size: 18px; line-height: 26px; }
.page-hero__media { position: relative; z-index: 1; margin: 0; }
.page-hero__media img { width: 100%; height: 520px; object-fit: cover; }
.page-hero:not(:has(.page-hero__media)) { padding-bottom: 64px; }

/* About template --------------------------------------------------------- */
.about-story__grid { display: flex; gap: 68px; align-items: flex-start; }
.about-story__counters { width: 268px; flex: none; display: grid; gap: 12px; }
.about-story__counters .counter { width: 100%; }
.about-story__quote { color: var(--accent); display: block; margin-bottom: 40px; }
.about-story__text .h3 { font-weight: 500; }
.about-story__body { margin-top: 28px; }
.signature { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.signature img { width: 64px; height: 64px; padding: 10px; border-radius: 50%; background: var(--soft); object-fit: contain; }
.signature strong { display: block; font-family: var(--head); font-size: 24px; line-height: 32px; color: var(--dark); }
.belief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; max-width: 1000px; margin: 0 auto; }
.belief { text-align: left; }
.belief__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--soft); color: var(--accent); margin-bottom: 14px; }
.belief p { margin: 0; }
.achieve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.achieve { padding: 28px 24px; background: var(--white-10); }
.achieve strong { display: block; font-family: var(--head); font-size: 44px; line-height: 52px; font-weight: 600; color: var(--white); margin-bottom: 12px; }
.achieve p { margin: 0; color: #ddd; }
.record-list { list-style: none; padding: 0; margin: 48px 0 0; display: flex; flex-wrap: wrap; gap: 16px 40px; color: var(--white); }
.record-list li { display: flex; gap: 10px; align-items: center; }
.record-list .icon { color: var(--accent); }
.cert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.cert { margin: 0; padding: 16px; background: var(--soft); }
.cert img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--white); }
.cert figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--dark); font-weight: 500; }
.equipment { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.equipment__group { background: var(--white); border-radius: 12px; overflow: hidden; }
.equipment__group summary { display: flex; align-items: center; padding: 20px 24px; cursor: pointer; list-style: none; font-family: var(--head); font-size: 20px; font-weight: 600; color: var(--dark); }
.equipment__group summary::-webkit-details-marker { display: none; }
.equipment__group summary span { margin-left: auto; font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--text); }
.equipment__group summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 16px; border-radius: 50%; border: 1px solid var(--border); font-family: var(--body); font-weight: 400; }
.equipment__group[open] summary::after { content: "–"; background: var(--accent); border-color: var(--accent); color: var(--white); }
.equipment table { width: 100%; border-collapse: collapse; }
.equipment th { text-align: left; font-size: 12px; font-weight: 500; padding: 8px 24px; background: var(--soft); }
.equipment td { padding: 10px 24px; border-top: 1px solid #eee; color: var(--dark); }
.equipment td:last-child, .equipment th:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.org__top { display: flex; justify-content: center; gap: 12px; margin-bottom: 28px; }
.org__top span { padding: 10px 28px; border-radius: 32px; background: var(--dark); color: var(--white); font-weight: 500; }
.org__top span + span { background: var(--accent); }
.org__depts { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; padding-top: 28px; border-top: 1px solid var(--border); }
.org__dept { padding: 16px; background: var(--soft); border-radius: 12px; font-size: 14px; line-height: 20px; }
.org__dept strong { display: block; margin-bottom: 8px; font-family: var(--head); font-size: 16px; color: var(--dark); }
.org__dept ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 68px; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.consultants { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.consultants .h2 { margin-top: 16px; }
.consultant-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.consultant-list li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--dark); }

/* Projects --------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.filters__group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 24px; border-radius: 32px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: var(--white); cursor: pointer; transition: .2s; }
.chip span { margin-left: 6px; opacity: .6; font-size: 14px; }
.chip:hover { border-color: var(--white); }
.chip.is-active { background: var(--accent); border-color: var(--accent); }
.chip.is-active span { opacity: .85; }
.filters__select select { padding: 10px 44px 10px 20px; border-radius: 32px; border: 1px solid rgba(255, 255, 255, .25); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center; color: var(--white); appearance: none; cursor: pointer; }
.filters__select option { color: var(--dark); }
.filters__empty { padding: 40px; text-align: center; background: var(--white-10); color: var(--white); }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { display: flex; flex-direction: column; padding: 16px; background: var(--white-10); }
.project-card.is-hidden { display: none; }
.project-card__media { position: relative; margin: 0; overflow: hidden; }
.project-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s; }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__tag { position: absolute; left: 12px; top: 12px; padding: 4px 14px; border-radius: 32px; background: var(--white); color: var(--dark); font-size: 13px; line-height: 20px; }
.project-card[data-status="ongoing"] .project-card__tag { background: var(--accent); color: var(--white); }
.project-card__body { padding: 20px 4px 4px; }
.project-card h3 { font-size: 22px; line-height: 30px; color: var(--white); margin-bottom: 16px; }
.project-card h3 a { color: var(--white); }
.project-card__meta { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.project-card__meta dt { font-size: 12px; line-height: 16px; color: rgba(242, 255, 255, .6); }
.project-card__meta dd { margin: 2px 0 0; font-size: 16px; color: #f2ffff; }

/* Contact ---------------------------------------------------------------- */
.contact-top { padding-top: 68px; }
.contact-box { position: relative; display: flex; justify-content: space-between; gap: 30px; padding: 68px; background: var(--soft); overflow: hidden; }
.contact-box__decor { position: absolute; left: -60px; bottom: -60px; width: 260px; color: rgba(19, 23, 32, .1); }
.contact-box__intro { position: relative; width: 370px; flex: none; }
.contact-box__intro .text-large, .contact-box__form > .text-large { color: var(--dark); margin-bottom: 8px; }
.contact-box__intro img { margin-top: 40px; opacity: .9; }
.contact-box__form { width: 624px; max-width: 100%; scroll-margin-top: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin: 0 0 20px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--dark); }
.field input, .field select, .field textarea, .search-form input[type="search"], .comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 14px 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--dark); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.hp { position: absolute; left: -9999px; }
.form-note { display: flex; gap: 8px; align-items: center; padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; }
.form-note.is-ok { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--dark); }
.form-note.is-error { background: #fde8e4; color: #8a2a17; }
.talk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 48px 0; }
.talk__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--soft); color: var(--accent); margin-bottom: 20px; }
.talk p { margin: 8px 0 0; }
.talk a { color: var(--text); }
.talk a:hover { color: var(--accent); }
.map-embed iframe { display: block; width: 100%; height: 460px; border: 0; filter: grayscale(1); }

/* Single ----------------------------------------------------------------- */
.single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; }
.entry-content { font-size: 18px; line-height: 28px; }
.entry-content h2 { font-size: 36px; line-height: 48px; margin-top: 1.4em; }
.entry-content h3 { font-size: 28px; line-height: 36px; margin-top: 1.2em; }
.entry-content img { margin: 24px 0; }
.entry-content blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-size: 20px; line-height: 32px; color: var(--dark); }
.entry-content a { color: var(--accent); text-decoration: underline; }
.post-meta { font-size: 14px; color: var(--text); }
.side-box { position: sticky; top: 120px; padding: 28px; background: var(--soft); }
.side-list { list-style: none; margin: 16px 0 28px; padding: 0; }
.side-list li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.side-list a { display: block; font-family: var(--head); font-size: 18px; font-weight: 600; line-height: 24px; }
.side-list small { font-size: 13px; }
.side-status { display: inline-block; padding: 4px 16px; border-radius: 32px; background: var(--white); color: var(--dark); }
.side-status.is-ongoing { background: var(--accent); color: var(--white); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 34px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.detail-meta > div { min-width: 160px; }
.detail-meta dt { font-size: 12px; color: var(--dark); }
.detail-meta dd { margin: 2px 0 0; font-size: 18px; color: var(--dark); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.post-nav a { display: block; font-family: var(--head); font-weight: 600; color: var(--dark); }
.post-nav small { display: block; font-family: var(--body); font-weight: 400; color: var(--text); }
.post-nav__next { grid-column: 2; text-align: right; }
.tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 14px; border: 1px solid var(--border); border-radius: 32px; font-size: 14px; text-decoration: none; }
.nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 32px; color: var(--dark); }
.page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--white); }
.search-form { display: flex; gap: 8px; margin-top: 24px; }
.search-form input[type="search"] { border-radius: 32px; }
.search-form .btn { padding: 12px 28px; }
.empty-state { text-align: center; max-width: 560px; margin: 0 auto; }
.notfound { text-align: center; background: var(--soft); overflow: hidden; }
.notfound__code { font-family: var(--head); font-size: 180px; line-height: 1; font-weight: 600; color: var(--dark); margin: 0 0 20px; position: relative; }
.notfound .search-form { max-width: 460px; margin: 0 auto; }
.comments { margin-top: 48px; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--border); }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--dark); padding-top: 124px; color: var(--gray); }
.footer-main { display: flex; gap: 56px; margin-bottom: 68px; }
.footer-left { width: 23.84%; flex: none; padding-right: 56px; border-right: 1px solid var(--white-10); display: flex; flex-direction: column; gap: 60px; }
.footer-left .brand img { height: 64px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: 20px; }
.footer-muted.footer-about { margin-top: 16px; font-size: 15px; line-height: 24px; opacity: .85; }
.footer-muted { font-size: 18px; line-height: 26px; color: var(--gray); margin: 0; }
.footer-muted a { color: var(--gray); }
.footer-email a, .talk__email a { overflow-wrap: break-word; }
.footer-email { font-size: 16px; }
.footer-muted a:hover { color: var(--white); }
.footer-title { font-size: 20px; line-height: 28px; color: var(--white); margin-bottom: 12px; }
.social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white-10); color: var(--white); }
.social a:hover { background: var(--accent); color: var(--white); }
.footer-right { flex: 1; }
.footer-news { display: flex; justify-content: space-between; gap: 32px; }
.footer-news > div { width: 36%; }
.footer-news__title { font-size: 36px; line-height: 48px; color: var(--white); margin-bottom: 8px; }
.news-form { position: relative; display: flex; flex-wrap: wrap; gap: 0; width: 52%; align-self: center; background: var(--white-10); border-radius: 60px; padding: 6px; }
.news-form input[type="email"] { flex: 1; min-width: 0; padding: 12px 20px; border: 0; background: transparent; color: var(--white); outline: none; }
.news-form input::placeholder { color: var(--gray); }
.news-form .btn { padding: 12px 28px; font-size: 16px; }
.news-form__note { width: 100%; margin: 8px 20px 0; font-size: 14px; color: var(--white); }
.news-form__note.is-error { color: #ffb4a6; }
.footer-links-box { display: flex; justify-content: space-between; gap: 32px; margin-top: 48px; padding: 48px 32px; background: var(--white-10); }
.footer-links, .footer-links-box .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a, .footer-links-box .menu a, .footer-links--plain li { font-size: 18px; line-height: 26px; color: var(--gray); }
.footer-links a:hover, .footer-links-box .menu a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 0 20px; border-top: 1px solid var(--white-10); }
.footer-bottom p { margin: 0; font-size: 18px; line-height: 26px; }
.footer-bottom ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: var(--gray); font-size: 18px; }
.footer-bottom a:hover { color: var(--white); }
.footer-credit { margin: 0; padding: 14px 0 22px; border-top: 1px solid var(--white-10); text-align: center; font-size: 13px; line-height: 20px; color: rgba(193, 193, 193, .7); }
.footer-credit a { color: var(--gray); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--white); }
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }
.wa-float:hover { color: #fff; }

/* WordPress core --------------------------------------------------------- */
.alignwide { max-width: 1100px; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.alignleft { float: left; margin: 6px 24px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 24px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: 14px; }
.has-green-color { color: var(--accent); } .has-green-background-color { background: var(--accent); }
.has-ink-color { color: var(--dark); } .has-ink-background-color { background: var(--dark); }
.has-concrete-background-color { background: var(--soft); }


/* ==========================================================================
   Inner pages (Brickon: About, Services, Service/Project details, Projects,
   Blog, FAQs, Clients, Team, 404)
   ========================================================================== */
.page-hero--about { padding-bottom: 124px; }
.page-hero--about .about-story { margin-top: 60px; width: 91.1%; }
.about-story { display: flex; gap: 68px; align-items: flex-start; }
.page-hero--404 { padding: 68px 0 124px; }
.page-hero--404 .page-hero__head { padding-bottom: 0; max-width: 760px; }
.page-hero--404 .text-medium { margin: 16px 0 32px; }
.page-hero--404 h1 { font-size: 80px; line-height: 96px; }

/* Services page grid (4 columns, like Brickon) */
.svc-grid--page { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.services-page { padding-top: 68px; }

/* Detail layout (service / project / blog) */
.detail { padding-top: 68px; }
.detail__grid { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; }
.detail-main { width: 66.4%; min-width: 0; }
.detail-side { width: 29.65%; flex: none; display: flex; flex-direction: column; gap: 32px; }
.detail-h { font-size: 36px; line-height: 48px; font-weight: 600; margin: 0 0 16px; }
.detail-main > div + div, .detail-main > div + blockquote, .detail-main > blockquote + div { margin-top: 40px; }
.detail-main p { color: var(--text); }
.dot-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.dot-list li { position: relative; padding-left: 22px; color: var(--dark); }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.num-list { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; color: var(--dark); }
.num-list a { color: var(--dark); text-decoration: none; }
.num-list a:hover { color: var(--accent); }
.num-list span { color: var(--accent); font-weight: 600; margin-left: 6px; }
.detail-main .quote-box { margin: 40px 0 0; padding: 60px 56px; background: var(--soft); border: 0; font-size: inherit; }
.quote-box .icon { color: var(--accent); margin-bottom: 20px; }
.quote-box p { margin: 0; font-family: var(--head); font-size: 28px; line-height: 38px; font-weight: 500; color: var(--dark); }
.detail-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.detail-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; }
.detail-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.detail-foot__follow { display: flex; align-items: center; gap: 16px; }
.detail-foot__follow .h5 { margin: 0; color: var(--text); font-family: var(--head); }
.social--dark a { background: var(--soft); color: var(--dark); }
.social--dark a:hover { background: var(--accent); color: var(--white); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 0 0 34px; padding: 0 0 24px; border-bottom: 1px solid var(--border); }
.detail-meta > div { min-width: 0; }
.detail-meta dt { font-size: 12px; line-height: 16px; color: var(--dark); }
.detail-meta dd { margin: 4px 0 0; font-size: 18px; line-height: 26px; color: var(--dark); }

/* Sidebar */
.side-inquiry { padding: 32px; background: var(--dark); color: var(--gray); scroll-margin-top: 30px; }
.side-inquiry__title { font-size: 24px; line-height: 32px; color: var(--white); margin-bottom: 20px; }
.side-inquiry .field { margin-bottom: 12px; }
.side-inquiry .field input, .side-inquiry .field textarea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: var(--white); }
.side-inquiry .field input::placeholder, .side-inquiry .field textarea::placeholder { color: rgba(255, 255, 255, .55); }
.side-inquiry .btn--block { margin-top: 4px; }
.side-inquiry .btn--block:hover { background: var(--white); color: var(--dark); }
.side-inquiry .form-note { font-size: 14px; }
.side-inquiry__contact { margin-top: 32px; }
.side-inquiry__contact h3 { font-size: 20px; color: var(--white); margin-bottom: 16px; }
.side-inquiry__contact p { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; color: var(--gray); }
.side-inquiry__contact .icon { flex: none; color: var(--accent); margin-top: 2px; }
.side-inquiry__contact a { color: var(--gray); overflow-wrap: anywhere; }
.side-inquiry__contact a:hover { color: var(--white); }
.side-inquiry--cta p { color: var(--gray); margin-bottom: 24px; }
.side-box-b { padding: 28px 24px; border: 1px solid #e7e7e8; }
.side-box-b__title { font-size: 24px; line-height: 32px; margin-bottom: 20px; }
.side-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-services a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--soft); color: var(--dark); font-size: 16px; transition: background-color .3s, color .3s; }
.side-services a:hover, .side-services a.is-current { background: var(--accent); color: var(--white); }
.side-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.side-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .3s; }
.side-gallery a:hover img { opacity: .8; }
.side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.side-posts a { display: flex; gap: 14px; align-items: center; color: var(--dark); }
.side-posts img { width: 72px; height: 72px; object-fit: cover; flex: none; }
.side-posts strong { display: block; font-family: var(--head); font-size: 17px; line-height: 23px; font-weight: 600; }
.side-posts small { color: var(--text); font-size: 13px; }
.side-posts a:hover strong { color: var(--accent); }
.side-box-b .search-form { margin: 0; }

/* Related services */
.related .svc-grid { margin-bottom: 0; }

/* Projects page list */
.work--page .work__list { width: 80.4%; }
@media (max-width: 1024px) { .work--page .work__list { width: 100%; } }
.work__lead { margin-top: 16px; font-size: 18px; color: var(--gray); }
.work-item.is-hidden { display: none; }
.work--page .work-box { margin: 0; }
.load-more-wrap { margin-top: 48px; }
.work--page .filters { margin-top: 0; }

/* FAQ */
.faq-box { display: flex; justify-content: space-between; gap: 40px; padding: 40px; background: var(--soft); }
.faq-box__img { width: 474px; max-width: 42%; flex: none; }
.faq-box__img img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.faq-box__list { flex: 1; max-width: 654px; }
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.faq { border-bottom: 1px solid var(--border); background: transparent; }
.faq-cols .faq { background: var(--soft); border: 0; margin-bottom: 16px; padding: 0 24px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--head); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); transition: background-color .3s, border-color .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--dark); transform: translate(-50%, -50%); transition: transform .3s, background-color .3s; }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] summary i { background: var(--accent); border-color: var(--accent); }
.faq[open] summary i::before, .faq[open] summary i::after { background: var(--white); }
.faq[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq[open] summary { color: var(--accent); }
.faq__a { padding: 0 0 22px; color: var(--text); }
.faq__a p:last-child { margin-bottom: 0; }

/* Divider label + logo tiles */
.divider-label { display: flex; align-items: center; gap: 20px; margin: 0 0 40px; font-family: var(--head); font-size: 20px; line-height: 28px; color: var(--dark); }
.divider-label::before, .divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.partners { margin-top: 88px; }
.partners .divider-label { margin-bottom: 32px; }
.marquee--plain { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.logo-tile { display: grid; place-items: center; height: 130px; padding: 30px 36px; background: var(--soft); border: 1px solid var(--border); transition: transform .4s, border-color .3s; }
.logo-tile:hover { transform: translateY(-10px); border-color: var(--accent); }
.logo-tile img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.clients-page { padding-top: 68px; }

/* Timeline (About milestones) */
.timeline-sec__title { max-width: 620px; font-weight: 500; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.timeline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--border); }
.tl-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 530px; padding: 16px 16px 0; border-left: 1px solid var(--border); }
.tl-item:last-child { border-right: 1px solid var(--border); }
.tl-item::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 86%; aspect-ratio: 2 / 1; transform: translateX(-50%); border: 1px solid var(--border); border-bottom: 0; border-radius: 999px 999px 0 0; }
.tl-item__text p { margin: 8px 0 0; }
.tl-item__foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-bottom: 40px; }
.tl-item__year { margin: 0 0 12px; font-family: var(--head); font-size: 28px; line-height: 36px; font-weight: 600; color: var(--accent); }
.tl-item__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--accent); background: var(--white); color: var(--accent); }
.tl-item::after { content: ""; position: absolute; left: -5px; bottom: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--dark); }

/* Team */
.team { overflow: hidden; }
.decor--team { color: rgba(19, 23, 32, .12); left: -60px; right: auto; top: 60px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.member__img { position: relative; overflow: hidden; margin-bottom: 20px; background: var(--soft); aspect-ratio: 295 / 340; }
.member__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.member:hover .member__img img { transform: scale(1.05); }
.member__social { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; transform: translateY(80px); transition: transform .4s; }
.member:hover .member__social, .member:focus-within .member__social { transform: none; }
.member__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--dark); }
.member__social a:hover { background: var(--accent); color: var(--white); }
.member h3 { margin-bottom: 4px; }
.member p { margin: 0; }

@media (max-width: 1024px) {
	.page-hero--about { padding-bottom: 90px; }
	.page-hero--about .about-story { width: 100%; flex-direction: column; gap: 40px; }
	.page-hero--about .about-story__counters { width: 100%; grid-template-columns: repeat(3, 1fr); display: grid; }
	.svc-grid--page { grid-template-columns: repeat(2, 1fr); }
	.detail__grid { flex-direction: column; }
	.detail-main, .detail-side { width: 100%; }
	.faq-box { flex-direction: column; }
	.faq-box__img { width: 100%; max-width: none; }
	.faq-box__img img { min-height: 0; aspect-ratio: 16 / 9; }
	.logo-grid { grid-template-columns: repeat(3, 1fr); }
	.timeline { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.timeline::after { display: none; }
	.tl-item { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 455px; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.page-hero--404 h1 { font-size: 60px; line-height: 72px; }
}
@media (max-width: 767px) {
	.page-hero--about .about-story__counters { grid-template-columns: 1fr; }
	.svc-grid--page { grid-template-columns: 1fr; }
	.detail-h { font-size: 28px; line-height: 36px; }
	.detail-main .quote-box { padding: 32px 24px; }
	.quote-box p { font-size: 22px; line-height: 32px; }
	.faq-cols { grid-template-columns: 1fr; }
	.detail-gallery { gap: 10px; }
	.faq-box { padding: 20px; }
	.faq summary { font-size: 18px; line-height: 26px; }
	.logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.logo-tile { height: 100px; padding: 20px; }
	.timeline { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
	.page-hero--404 h1 { font-size: 48px; line-height: 58px; }
}

/* Gallery */
.gallery-page { padding-top: 68px; }
.filters--light .chip { color: var(--dark); border-color: var(--border); }
.filters--light .chip:hover { border-color: var(--dark); }
.filters--light .chip.is-active { color: var(--white); }
.photo-grid { columns: 3; column-gap: 20px; }
.photo { position: relative; display: block; margin: 0 0 20px; break-inside: avoid; overflow: hidden; }
.photo.is-hidden { display: none; }
.photo img { width: 100%; height: auto; transition: transform .6s; }
.photo:hover img { transform: scale(1.05); }
.photo__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(19, 23, 32, .8)); color: var(--white); font-size: 15px; opacity: 0; transform: translateY(10px); transition: .3s; }
.photo:hover .photo__cap, .photo:focus .photo__cap { opacity: 1; transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 60px 70px; background: rgba(19, 23, 32, .94); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 1100px; text-align: center; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; }
.lightbox figcaption { margin-top: 14px; color: var(--white); font-size: 16px; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--white); cursor: pointer; }
.lightbox button:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 16px; top: 50%; margin-top: -26px; }
.lightbox__next { right: 16px; top: 50%; margin-top: -26px; }
.blog-page { padding-top: 68px; }
@media (max-width: 1024px) { .photo-grid { columns: 2; } }
@media (max-width: 767px) { .photo-grid { columns: 1; } .lightbox { padding: 60px 12px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; margin: 0; } }

/* Header: keep long menus on one line */
@media (max-width: 1600px) { .smp-long-menu .site-header__actions > .header-phone { display: none; } }
.primary-nav a, .btn, .header-phone { white-space: nowrap; }
@media (max-width: 1360px) and (min-width: 1025px) {
	.site-header__actions > .header-phone { display: none; }
	.primary-nav .menu { gap: 0; }
	.primary-nav a { padding: 8px 11px; font-size: 17px; }
}
@media (max-width: 1160px) and (min-width: 1025px) {
	.primary-nav a { padding: 8px 8px; font-size: 16px; }
	.site-header__brand img { max-width: 180px; }
}

/* Elementor entrance animations ----------------------------------------- */
.js [data-anim]:not(.is-animated) { visibility: hidden; }
.is-animated { animation-duration: 1.25s; animation-fill-mode: both; }
.anim-fadeInUp { animation-name: fadeInUp; }
.anim-zoomIn { animation-name: zoomIn; }
.anim-fadeInRight { animation-name: fadeInRight; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
/* Hover lift (Elementor translateY -10px) */
.lift, .counter { transition: transform .4s; }
.lift.is-animated, .counter.is-animated { animation-fill-mode: backwards; }
.lift:hover, .counter:hover { transform: translateY(-10px); }
.social a { transition: transform .3s, background-color .3s; }
.social a:hover { transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee__track, .decor, .cta__bird svg, .is-animated { animation: none !important; }
	.js [data-anim]:not(.is-animated) { visibility: visible; }
	.marquee__track ul[aria-hidden] { display: none; }
	.marquee__track { width: auto; }
	.marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 16px; }
	* { transition: none !important; }
}

/* Responsive: tablet (Elementor 1024) ------------------------------------ */
@media (max-width: 1200px) {
	.hero__media { width: 63%; }
	.counters { flex-wrap: wrap; }
	.counter { width: calc(50% - 6px); }
	.org__depts { grid-template-columns: repeat(4, 1fr); }
	.cert-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	:root { --section: 90px; }
	.h2 { font-size: 42px; line-height: 52px; }
	.h1-page, .page-hero h1 { font-size: 48px; line-height: 58px; }
	.hero__title { font-size: 60px; line-height: 72px; }
	.nav-toggle { display: block; }
	.header-cta, .site-header__actions > .header-phone { display: none; }
	.primary-nav { position: fixed; left: 0; right: 0; top: var(--nav-top, 96px); bottom: 0; z-index: 49; padding: 24px var(--pad) 40px; background: var(--soft); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s, visibility .3s; }
	.nav-open { overflow: hidden; }
	.nav-open .primary-nav { transform: none; visibility: visible; }
	.nav-open .nav-toggle .icon-menu { display: none; }
	.nav-open .nav-toggle .icon-close { display: block; }
	.primary-nav .menu { flex-direction: column; gap: 0; }
	.primary-nav .menu > li { border-bottom: 1px solid var(--border); }
	.primary-nav a { padding: 14px 0; font-size: 22px; font-family: var(--head); font-weight: 600; }
	.primary-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; padding: 0 0 12px 16px; }
	.primary-nav .primary-nav__mobile-extra a.btn { display: inline-flex; padding: 12px 12px 12px 24px; font-family: var(--body); font-size: 18px; line-height: 26px; font-weight: 500; color: var(--white); }
	.primary-nav .primary-nav__mobile-extra .header-phone { font-family: var(--body); font-size: 18px; font-weight: 400; padding: 0; }
	.primary-nav__mobile-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 28px; }
	.hero__row { margin-top: 30px; min-height: 365px; }
	.hero__side { width: 38%; }
	.hero__arrow { width: 55px; height: 55px; margin-bottom: 40px; }
	.hero__media { width: 60%; max-width: none; }
	.hero__media img { height: 365px; }
	.circle-link { right: 30px; }
	.hero__sketch { width: 50%; top: 40px; }
	.about__grid, .cta__grid { flex-direction: column; align-items: stretch; }
	.about__media, .about__copy, .cta__media, .cta__copy { width: 100%; }
	.cta__media { margin-right: 0; }
	.about__media { min-height: 480px; }
	.float-card { margin-right: 24px; }
	.svc-grid, .svc-grid--all { grid-template-columns: repeat(2, 1fr); }
	.work__list, .work__foot { width: 100%; }
	.plan-grid, .post-grid, .project-grid { grid-template-columns: repeat(2, 1fr); }
	.plan-grid > :last-child { grid-column: 1 / -1; }
	.achieve-grid { grid-template-columns: repeat(2, 1fr); }
	.about-story__grid { flex-direction: column; gap: 40px; }
	.about-story__counters { width: 100%; grid-template-columns: repeat(3, 1fr); }
	.belief-grid { grid-template-columns: repeat(2, 1fr); }
	.equipment, .consultants { grid-template-columns: 1fr; }
	.contact-box { flex-direction: column; padding: 40px; }
	.contact-box__intro { width: 100%; }
	.contact-box__intro img { display: none; }
	.contact-box__form { width: 100%; }
	.single-grid { grid-template-columns: 1fr; }
	.side-box { position: static; }
	.footer-main { flex-direction: column; gap: 48px; }
	.footer-left { width: 100%; padding-right: 0; border-right: 0; flex-direction: row; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
	.footer-news { flex-direction: column; }
	.footer-news > div, .news-form { width: 100%; }
	.sec-head--split { flex-direction: column; align-items: flex-start; }
	.page-hero__media img { height: 380px; }
	.page-hero__sketch { width: 50%; opacity: .5; }
}

/* Responsive: mobile (Elementor 767) ------------------------------------- */
@media (max-width: 767px) {
	:root { --section: 72px; --pad: 16px; }
	.h2 { font-size: 34px; line-height: 42px; }
	.h3 { font-size: 26px; line-height: 36px; }
	.h1-page, .page-hero h1 { font-size: 40px; line-height: 48px; }
	.hero__title { font-size: 44px; line-height: 54px; }
	.about__copy .h2 { line-height: 44px; }
	.site-header__inner { padding-top: 16px; padding-bottom: 16px; }
	.site-header__brand img, .custom-logo { height: min(var(--logo-h, 60px), 44px); max-width: 200px; }
	.btn { font-size: 16px; }
	.btn__icon { width: 28px; height: 28px; }
	.hero__row { display: flex; flex-direction: column-reverse; min-height: 0; }
	.hero__row > .wrap { margin-top: 40px; }
	.hero__side { width: 100%; padding-right: 20px; }
	.hero__media { position: relative; width: 100%; }
	.hero__media img { height: 350px; }
	.circle-link { width: 115px; height: 115px; top: -70px; right: 20px; }
	.circle-link__text { width: 80px; height: 80px; top: 12px; left: 12px; }
	.circle-link__text text { font-size: 15px; }
	.circle-link::before { left: 10px; bottom: 12px; width: 80%; height: 45%; }
	.circle-link__arrow svg { width: 32px; height: 32px; }
	.hero__sketch { width: 365px; max-width: 95%; top: 20px; right: 3px; opacity: .45; }
	.recog__card { padding: 28px 24px 40px; }
	.recog__controls { left: 24px; bottom: 40px; }
	.post-card__title { font-size: 26px; line-height: 36px; }
	.cta__media { margin-right: 0; }
	.cta__bird--group { right: 0; top: 30px; width: 110px; }
	.circle-link__btn { width: 70px; height: 70px; }
	.about__media { min-height: 440px; background-position: center top; }
	.float-card { width: 240px; margin: 0 16px 16px 0; padding: 16px 14px; }
	.counter { width: calc(50% - 6px); padding: 14px 14px 14px 20px; }
	.counter:last-child:nth-child(odd) { width: 100%; }
	.counter__num { font-size: 40px; line-height: 48px; }
	.svc-grid, .svc-grid--all, .plan-grid, .post-grid, .project-grid, .achieve-grid, .belief-grid, .cert-grid, .gallery-grid, .talk-grid { grid-template-columns: 1fr; }
	.cert-grid { grid-template-columns: 1fr 1fr; }
	.work-box { flex-direction: column; padding: 16px; }
	.work-box__media { width: 100%; }
	.work-box__media img { min-height: 220px; }
	.work-box__meta { flex-wrap: wrap; gap: 16px 24px; margin: 24px 0; }
	.plan__price { font-size: 40px; }
	.recog__card { padding: 28px 24px 32px; }
	.recog__slide blockquote { font-size: 18px; line-height: 28px; }
	.about-story__counters { grid-template-columns: 1fr; }
	.org__depts { grid-template-columns: 1fr 1fr; }
	.consultant-list { columns: 1; }
	.contact-box { padding: 28px 20px; }
	.field-row { grid-template-columns: 1fr; }
	.footer-links-box { flex-direction: column; padding: 32px 24px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.footer-left { flex-direction: column; }
	.page-hero__media img { height: 260px; }
	.notfound__code { font-size: 120px; }
	.marquee li { width: 160px; height: 88px; }
	.decor--circle { width: 160px; }
}

.comment-form .submit, .comment-form input[type="submit"] { display: inline-flex; padding: 13px 28px; border: 0; border-radius: 32px; background: var(--accent); color: var(--white); font: 500 18px/26px var(--body); cursor: pointer; transition: transform .3s, background-color .3s; }
.comment-form .submit:hover { transform: scale(.9); background: var(--dark); }
.comment-form label { display: block; margin-bottom: 6px; color: var(--dark); font-size: 14px; }
.comment-form p { margin-bottom: 18px; }
.comments h3, .comment-reply-title { font-size: 28px; line-height: 36px; }
.detail-main .post-nav a { text-decoration: none; }
.detail-main .post-nav a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Safety net for content copied from Elementor / page-builder templates.
   Their icons are inline SVGs with no size, which browsers stretch to full
   width (the giant black circle). Keep them icon-sized and on-brand.
   ----------------------------------------------------------------------- */
.entry-content svg:not([width]):not([style*="width"]),
.entry-content .e-font-icon-svg,
.entry-content [class*="elementor-icon"] svg { width: 1em; height: 1em; max-width: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }
.entry-content .elementor-icon-list-items { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
.entry-content .elementor-icon-list-item { display: flex; align-items: center; gap: 10px; color: var(--dark); }
.entry-content .elementor-icon-list-icon { display: inline-flex; color: var(--accent); font-size: 8px; }
.entry-content .elementor-screen-only, .entry-content .elementor-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
/* Icon fonts from plugins that are not active show only their class names: hide them. */
.entry-content i[class^="jki"], .entry-content i[class*=" jki-"], .entry-content i.fab, .entry-content i.fas, .entry-content i.far { display: none; }
.entry-content .elementor-social-icons-wrapper:not(:has(svg)), .entry-content .jkit-social-icon:not(:has(svg)) { display: none; }
.entry-content img { height: auto; }

/* --------------------------------------------------------------------------
   WordPress block content (blog posts written in the editor)
   ----------------------------------------------------------------------- */
.entry-content > * + * { margin-top: 0; }
.entry-content h2, .entry-content .wp-block-heading:is(h2) { font-size: 32px; line-height: 42px; font-weight: 600; margin: 40px 0 14px; }
.entry-content h3 { font-size: 26px; line-height: 34px; font-weight: 600; margin: 32px 0 12px; }
.entry-content h4 { font-size: 22px; line-height: 30px; margin: 28px 0 10px; }
.entry-content p { margin: 0 0 18px; }
.entry-content ul.wp-block-list, .entry-content > ul { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; gap: 12px; }
.entry-content ul.wp-block-list > li, .entry-content > ul > li { position: relative; padding-left: 24px; color: var(--dark); }
.entry-content ul.wp-block-list > li::before, .entry-content > ul > li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.entry-content ol { margin: 8px 0 24px; padding-left: 22px; color: var(--dark); }
.entry-content ol li { margin-bottom: 10px; }
.entry-content .wp-block-quote, .detail-main .entry-content blockquote, .detail-main.entry-content blockquote:not(.quote-box) { position: relative; margin: 36px 0; padding: 48px 48px 40px; background: var(--soft); border: 0; }
.entry-content .wp-block-quote::before { content: "\201C"; position: absolute; left: 44px; top: 4px; font-family: var(--head); font-size: 72px; line-height: 1; color: var(--accent); }
.entry-content .wp-block-quote p { margin: 12px 0 0; font-family: var(--head); font-size: 24px; line-height: 34px; font-weight: 500; color: var(--dark); }
.entry-content .wp-block-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 15px; color: var(--text); }
.entry-content .wp-block-image { margin: 28px 0; }
.entry-content .wp-block-image img { width: 100%; height: auto; margin: 0; }
.entry-content .wp-block-image figcaption { margin-top: 8px; font-size: 14px; color: var(--text); }
.entry-content .wp-block-gallery { margin: 28px 0; gap: 16px; }
.entry-content .wp-block-columns { gap: 24px; margin: 24px 0; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; }
.entry-content .wp-block-table th { background: var(--soft); color: var(--dark); text-align: left; }
.entry-content .wp-block-table td, .entry-content .wp-block-table th { padding: 12px 14px; border: 1px solid var(--border); }
.entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.entry-content .wp-block-button__link { display: inline-flex; align-items: center; padding: 13px 28px; border-radius: 32px; background: var(--accent); color: var(--white); font-family: var(--body); font-size: 18px; font-weight: 500; text-decoration: none; transition: transform .3s, background-color .3s; }
.entry-content .wp-block-button__link:hover { transform: scale(.9); background: var(--dark); color: var(--white); }
.entry-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.entry-content .smp-cta-box { margin: 44px 0 0; padding: 36px 40px; background: var(--dark); color: var(--gray); }
.entry-content .smp-cta-box h3 { margin-top: 0; color: var(--white); }
.entry-content .smp-cta-box p { color: var(--gray); }
.entry-content .smp-cta-box .wp-block-buttons { margin-bottom: 0; }
.entry-content .smp-cta-box .wp-block-button__link:hover { background: var(--white); color: var(--dark); }
.entry-content .wp-block-embed iframe { width: 100%; }
@media (max-width: 767px) {
	.entry-content h2, .entry-content .wp-block-heading:is(h2) { font-size: 26px; line-height: 34px; }
	.entry-content .wp-block-quote { padding: 40px 22px 28px; }
	.entry-content .wp-block-quote::before { left: 20px; }
	.entry-content .wp-block-quote p { font-size: 20px; line-height: 30px; }
	.entry-content .smp-cta-box { padding: 28px 22px; }
}