:root {
  --navy: #082b57;
  --navy-2: #0b3566;
  --teal: #1194a3;
  --teal-2: #28aeb8;
  --ink: #13243a;
  --muted: #66758b;
  --line: #dfe7ef;
  --soft: #f4f8fb;
  --soft-teal: #eaf8f9;
  --white: #ffffff;
  --shadow: 0 18px 48px rgba(8, 43, 87, .10);
  --radius: 22px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 92px 0; }
.section.alt { background: var(--soft); }
.section-head { max-width: 760px; margin-bottom: 42px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--teal); font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--teal); }
h1,h2,h3,h4 { line-height: 1.12; margin: 0; color: var(--navy); }
h1 { font-size: clamp(2.8rem, 7vw, 5.7rem); letter-spacing: -.055em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.035em; }
h3 { font-size: 1.35rem; }
p { margin: 0; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 720px; }
.muted { color: var(--muted); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(223,231,239,.8);
}
.navbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-icon { width: 48px; height: 48px; object-fit: contain; }
.brand-wordmark { width: 185px; height: 54px; object-fit: contain; object-position: left center; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { padding: 11px 15px; border-radius: 12px; color: #34465e; font-weight: 650; font-size: .94rem; }
.nav-links a:hover, .nav-links a.active { background: var(--soft-teal); color: var(--navy); }
.nav-cta { background: var(--navy) !important; color: var(--white) !important; padding-inline: 20px !important; }
.menu-btn { display:none; border:0; background:transparent; width:44px; height:44px; border-radius:10px; cursor:pointer; }
.menu-btn span { display:block; width:23px; height:2px; background:var(--navy); margin:5px auto; }

.hero {
  position: relative; overflow: hidden;
  padding: 104px 0 96px;
  background:
    radial-gradient(circle at 82% 20%, rgba(17,148,163,.13), transparent 27%),
    radial-gradient(circle at 67% 73%, rgba(8,43,87,.08), transparent 32%),
    linear-gradient(180deg, #fff, #f8fbfd 76%, #fff);
}
.hero::before {
  content:""; position:absolute; right:-140px; top:60px; width:520px; height:520px;
  border:1px solid rgba(17,148,163,.18); border-radius:50%;
}
.hero::after {
  content:""; position:absolute; right:-70px; top:130px; width:380px; height:380px;
  border:1px dashed rgba(8,43,87,.16); border-radius:50%;
}
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.18fr .82fr; gap:70px; align-items:center; }
.hero h1 .accent { color: var(--teal); }
.hero-copy > p { margin-top: 24px; font-size: 1.15rem; color: var(--muted); max-width: 760px; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:14px; font-weight:800; border:1px solid transparent; transition:.2s ease; }
.btn.primary { background:var(--navy); color:#fff; box-shadow:0 12px 30px rgba(8,43,87,.16); }
.btn.primary:hover { transform:translateY(-2px); background:var(--navy-2); }
.btn.secondary { background:#fff; border-color:var(--line); color:var(--navy); }
.btn.secondary:hover { border-color:var(--teal); color:var(--teal); }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.badge { border:1px solid #d9e6ed; background:#fff; border-radius:999px; padding:9px 13px; font-size:.82rem; font-weight:750; color:#476078; }

.hero-visual { position:relative; min-height: 500px; }
.logo-card {
  position:absolute; inset:24px 0 24px 40px; border-radius:32px; background:rgba(255,255,255,.88);
  border:1px solid rgba(223,231,239,.9); box-shadow:var(--shadow); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:42px;
}
.logo-card img { width:min(100%, 410px); filter:saturate(1.03) contrast(1.02); }
.data-line { position:absolute; height:1px; background:linear-gradient(90deg, transparent, rgba(17,148,163,.75), transparent); transform-origin:left; z-index:3; }
.data-line.one { width:190px; right:16px; top:115px; transform:rotate(-34deg); }
.data-line.two { width:155px; left:0; bottom:110px; transform:rotate(24deg); }
.data-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 7px rgba(17,148,163,.10); z-index:4; }
.data-dot.a { right:50px; top:88px; } .data-dot.b { left:6px; bottom:132px; } .data-dot.c { right:120px; bottom:72px; }

.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.trust-grid { display:grid; grid-template-columns: 1.3fr repeat(3, 1fr); align-items:center; gap:16px; padding:24px 0; }
.trust-grid strong { color:var(--navy); }
.trust-item { padding:9px 18px; border-left:1px solid var(--line); font-weight:700; color:#53677d; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:0 8px 26px rgba(8,43,87,.04);
  transition:.22s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfe3e8; }
.icon-box { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:24px; background:var(--soft-teal); color:var(--teal); font-size:1.35rem; font-weight:900; }
.card h3 { margin-bottom:12px; }
.card p { color:var(--muted); }
.card .link { display:inline-flex; margin-top:20px; color:var(--teal); font-weight:800; }

.approach { display:grid; grid-template-columns:.8fr 1.2fr; gap:68px; align-items:start; }
.steps { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.step { background:#fff; border:1px solid var(--line); border-radius:20px; padding:25px; }
.step-num { color:var(--teal); font-size:.78rem; letter-spacing:.1em; font-weight:900; margin-bottom:12px; }
.step h3 { margin-bottom:9px; }
.step p { color:var(--muted); font-size:.95rem; }

.industry-grid { display:flex; flex-wrap:wrap; gap:12px; }
.industry { padding:12px 15px; border-radius:12px; background:#fff; border:1px solid var(--line); color:#43566c; font-weight:700; }

.cta-panel { position:relative; overflow:hidden; border-radius:30px; padding:58px; background:var(--navy); color:#fff; }
.cta-panel::after { content:""; position:absolute; width:330px; height:330px; right:-90px; top:-110px; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.cta-panel h2 { color:#fff; max-width:700px; }
.cta-panel p { max-width:700px; color:#cbd8e6; margin-top:16px; }
.cta-panel .btn { margin-top:26px; background:#fff; color:var(--navy); }

.page-hero { padding:86px 0 70px; background:linear-gradient(135deg,#f8fbfd 0%,#edf8f9 100%); border-bottom:1px solid var(--line); }
.page-hero-grid { display:grid; grid-template-columns:1fr .48fr; gap:55px; align-items:center; }
.page-hero h1 { font-size:clamp(2.7rem,6vw,4.7rem); }
.page-hero p { margin-top:20px; color:var(--muted); font-size:1.1rem; max-width:760px; }
.page-mark { width:220px; height:220px; border-radius:50%; border:1px solid rgba(17,148,163,.22); display:grid; place-items:center; margin-left:auto; background:rgba(255,255,255,.75); }
.page-mark img { width:155px; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.copy-stack { display:grid; gap:18px; }
.copy-stack p { color:var(--muted); }
.feature-list { display:grid; gap:12px; margin-top:22px; }
.feature { display:flex; gap:12px; align-items:flex-start; }
.check { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--soft-teal); color:var(--teal); display:grid; place-items:center; font-weight:900; margin-top:1px; }

.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.value { padding:22px; border-radius:16px; border:1px solid var(--line); background:#fff; text-align:center; font-weight:800; color:var(--navy); }
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.statement { background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; }
.statement h3 { margin-bottom:14px; }
.statement p { color:var(--muted); }

.service-block { display:grid; grid-template-columns:.43fr 1.57fr; gap:42px; padding:45px 0; border-bottom:1px solid var(--line); }
.service-block:last-child { border-bottom:0; }
.service-title { position:sticky; top:115px; align-self:start; }
.service-title .service-no { color:var(--teal); font-weight:900; font-size:.82rem; letter-spacing:.12em; margin-bottom:13px; }
.service-title h2 { font-size:2.2rem; }
.service-title p { color:var(--muted); margin-top:13px; }
.service-content { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.service-list-card { border:1px solid var(--line); border-radius:20px; padding:28px; background:#fff; }
.service-list-card h3 { margin-bottom:16px; }
ul.clean { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
ul.clean li { position:relative; padding-left:23px; color:#53677d; }
ul.clean li::before { content:""; position:absolute; left:0; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--teal); }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:38px; }
.contact-panel { background:var(--navy); color:#fff; border-radius:26px; padding:38px; }
.contact-panel h2,.contact-panel h3 { color:#fff; }
.contact-panel p { color:#cbd8e6; }
.contact-detail { display:grid; gap:20px; margin-top:34px; }
.contact-row { display:grid; grid-template-columns:42px 1fr; gap:13px; align-items:start; }
.contact-ico { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.1); font-weight:900; }
.contact-row strong { display:block; margin-bottom:2px; }
.contact-form { border:1px solid var(--line); border-radius:26px; padding:36px; background:#fff; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:8px; }
.field.full { grid-column:1/-1; }
label { font-weight:750; color:#354a61; font-size:.9rem; }
input, textarea { width:100%; border:1px solid #d6e1e9; border-radius:13px; padding:14px 15px; outline:none; background:#fbfdfe; color:var(--ink); }
input:focus, textarea:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(17,148,163,.09); }
textarea { min-height:150px; resize:vertical; }
.form-note { margin-top:14px; color:var(--muted); font-size:.86rem; }

.site-footer { background:#071f3e; color:#b9c7d6; padding:56px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.4fr .75fr .85fr; gap:44px; }
.footer-brand { display:flex; align-items:center; gap:12px; color:#fff; font-weight:900; font-size:1.2rem; }
.footer-brand img { width:54px; border-radius:12px; background:#fff; }
.footer-copy { margin-top:16px; max-width:500px; }
.footer-title { color:#fff; font-size:.83rem; text-transform:uppercase; letter-spacing:.11em; font-weight:800; margin-bottom:16px; }
.footer-links { display:grid; gap:9px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; gap:20px; font-size:.86rem; }

@media (max-width: 940px) {
  .hero-grid, .page-hero-grid, .approach, .two-col, .contact-grid { grid-template-columns:1fr; }
  .hero-visual { min-height:390px; }
  .logo-card { inset:20px; }
  .page-mark { margin:18px 0 0; }
  .card-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .service-block { grid-template-columns:1fr; }
  .service-title { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-item:nth-child(2) { border-left:0; }
}
@media (max-width: 760px) {
  .container { width:min(var(--max), calc(100% - 28px)); }
  .section { padding:70px 0; }
  .navbar { min-height:72px; }
  .brand-icon { width:40px; height:40px; }
  .brand-wordmark { width:148px; height:44px; }
  .menu-btn { display:block; }
  .nav-links { display:none; position:absolute; top:72px; left:14px; right:14px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .nav-links a { width:100%; }
  .hero { padding:72px 0 64px; }
  .hero-grid { gap:40px; }
  .hero-visual { min-height:330px; }
  .logo-card { padding:28px; }
  .steps, .mission-grid, .service-content, .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .cta-panel { padding:38px 28px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > div:first-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-item { border-left:0; border-top:1px solid var(--line); }
  .trust-item:nth-child(2) { border-top:1px solid var(--line); }
}
@media (max-width: 460px) {
  .brand-wordmark { width:130px; }
  .values-grid { grid-template-columns:1fr; }
  h1 { font-size:2.65rem; }
}

/* Hero photography update — real-people SelkaLogik visuals */
/* Home hero visual position — lift the full image cluster higher on desktop */
.hero .hero-visual {
  top: -70px;
}

.hero-photo-card {
  inset: 8px 0 8px 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.hero-photo-card img {
  width: min(100%, 520px);
  height: auto;
  object-fit: contain;
  filter: none;
  border-radius: 28px;
  margin: auto;
}

.page-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);
}
.page-mark.page-photo {
  width: min(100%, 470px);
  height: auto;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-left: auto;
  overflow: visible;
}
.page-mark.page-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

@media (max-width: 940px) {
  .hero .hero-visual { top: 0; }
  .hero-photo-card { inset: 0; }
  .hero-photo-card img { width: min(100%, 500px); }
  .page-mark.page-photo { width: min(100%, 450px); margin: 22px auto 0; }
}

@media (max-width: 760px) {
  .hero-photo-card { padding: 0; }
  .hero-photo-card img { width: min(100%, 430px); }
  .page-mark.page-photo { width: min(100%, 390px); }
}


/* Linked service/industry detail pages */
.badge, .industry { transition: .2s ease; cursor: pointer; }
.badge:hover { border-color: var(--teal); color: var(--teal); background: var(--soft-teal); transform: translateY(-1px); }
.industry:hover { border-color: var(--teal); color: var(--teal); background: var(--soft-teal); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8,43,87,.06); }
.service-detail-link { display:inline-flex; margin-top:18px; color:var(--teal); font-weight:850; }
.service-detail-link:hover { color:var(--navy); }
.service-detail-links { display:flex; flex-wrap:wrap; gap:18px; }

.detail-hero { position:relative; overflow:hidden; padding:86px 0 80px; background:linear-gradient(135deg,#f8fbfd 0%,#edf8f9 100%); border-bottom:1px solid var(--line); }
.detail-hero::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(17,148,163,.14); border-radius:50%; right:-180px; top:-180px; }
.detail-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:70px; align-items:center; }
.detail-hero h1 { font-size:clamp(3rem,6vw,5rem); }
.detail-tagline { margin-top:16px; font-size:1.38rem; line-height:1.4; color:var(--navy); font-weight:800; max-width:780px; }
.detail-hero .lead { margin-top:18px; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:18px; color:#718198; font-size:.86rem; }
.breadcrumbs a:hover { color:var(--teal); }
.detail-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.detail-mark { width:240px; height:240px; margin-left:auto; border-radius:50%; background:#fff; border:1px solid rgba(17,148,163,.2); box-shadow:var(--shadow); display:grid; place-items:center; align-content:center; gap:10px; }
.detail-mark img { width:112px; height:112px; object-fit:contain; }
.detail-mark span { color:var(--teal); text-transform:uppercase; font-size:.72rem; font-weight:900; letter-spacing:.13em; }
.detail-main-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:70px; align-items:start; }
.detail-help-list { list-style:none; padding:0; margin:32px 0 0; display:grid; gap:17px; }
.detail-help-list li { position:relative; padding:19px 20px 19px 48px; border:1px solid var(--line); border-radius:16px; color:#53677d; background:#fff; }
.detail-help-list li::before { content:"✓"; position:absolute; left:18px; top:18px; width:21px; height:21px; border-radius:50%; display:grid; place-items:center; background:var(--soft-teal); color:var(--teal); font-size:.78rem; font-weight:900; }
.detail-value-panel { background:var(--navy); color:#fff; border-radius:26px; padding:32px; position:sticky; top:115px; }
.detail-value-panel .eyebrow { color:#6ed7df; }
.value-stack { display:grid; gap:12px; margin-top:8px; }
.value-card { display:flex; gap:12px; align-items:flex-start; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.value-card:last-child { border-bottom:0; }
.value-card strong { color:#fff; line-height:1.4; }
.value-check { flex:0 0 25px; width:25px; height:25px; border-radius:50%; background:rgba(110,215,223,.14); color:#6ed7df; display:grid; place-items:center; font-weight:900; }
.detail-chips { display:flex; flex-wrap:wrap; gap:13px; }
.detail-chip { padding:12px 15px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#43566c; font-weight:750; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.related-card { border:1px solid var(--line); border-radius:20px; padding:25px; background:#fff; display:grid; gap:9px; transition:.2s ease; }
.related-card span { color:var(--teal); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; font-weight:900; }
.related-card strong { color:var(--navy); font-size:1.2rem; }
.related-card b { color:#6b7b8d; font-size:.9rem; margin-top:7px; }
.related-card:hover { transform:translateY(-3px); border-color:#c8e1e6; box-shadow:var(--shadow); }

@media (max-width: 940px) {
  .detail-hero-grid, .detail-main-grid { grid-template-columns:1fr; }
  .detail-mark { margin:0; width:200px; height:200px; }
  .detail-value-panel { position:static; }
  .related-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .detail-hero { padding:70px 0 60px; }
  .detail-mark { width:170px; height:170px; }
  .detail-mark img { width:85px; height:85px; }
  .detail-tagline { font-size:1.15rem; }
}


/* Detail page photography update */
.detail-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 56px;
}
.detail-mark.detail-photo {
  width: min(100%, 430px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  overflow: visible;
}
.detail-mark.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 940px) {
  .detail-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .detail-mark.detail-photo {
    width: min(100%, 430px);
    margin: 0 auto;
  }
}
@media (max-width: 760px) {
  .detail-mark.detail-photo {
    width: min(100%, 360px);
  }
}


/* SelkaLogik Core Values — linked detail pages */
.value-link {
  transition: .2s ease;
  position: relative;
  min-height: 84px;
  display: grid;
  place-items: center;
}
.value-link:hover {
  transform: translateY(-3px);
  border-color: #bcdfe3;
  color: var(--teal);
  box-shadow: 0 12px 28px rgba(8,43,87,.07);
}
.value-detail-hero::before {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -210px;
  width: 440px;
  height: 440px;
  border: 1px dashed rgba(8,43,87,.10);
  border-radius: 50%;
}
.value-number-mark {
  background: linear-gradient(145deg,#ffffff,#f2fbfc);
  gap: 4px;
}
.value-number-mark .value-number {
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--navy);
  font-weight: 900;
}
.value-number-mark > span:last-child {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  font-size: .72rem;
}
.core-standard-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) 150px;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 46px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(8,43,87,.05);
}
.core-standard-panel h2 { max-width: 850px; }
.standard-symbol {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-left: auto;
  background: var(--navy);
  color: #fff;
  font-size: 2.6rem;
  font-weight: 900;
  box-shadow: 0 0 0 11px var(--soft-teal);
}
@media (max-width: 760px) {
  .core-standard-panel { grid-template-columns: 1fr; padding: 30px 24px; }
  .standard-symbol { margin: 4px 0 0; width: 105px; height: 105px; font-size: 2.1rem; }
  .value-number-mark .value-number { font-size: 3.8rem; }
}

/* Selected Projects + project methodology */
.project-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 82px;
  background:
    radial-gradient(circle at 84% 18%, rgba(17,148,163,.12), transparent 30%),
    linear-gradient(135deg,#f8fbfd 0%,#edf8f9 100%);
  border-bottom:1px solid var(--line);
}
.project-hero::after {
  content:""; position:absolute; right:-120px; top:-160px; width:520px; height:520px;
  border:1px solid rgba(17,148,163,.16); border-radius:50%;
}
.project-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.72fr); gap:60px; align-items:center; }
.project-hero h1 { font-size:clamp(3rem,6vw,5.1rem); }
.project-hero .lead { margin-top:20px; }
.project-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.project-hero-collage { position:relative; min-height:420px; }
.project-hero-collage img { position:absolute; border-radius:24px; box-shadow:var(--shadow); background:#fff; border:1px solid var(--line); object-fit:cover; }
.project-hero-collage img:first-child { width:76%; left:0; top:16px; }
.project-hero-collage img:last-child { width:65%; right:0; bottom:10px; }

.featured-project { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:46px; align-items:center; }
.featured-project.reverse .featured-project-image { order:2; }
.featured-project.reverse .featured-project-copy { order:1; }
.featured-project-image { padding:18px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 40px rgba(8,43,87,.07); }
.featured-project-image img { width:100%; border-radius:18px; }
.featured-project-copy h3 { font-size:1.8rem; margin-bottom:14px; }
.featured-project-copy p { color:var(--muted); }
.featured-project-copy .btn { margin-top:24px; }
.mini-method { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.mini-method span { padding:8px 11px; border:1px solid #d8e6ec; border-radius:999px; background:#fff; color:#52677e; font-size:.77rem; font-weight:800; }

.project-teaser-section { background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%); }
.project-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.project-card { overflow:hidden; border:1px solid var(--line); background:#fff; border-radius:24px; box-shadow:0 8px 28px rgba(8,43,87,.05); transition:.22s ease; }
.project-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#c9e1e6; }
.project-card img { width:100%; height:260px; object-fit:cover; background:#f7fafc; }
.project-card-body { padding:26px; }
.project-card-body span { color:var(--teal); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; font-weight:900; }
.project-card-body h3 { margin-top:8px; margin-bottom:10px; font-size:1.45rem; }
.project-card-body p { color:var(--muted); }
.project-card-body b { display:inline-block; margin-top:17px; color:var(--teal); }
.project-teaser-link { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.project-detail-hero { padding:86px 0 74px; background:linear-gradient(135deg,#f8fbfd 0%,#edf8f9 100%); border-bottom:1px solid var(--line); }
.project-detail-hero h1 { max-width:1000px; font-size:clamp(3rem,6vw,5.15rem); }
.project-kicker { max-width:940px; margin-top:18px; color:var(--muted); font-size:1.22rem; }
.project-process { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:60px; align-items:start; }
.project-method-list { display:grid; gap:15px; }
.project-method-list article { display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start; border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.project-method-list article > b { width:44px; height:44px; border-radius:14px; background:var(--soft-teal); color:var(--teal); display:grid; place-items:center; font-size:1.05rem; }
.project-method-list h3 { margin-bottom:7px; }
.project-method-list p { color:var(--muted); }
.project-side-note { position:sticky; top:112px; border-radius:22px; padding:28px; background:var(--navy); display:grid; gap:10px; }
.project-side-note .eyebrow { color:#6ed7df; }
.project-side-note a { color:#fff; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-weight:800; }
.project-side-note a:last-child { border-bottom:0; }
.project-figure { margin:0; border:1px solid var(--line); border-radius:24px; padding:18px; background:#fff; box-shadow:0 10px 32px rgba(8,43,87,.05); }
.project-figure img { width:100%; border-radius:15px; }
.project-figure figcaption { color:var(--muted); font-size:.85rem; margin-top:12px; }
.before-after-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.before-after-grid figure, .innovation-layout figure { margin:0; border:1px solid var(--line); border-radius:22px; background:#fff; padding:16px; box-shadow:0 8px 28px rgba(8,43,87,.05); }
.before-after-grid img { width:100%; height:430px; object-fit:contain; border-radius:13px; background:#fff; }
.before-after-grid.photo-pair img { object-fit:cover; }
.figure-label { color:var(--teal); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; font-weight:900; margin:0 0 11px 2px; }
.innovation-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; align-items:start; }
.innovation-layout > figure img { width:100%; height:520px; object-fit:contain; }
.innovation-photos { display:grid; grid-template-columns:1fr; gap:24px; }
.innovation-photos img { width:100%; height:300px; object-fit:cover; border-radius:13px; }
.project-related { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
.project-nav { display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding:28px 0 12px; font-weight:800; color:var(--teal); }

.methodology-grid { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:68px; align-items:start; }
.methodology-steps { display:grid; gap:15px; }
.methodology-steps article { display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start; border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.methodology-steps article > span { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:.78rem; font-weight:900; }
.methodology-steps h3 { margin-bottom:7px; }
.methodology-steps p { color:var(--muted); }
.methodology-callout { display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center; border:1px solid var(--line); border-radius:26px; padding:38px; background:linear-gradient(135deg,#fff,#f1f9fa); }
.methodology-callout-actions { display:flex; flex-direction:column; gap:12px; }

@media (max-width: 1000px) {
  .project-hero-grid, .featured-project, .project-process, .methodology-grid, .project-related { grid-template-columns:1fr; }
  .project-hero-collage { min-height:360px; max-width:600px; width:100%; margin:0 auto; }
  .featured-project.reverse .featured-project-image, .featured-project.reverse .featured-project-copy { order:initial; }
  .project-side-note { position:static; }
  .innovation-layout { grid-template-columns:1fr; }
  .methodology-callout { grid-template-columns:1fr; }
  .methodology-callout-actions { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width: 760px) {
  .project-hero, .project-detail-hero { padding:68px 0 58px; }
  .project-card-grid, .before-after-grid { grid-template-columns:1fr; }
  .project-card img { height:220px; }
  .project-hero-collage { min-height:310px; }
  .before-after-grid img, .innovation-layout > figure img { height:auto; max-height:500px; }
  .innovation-photos img { height:auto; }
  .project-nav { flex-direction:column; }
  .methodology-callout { padding:28px; }
}
@media (max-width: 520px) {
  .project-hero-collage { min-height:255px; }
  .project-method-list article, .methodology-steps article { grid-template-columns:44px 1fr; padding:18px; gap:13px; }
  .project-method-list article > b, .methodology-steps article > span { width:38px; height:38px; }
}

/* Selected Projects hero — single clean image after removing the highlighted chart */
.project-hero-collage.single-image {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-hero-collage.single-image img {
  position: static;
  width: min(100%, 500px);
  height: auto;
  max-height: 390px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
@media (max-width: 940px) {
  .project-hero-collage.single-image { min-height: auto; }
  .project-hero-collage.single-image img { width: min(100%, 560px); max-height: none; }
}