/* ============================================================
   Axiologik Website UI Kit — component styles
   Brand tokens come from colors_and_type.css (linked separately).
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-text);color:var(--fg-1);background:var(--bg-1);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.section{padding:96px 0}
.section--grey{background:var(--bg-2)}
.section--dark{background:var(--ax-black);color:#fff}

/* ---------- Type helpers (kit-scoped) ---------- */
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ax-teal);margin:0 0 22px}
.section--dark .eyebrow{color:var(--ax-turquoise)}
.h-display{font-family:var(--font-display);font-weight:300;font-size:clamp(40px,5.2vw,72px);line-height:1.04;letter-spacing:-.01em;margin:0}
.h-sec{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.6vw,46px);line-height:1.12;margin:0;letter-spacing:-.005em}
.h-card{font-family:var(--font-display);font-weight:300;font-size:22px;line-height:1.2;margin:0}
.lead{font-weight:300;font-size:18px;line-height:1.55;color:var(--fg-1)}
.muted{color:var(--ax-teal)}
.acc{color:var(--ax-turquoise)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;letter-spacing:.01em;padding:13px 28px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);text-decoration:none;white-space:nowrap}
.btn--primary{background:var(--ax-black);color:#fff}
.btn--primary:hover{background:#142a32}
.btn--onDark{background:#fff;color:var(--ax-black)}
.btn--onDark:hover{background:var(--ax-turquoise)}
.btn--outlineDark{background:transparent;color:var(--ax-black);border-color:var(--ax-black)}
.btn--outlineDark:hover{background:var(--ax-black);color:#fff}
.btn--outlineLight{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--outlineLight:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Circular icon buttons ---------- */
.circ{width:46px;height:46px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ax-black);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur) var(--ease);flex:0 0 auto}
.circ:hover{background:var(--ax-black);color:#fff;border-color:var(--ax-black)}
.circ:disabled{opacity:.35;cursor:default}
.circ:disabled:hover{background:#fff;color:var(--ax-black);border-color:var(--border)}
.circ--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.circ--onDark:hover{background:#fff;color:var(--ax-black)}
.circ--onImg{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);width:40px;height:40px}
.circ--onImg:hover{background:#fff;color:var(--ax-black)}
.icon{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:44px}
.sec-head .navpair{display:flex;gap:12px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.nav__inner{display:flex;align-items:center;gap:22px;height:74px;max-width:1280px;margin:0 auto;padding:0 40px}
.nav__logo{height:23px;width:auto;cursor:pointer}
.nav__links{display:flex;gap:22px;margin-left:auto}
.nav__link{font-size:13.5px;color:var(--fg-1);text-decoration:none;background:none;border:0;cursor:pointer;padding:6px 0;position:relative;transition:color var(--dur);white-space:nowrap}
.nav__link:hover{color:var(--ax-teal)}
.nav__link--active{color:var(--ax-turquoise)}
.nav__link--active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ax-turquoise)}
.nav__cta{margin-left:6px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ax-black);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.9}
.hero__bg-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--ax-black) 18%,rgba(0,15,20,.55) 55%,rgba(0,15,20,.25) 100%)}
.hero__inner{position:relative;max-width:1000px;margin:0 auto;padding:120px 40px 128px;text-align:center}
.hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,5.6vw,68px);line-height:1.05;letter-spacing:-.01em;margin:0 auto;max-width:14ch}
.hero__sub{font-weight:300;font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:rgba(255,255,255,.78);max-width:62ch;margin:24px auto 0}
.hero__btns{display:flex;gap:14px;justify-content:center;margin-top:38px}
.hero--page .hero__inner{padding:104px 40px 110px}
.hero--page h1{max-width:18ch}

/* ---------- Logo bar ---------- */
.logobar{border-bottom:1px solid var(--hairline)}
.logobar__inner{display:flex;align-items:center;gap:18px;padding:30px 40px;max-width:1280px;margin:0 auto}
.logobar__track{display:flex;align-items:center;gap:36px;flex:1;overflow:hidden}
.logobar__logo{flex:0 0 auto;width:132px;height:48px;opacity:.9}

