/* BOLIX — Architektams ir dizaineriams landing page
 * Editorial B2B / architectural minimalism, no photography
 * 2026-08-07
 */

.bolix-arch{
  --ba-bg:#f6f6f4;
  --ba-paper:#fff;
  --ba-ink:#23262b;
  --ba-muted:#69707b;
  --ba-line:#dedfdf;
  --ba-soft:#ececea;
  --ba-red:#e30613;
  --ba-dark:#1f2226;
  --ba-max:1240px;
  background:var(--ba-bg);
  color:var(--ba-ink);
  font-family:inherit;
}
.bolix-arch *{box-sizing:border-box}
.bolix-arch a{text-decoration:none}
.bolix-arch__container{width:min(var(--ba-max),calc(100% - 48px));margin:0 auto}
.bolix-arch__section{padding:58px 0;border-top:1px solid var(--ba-line)}
.bolix-arch__section--white{background:var(--ba-paper)}
.bolix-arch__section--dark{background:var(--ba-dark);color:#fff;border-top:0}
.bolix-arch__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.105em;text-transform:uppercase;color:var(--ba-red)}
.bolix-arch__eyebrow::before{content:"";width:24px;height:2px;background:var(--ba-red);flex:0 0 24px}
.bolix-arch h1,.bolix-arch h2,.bolix-arch h3,.bolix-arch p{margin-top:0}
.bolix-arch h1{max-width:760px;margin-bottom:20px;font-size:clamp(42px,5vw,68px);line-height:.98;letter-spacing:-.045em;font-weight:800}
.bolix-arch h2{margin-bottom:14px;font-size:clamp(31px,3.25vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:800}
.bolix-arch h3{font-size:20px;line-height:1.15;letter-spacing:-.015em;font-weight:800}
.bolix-arch p{color:var(--ba-muted);font-size:16px;line-height:1.58}
.bolix-arch__lead{max-width:690px!important;margin-bottom:0!important;font-size:18px!important;line-height:1.58!important}
.bolix-arch__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.bolix-arch__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid var(--ba-ink);font-size:13px;font-weight:800;letter-spacing:.02em;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.bolix-arch__btn:hover{transform:translateY(-1px)}
.bolix-arch__btn--primary{background:var(--ba-red);border-color:var(--ba-red);color:#fff}
.bolix-arch__btn--secondary{background:transparent;color:var(--ba-ink)}
.bolix-arch__btn--light{background:#fff;border-color:#fff;color:var(--ba-ink)}
.bolix-arch__text-link{display:inline-flex;align-items:center;gap:9px;color:var(--ba-ink);font-size:12px;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.bolix-arch__text-link::after{content:"→";font-size:16px;transition:transform .18s ease}
.bolix-arch__text-link:hover::after{transform:translateX(3px)}

/* Hero */
.bolix-arch__hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ba-line)}
.bolix-arch__hero::before{content:"";position:absolute;inset:0;opacity:.52;pointer-events:none;background-image:linear-gradient(var(--ba-line) 1px,transparent 1px),linear-gradient(90deg,var(--ba-line) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 0%,#000 50%,#000 100%)}
.bolix-arch__hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:58px;align-items:center;min-height:590px;padding:62px 0}
.bolix-arch__hero-copy{position:relative;z-index:3}
.bolix-arch__hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;color:var(--ba-muted);font-size:12px;font-weight:700}
.bolix-arch__hero-meta span{display:flex;align-items:center;gap:7px}
.bolix-arch__hero-meta span::before{content:"";width:5px;height:5px;background:var(--ba-red)}

/* CSS-only architectural board */
.bolix-arch__board{position:relative;min-height:438px;background:#efefec;border:1px solid #cfd1d2;box-shadow:0 16px 36px rgba(31,34,38,.06);overflow:hidden}
.bolix-arch__board::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(56,60,66,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(56,60,66,.08) 1px,transparent 1px);background-size:24px 24px}
.bolix-arch__board-head{position:absolute;left:24px;right:24px;top:22px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.bolix-arch__board-kicker{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#555b64}
.bolix-arch__brand-o{width:32px;height:25px;background:var(--ba-red);display:grid;place-items:center}
.bolix-arch__brand-o::after{content:"";width:14px;height:14px;border:4px solid #fff;border-radius:50%}
.bolix-arch__facade{position:absolute;left:9%;right:9%;top:20%;bottom:16%;border-left:2px solid #858b92;border-bottom:2px solid #858b92}
.bolix-arch__facade::before{content:"";position:absolute;left:14%;top:10%;width:52%;height:54%;border:2px solid #858b92;background:rgba(255,255,255,.25)}
.bolix-arch__facade::after{content:"";position:absolute;right:5%;bottom:0;width:28%;height:36%;border:2px solid #858b92;border-bottom:0;background:rgba(255,255,255,.34)}
.bolix-arch__facade-line{position:absolute;background:#858b92;z-index:1}
.bolix-arch__facade-line--1{left:22%;top:38%;width:44%;height:2px}
.bolix-arch__facade-line--2{left:40%;top:20%;width:2px;height:48%}
.bolix-arch__facade-line--3{right:19%;top:50%;width:2px;height:34%}
.bolix-arch__palette{position:absolute;left:24px;right:24px;bottom:20px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;z-index:3}
.bolix-arch__swatch{height:34px;border:1px solid rgba(31,34,38,.14)}
.bolix-arch__swatch:nth-child(1){background:#d9d1c3}
.bolix-arch__swatch:nth-child(2){background:#beb5a4}
.bolix-arch__swatch:nth-child(3){background:#8f908b}
.bolix-arch__swatch:nth-child(4){background:#646663}
.bolix-arch__swatch:nth-child(5){background:var(--ba-red)}
.bolix-arch__note{position:absolute;z-index:4;padding:7px 9px;background:#fff;border:1px solid #d4d6d8;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#626870}
.bolix-arch__note--1{right:8%;top:24%}
.bolix-arch__note--2{left:12%;top:58%}

/* Trust strip */
.bolix-arch__trust{background:#fff;border-bottom:1px solid var(--ba-line)}
.bolix-arch__trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.bolix-arch__trust-item{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center;padding:20px 22px;border-left:1px solid var(--ba-line)}
.bolix-arch__trust-item:first-child{border-left:0}
.bolix-arch__trust-icon{width:42px;height:42px;border:1px solid #d8dadd;display:grid;place-items:center;font-size:16px;font-weight:900;color:var(--ba-ink)}
.bolix-arch__trust-icon--brand{background:var(--ba-red);border-color:var(--ba-red)}
.bolix-arch__trust-icon--brand::after{content:"";width:16px;height:16px;border:4px solid #fff;border-radius:50%}
.bolix-arch__trust-item b{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.045em;text-transform:uppercase}
.bolix-arch__trust-item span{display:block;color:var(--ba-muted);font-size:11px;line-height:1.35}

/* Section headings */
.bolix-arch__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);gap:48px;align-items:end;margin-bottom:28px}
.bolix-arch__head p{margin-bottom:2px}

/* Why cards */
.bolix-arch__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bolix-arch__card{display:flex;flex-direction:column;min-height:238px;padding:22px;background:#fff;border:1px solid var(--ba-line)}
.bolix-arch__card-mark{display:grid;place-items:center;width:38px;height:38px;margin-bottom:26px;border:1px solid var(--ba-ink);font-size:15px;font-weight:900}
.bolix-arch__card h3{min-height:46px;margin-bottom:10px}
.bolix-arch__card p{margin-bottom:0;font-size:14px;line-height:1.5}
.bolix-arch__card .bolix-arch__text-link{margin-top:auto;padding-top:18px}

/* Value split */
.bolix-arch__split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;align-items:start}
.bolix-arch__split-copy{position:sticky;top:118px}
.bolix-arch__split-copy p{max-width:570px}
.bolix-arch__capabilities{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ba-line);border-left:1px solid var(--ba-line)}
.bolix-arch__cap{min-height:178px;padding:20px;background:#fff;border-right:1px solid var(--ba-line);border-bottom:1px solid var(--ba-line)}
.bolix-arch__cap-no{margin-bottom:28px;color:var(--ba-red);font-size:11px;font-weight:900;letter-spacing:.08em}
.bolix-arch__cap h3{margin-bottom:8px}
.bolix-arch__cap p{margin-bottom:0;font-size:14px}

/* Material palette */
.bolix-arch__material-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:210px 210px;gap:12px}
.bolix-arch__material{position:relative;overflow:hidden;padding:18px;border:1px solid rgba(31,34,38,.14);display:flex;flex-direction:column;justify-content:flex-end}
.bolix-arch__material:first-child{grid-row:1/3;background:linear-gradient(135deg,#c9c0ae,#e5e0d6 48%,#b6ad9d)}
.bolix-arch__material:nth-child(2){background:repeating-linear-gradient(45deg,#e5e1da 0 8px,#d6d1c8 8px 10px)}
.bolix-arch__material:nth-child(3){background:linear-gradient(120deg,#6f726e,#9a9c96)}
.bolix-arch__material:nth-child(4){background:radial-gradient(circle at 20% 20%,#f0eee9 0 2px,transparent 3px),#d8d6d0;background-size:13px 13px}
.bolix-arch__material:nth-child(5){background:linear-gradient(135deg,#392e2b,#715149 55%,#b27b6a)}
.bolix-arch__material::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(31,34,38,.62) 100%)}
.bolix-arch__material b,.bolix-arch__material span{position:relative;z-index:2;color:#fff}
.bolix-arch__material b{font-size:17px}
.bolix-arch__material span{margin-top:4px;font-size:11px;opacity:.86}

/* Process */
.bolix-arch__process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ba-line);border-bottom:1px solid var(--ba-line)}
.bolix-arch__step{position:relative;padding:22px 24px 24px;border-left:1px solid var(--ba-line)}
.bolix-arch__step:first-child{border-left:0}
.bolix-arch__step-no{margin-bottom:34px;color:var(--ba-red);font-size:12px;font-weight:900}
.bolix-arch__step h3{margin-bottom:8px}
.bolix-arch__step p{margin-bottom:0;font-size:14px}

/* Project types */
.bolix-arch__projects{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bolix-arch__project{position:relative;min-height:210px;padding:20px;background:#fff;border:1px solid var(--ba-line);overflow:hidden}
.bolix-arch__project::after{content:"";position:absolute;right:-14px;bottom:-14px;width:88px;height:88px;border:1px solid #c7c9ca;transform:rotate(45deg)}
.bolix-arch__project-tag{display:inline-block;margin-bottom:42px;padding:5px 7px;background:#f0f0ee;color:#61666e;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.bolix-arch__project h3{max-width:180px;margin-bottom:8px}
.bolix-arch__project p{max-width:220px;margin-bottom:0;font-size:13px}

/* Resources */
.bolix-arch__resources{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.bolix-arch__resource-primary{padding:28px;background:var(--ba-red);color:#fff}
.bolix-arch__resource-primary p{max-width:520px;color:rgba(255,255,255,.82)}
.bolix-arch__resource-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ba-line);border-left:1px solid var(--ba-line)}
.bolix-arch__resource{display:flex;flex-direction:column;justify-content:space-between;min-height:150px;padding:18px;background:#fff;border-right:1px solid var(--ba-line);border-bottom:1px solid var(--ba-line);color:var(--ba-ink)}
.bolix-arch__resource b{font-size:14px}
.bolix-arch__resource span{font-size:20px;line-height:1;color:var(--ba-red)}

/* CTA */
.bolix-arch__cta{display:grid;grid-template-columns:1fr .74fr;gap:44px;align-items:end}
.bolix-arch__cta h2{max-width:720px;margin-bottom:14px;color:#fff}
.bolix-arch__cta p{max-width:680px;margin-bottom:0;color:rgba(255,255,255,.72)}
.bolix-arch__cta-side{padding:22px;border:1px solid rgba(255,255,255,.18)}
.bolix-arch__cta-side b{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.bolix-arch__cta-side p{margin-bottom:18px;font-size:13px}

@media(max-width:1080px){
  .bolix-arch__hero-grid{grid-template-columns:1fr .8fr;gap:36px}
  .bolix-arch__cards,.bolix-arch__projects{grid-template-columns:1fr 1fr}
  .bolix-arch__trust-grid{grid-template-columns:1fr 1fr}
  .bolix-arch__trust-item:nth-child(3){border-left:0;border-top:1px solid var(--ba-line)}
  .bolix-arch__trust-item:nth-child(4){border-top:1px solid var(--ba-line)}
  .bolix-arch__split{grid-template-columns:1fr;gap:28px}
  .bolix-arch__split-copy{position:static}
  .bolix-arch__process{grid-template-columns:1fr 1fr}
  .bolix-arch__step:nth-child(3){border-left:0;border-top:1px solid var(--ba-line)}
  .bolix-arch__step:nth-child(4){border-top:1px solid var(--ba-line)}
}

@media(max-width:760px){
  .bolix-arch__container{width:min(100% - 32px,var(--ba-max))}
  .bolix-arch__section{padding:40px 0}
  .bolix-arch h1{font-size:39px;line-height:1.01}
  .bolix-arch h2{font-size:31px}
  .bolix-arch__lead{font-size:16px!important;line-height:1.5!important}
  .bolix-arch__hero::before{background-size:44px 44px}
  .bolix-arch__hero-grid{grid-template-columns:1fr;min-height:0;padding:36px 0 28px;gap:24px}
  .bolix-arch__board{min-height:275px}
  .bolix-arch__facade{top:19%;bottom:19%}
  .bolix-arch__palette{bottom:14px}
  .bolix-arch__head{grid-template-columns:1fr;gap:6px;margin-bottom:22px}
  .bolix-arch__cards,.bolix-arch__projects{grid-template-columns:1fr}
  .bolix-arch__card{min-height:0}
  .bolix-arch__card-mark{margin-bottom:18px}
  .bolix-arch__card h3{min-height:0}
  .bolix-arch__capabilities{grid-template-columns:1fr}
  .bolix-arch__cap{min-height:0}
  .bolix-arch__material-grid{grid-template-columns:1fr 1fr;grid-template-rows:240px 150px 150px}
  .bolix-arch__material:first-child{grid-column:1/3;grid-row:auto}
  .bolix-arch__process{grid-template-columns:1fr}
  .bolix-arch__step{border-left:0;border-top:1px solid var(--ba-line);padding:18px 20px}
  .bolix-arch__step:first-child{border-top:0}
  .bolix-arch__step-no{margin-bottom:18px}
  .bolix-arch__resources{grid-template-columns:1fr}
  .bolix-arch__cta{grid-template-columns:1fr;gap:24px}
  .bolix-arch__btns{display:grid;grid-template-columns:1fr}
  .bolix-arch__btn{width:100%}
}

@media(max-width:520px){
  .bolix-arch__trust-grid{grid-template-columns:1fr 1fr}
  .bolix-arch__trust-item{grid-template-columns:32px 1fr;gap:8px;padding:12px 10px}
  .bolix-arch__trust-icon{width:32px;height:32px;font-size:13px}
  .bolix-arch__trust-item b{font-size:9.5px}
  .bolix-arch__trust-item span{font-size:9.5px}
  .bolix-arch__resource-list{grid-template-columns:1fr}
  .bolix-arch__material-grid{grid-template-columns:1fr;grid-template-rows:220px repeat(4,120px)}
  .bolix-arch__material:first-child{grid-column:auto}
}