/* ---------- Generic card grid ---------- */
.grid{display:grid;gap:18px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* What-we-do feature card */
.fcard{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:26px 24px 22px;display:flex;flex-direction:column;min-height:230px;transition:all var(--dur) var(--ease);cursor:pointer}
.fcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.fcard--hi{background:var(--ax-teal);border-color:var(--ax-teal);color:#fff}
.fcard--hi .fcard__body{color:rgba(255,255,255,.82)}
.fcard__ic{width:34px;height:34px;color:var(--ax-dark-teal);margin-bottom:auto}
.fcard--hi .fcard__ic{color:#fff}
.fcard__ic svg{width:34px;height:34px}
.fcard__t{font-family:var(--font-display);font-weight:300;font-size:20px;line-height:1.2;margin:26px 0 8px}
.fcard__body{font-size:13.5px;line-height:1.5;color:var(--ax-teal);margin:0 0 18px}
.fcard__foot{display:flex;justify-content:flex-end;margin-top:auto}

/* numbered capability card */
.capcard{background:var(--ax-teal);color:#fff;border-radius:var(--r-md);padding:24px 22px;min-height:168px;display:flex;flex-direction:column;transition:transform var(--dur) var(--ease)}
.capcard:hover{transform:translateY(-3px)}
.capcard:nth-child(even){background:var(--ax-dark-teal)}
.capcard__n{font-size:13px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.04em}
.capcard__t{font-family:var(--font-display);font-weight:300;font-size:21px;line-height:1.18;margin-top:auto}

/* image / problem card */
.imgcard{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:300px;background:#0A1A20;cursor:pointer}
.imgcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.imgcard:hover img{transform:scale(1.05)}
.imgcard__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,15,20,.88) 6%,rgba(0,15,20,.15) 58%,rgba(0,15,20,.05) 100%)}
.imgcard__label{position:absolute;left:20px;right:64px;bottom:20px;color:#fff;font-weight:500;font-size:17px;line-height:1.25}
.imgcard__arw{position:absolute;right:16px;bottom:16px}

/* ---------- Case study ---------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.case__media{display:flex;gap:18px}
.csCard{flex:1;border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--hairline)}
.csCard__img{height:150px;background:#0A1A20;position:relative}
.csCard__img img{width:100%;height:100%;object-fit:cover}
.csCard__bd{padding:16px 16px 18px}
.csCard__t{font-weight:500;font-size:15px;line-height:1.3;margin:0 0 12px}
.csCard__link{font-size:12px;color:var(--ax-teal);text-decoration:underline;display:inline-flex;align-items:center;gap:6px}

/* ---------- Insights ---------- */
.icard{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:all var(--dur) var(--ease);cursor:pointer}
.icard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.icard__img{height:160px;background:#0A1A20}
.icard__img img{width:100%;height:100%;object-fit:cover}
.icard__bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.icard__eb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ax-teal);font-weight:500;margin:0 0 12px}
.icard__t{font-weight:500;font-size:17px;line-height:1.3;margin:0 0 10px}
.icard__ex{font-weight:300;font-size:13.5px;line-height:1.5;color:var(--ax-teal);margin:0 0 20px}
.icard__ft{display:flex;align-items:center;gap:10px;border-top:1px solid var(--hairline);padding-top:16px;margin-top:auto}
.icard__av{width:28px;height:28px;border-radius:999px;background:var(--ax-grey-20);flex:0 0 auto}
.icard__by{font-size:11.5px;color:var(--ax-grey-45)}
.icard__rm{margin-left:auto;font-size:12px;font-weight:500;color:var(--ax-black);text-decoration:underline}

/* ---------- People mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px}
.mtile{border-radius:var(--r-md);overflow:hidden;position:relative;background:var(--ax-dark-teal)}
.mtile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.mtile--label{background:var(--ax-teal);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.mtile--label .we{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.mtile--label .role{font-family:var(--font-display);font-weight:300;font-size:24px;line-height:1.1;margin-top:6px}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2c3b43,#1a2930);color:rgba(255,255,255,.25)}
.ph svg{width:42px;height:42px}

/* ---------- CTA band ---------- */
.cta{position:relative;text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.cta__inner{position:relative;padding:104px 40px}
.cta h2{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,42px);margin:0 0 16px}
.cta p{color:rgba(255,255,255,.72);max-width:50ch;margin:0 auto 30px;font-weight:300;line-height:1.55}

/* ---------- Footer ---------- */
.footer{background:var(--ax-black);color:#fff;padding:72px 0 40px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
.footer__logo{height:26px;margin-bottom:20px}
.footer__addr{font-size:13px;line-height:1.7;color:rgba(255,255,255,.6)}
.footer__h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 16px}
.footer__link{display:block;font-size:13px;color:rgba(255,255,255,.78);text-decoration:none;margin-bottom:10px}
.footer__link:hover{color:var(--ax-turquoise)}
.footer__social{display:flex;gap:10px}
.fsoc{width:34px;height:34px;border-radius:999px;background:var(--ax-turquoise);color:var(--ax-black);display:flex;align-items:center;justify-content:center}
.fsoc svg{width:16px;height:16px}
.footer__bottom{display:flex;align-items:center;gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:26px;flex-wrap:wrap}
.footer__certs{display:flex;align-items:center;gap:18px;margin-left:auto;opacity:.9}
.footer__certs img{height:42px;filter:grayscale(1) brightness(1.6)}
.footer__cert-pill{border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:6px 10px;font-size:10.5px;color:rgba(255,255,255,.7);line-height:1.3}
.footer__copy{font-size:12px;color:rgba(255,255,255,.5)}

/* ---------- Products ---------- */
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prodcard{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:210px;background:#0A1A20;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;cursor:pointer}
.prodcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .5s var(--ease)}
.prodcard:hover img{transform:scale(1.05)}
.prodcard__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,15,20,.92),rgba(0,15,20,.35))}
.prodcard__t{position:relative;font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--ax-turquoise);margin:0 0 8px}
.prodcard__d{position:relative;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);margin:0}
.prodcard--intro{background:var(--ax-teal);justify-content:flex-start}
.prodcard--intro p{position:relative;font-size:13px;line-height:1.55;color:rgba(255,255,255,.92);margin:0}
.prodcard--intro a{position:relative;color:#fff;font-size:12.5px;text-decoration:underline;margin-top:14px;display:inline-block}

/* how it works checklist */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px}
.check-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--hairline)}
.check-ic{width:26px;height:26px;border-radius:999px;border:1.5px solid var(--ax-turquoise);color:var(--ax-turquoise);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}
.check-ic svg{width:14px;height:14px}
.check-item h4{font-size:15px;font-weight:500;margin:0 0 5px}
.check-item p{font-size:13px;line-height:1.5;color:var(--ax-teal);margin:0}

/* FAQ */
.faq{border-top:1px solid var(--hairline)}
.faq__item{border-bottom:1px solid var(--hairline)}
.faq__q{width:100%;background:none;border:0;display:flex;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;text-align:left;font-family:var(--font-text);font-size:16px;font-weight:500;color:var(--ax-black)}
.faq__q .icon{flex:0 0 auto}
.faq__toggle{margin-left:auto;width:34px;height:34px;border-radius:999px;border:1.5px solid var(--ax-turquoise);color:var(--ax-turquoise);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all var(--dur)}
.faq__toggle svg{width:16px;height:16px}
.faq__a{overflow:hidden;max-height:0;transition:max-height .3s var(--ease)}
.faq__a-inner{padding:0 54px 26px 4px;font-size:14.5px;line-height:1.6;color:var(--ax-teal)}

/* values + approach (about) */
.valuecard{background:var(--ax-teal);color:#fff;border-radius:var(--r-md);padding:22px 20px;min-height:150px}
.valuecard:nth-child(3),.valuecard:nth-child(2){background:var(--ax-dark-teal)}
.valuecard h4{font-family:var(--font-display);font-weight:300;font-size:20px;margin:0 0 10px}
.valuecard p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.8);margin:0}

.leadgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.leadtile{border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:1/1;background:var(--ax-dark-teal)}
.leadtile .ph{filter:none}
.leadtile__cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(to top,rgba(0,15,20,.85),transparent);color:#fff}
.leadtile__cap .nm{font-size:13px;font-weight:500}
.leadtile__cap .ti{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px}

@media(max-width:860px){
  .grid--4,.prodgrid,.mosaic,.leadgrid{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .case{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .checklist{grid-template-columns:1fr}
  .nav__links{display:none}
}