/* NARTOS — визуальный вес: цветные секции, bento, обложки работ, орнамент */

:root{
  --indigo:#1B2A5B;
  --pine:#17453A;
  --amber:#E08A1E;
  --clay:#8C4A2F;
  --gold:#C9A227;
}

/* ── орнамент: ромбы нартского узора, рисуется кодом ─────── */
.ornament{
  background-image:
    linear-gradient(135deg, currentColor 25%, transparent 25%),
    linear-gradient(225deg, currentColor 25%, transparent 25%),
    linear-gradient(45deg,  currentColor 25%, transparent 25%),
    linear-gradient(315deg, currentColor 25%, transparent 25%);
  background-position:12px 0, 12px 0, 0 0, 0 0;
  background-size:24px 24px;
  background-repeat:repeat;
}

/* полоса-орнамент между секциями */
.rule{height:16px;color:var(--brick);opacity:.16}
.rule--dark{color:#E4703F;opacity:.3}

/* ── крупное фоновое слово ───────────────────────────────── */
.ghost{
  position:absolute;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(120px,20vw,320px);line-height:.8;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(21,18,14,.07);
  pointer-events:none;user-select:none;z-index:0;
}
.sec--dark .ghost{-webkit-text-stroke-color:rgba(255,255,255,.07)}
.sec>.wrap{position:relative;z-index:1}

/* ── bento-сетка услуг ───────────────────────────────────── */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  grid-auto-rows:minmax(210px,auto);
}
.bento .card{padding:30px}
.bento .b-wide{grid-column:span 4}
.bento .b-half{grid-column:span 3}
.bento .b-third{grid-column:span 2}

/* тёмная карточка внутри сетки */
.card--coal{
  background:linear-gradient(155deg,#23201B,#15120E);border-color:#2B2620;color:var(--paper);
}
.card--coal h3{color:#fff}
.card--coal p{color:#C2B8AA}
.card--coal .card__for{border-color:rgba(255,255,255,.12);color:#9E9385}
.card--coal .card__for b{color:#fff}
.card--coal .card__ico{background:rgba(228,112,63,.16);color:#F0915B}
.card--coal:hover .card__ico{background:var(--brick);color:#fff}

/* кирпичная карточка */
.card--brick{
  background:linear-gradient(150deg,#D14A1D,#A93110);border-color:#A93110;color:#fff;
}
.card--brick h3{color:#fff}
.card--brick p{color:#FBE4D8}
.card--brick .card__for{border-color:rgba(255,255,255,.25);color:#FBE4D8}
.card--brick .card__for b{color:#fff}
.card--brick .card__ico{background:rgba(255,255,255,.16);color:#fff}
.card--brick:hover .card__ico{background:#fff;color:var(--brick)}
.card--brick::before{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%)}

/* крупная цифра-водяной знак в карточке */
.card__mark{
  position:absolute;right:-6px;bottom:-18px;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:120px;line-height:1;letter-spacing:-.06em;color:currentColor;opacity:.07;
  pointer-events:none;
}

/* ── обложки работ: у каждой свой мир ────────────────────── */
.cover{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;overflow:hidden;
}
.cover__deco{position:absolute;inset:0;opacity:.9}
.cover__t{
  position:relative;z-index:2;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,34px);line-height:1.02;letter-spacing:-.035em;
}
.cover__s{
  position:relative;z-index:2;margin-top:10px;font-family:'Geologica',sans-serif;font-weight:500;
  font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;
}
.cover__chip{
  position:absolute;right:22px;top:22px;z-index:2;
  font-family:'Geologica',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 14px;border-radius:99px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
}

.work__vis{background:var(--coal)}
.work__vis--med  {background:linear-gradient(160deg,#2C407F,#141E45)}
.work__vis--alba {background:linear-gradient(160deg,#F1E2CC,#DCC3A0)}
.work__vis--misha{background:linear-gradient(160deg,#F0A93E,#C96A12)}
.work__vis--abaza{background:linear-gradient(160deg,#1F5C4A,#0E3226)}
.work__vis--aul  {background:linear-gradient(160deg,#3D6B33,#1C3A1B)}

.work__vis--med   .cover,.work__vis--misha .cover,
.work__vis--abaza .cover,.work__vis--aul   .cover{color:#fff}
.work__vis--alba  .cover{color:#5C3A22}
.work__vis--alba  .cover__chip{background:rgba(92,58,34,.12)}

/* геометрия внутри обложек */
.deco-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at 70% 30%, #000, transparent 78%);
}
.deco-rings{position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;
  border:44px solid rgba(255,255,255,.12)}
.deco-rings::after{content:'';position:absolute;inset:-90px;border-radius:50%;border:1.5px solid rgba(255,255,255,.16)}
.deco-bars{position:absolute;left:0;right:0;bottom:0;height:56%;display:flex;align-items:flex-end;gap:9px;padding:0 26px;opacity:.5}
.deco-bars i{flex:1;background:rgba(255,255,255,.24);border-radius:5px 5px 0 0}
.deco-diag{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,
  rgba(255,255,255,.09) 0 12px, transparent 12px 26px)}
.deco-pix{position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(8,1fr);opacity:.55}
.deco-pix i{display:block}

/* ── секция чисел: кирпичный блок ────────────────────────── */
.sec--brick{
  background:linear-gradient(140deg,#D14A1D,#9B2F0F);color:#fff;position:relative;overflow:hidden;
}
.sec--brick .num b{color:#fff}
.sec--brick .num span{color:#FBE4D8}
.sec--brick .eyebrow{color:#FFD9C7}
.sec--brick .eyebrow::before{background:#FFD9C7}
.sec--brick h2{color:#fff}
.sec--brick .ornament{position:absolute;inset:0;color:#fff;opacity:.07}

/* ── контакты на угле ────────────────────────────────────── */
.sec--night{background:var(--coal);color:var(--paper);position:relative;overflow:hidden}
.sec--night h2{color:#fff}
.sec--night .lead{color:#C2B8AA}
.sec--night .eyebrow{color:#F0915B}
.sec--night .eyebrow::before{background:#F0915B}
.sec--night .way{background:#221D18;border-color:#2E2822;color:var(--paper)}
.sec--night .way:hover{background:#2A241E}
.sec--night .way b{color:#fff}
.sec--night .way span span{color:#A99E8F}
.sec--night .way__ico{background:rgba(240,145,91,.15);color:#F0915B}
.sec--night .contact__box{background:var(--paper);color:var(--ink)}
.sec--night .ornament{position:absolute;left:0;right:0;top:0;height:180px;color:#F0915B;opacity:.09}

/* ── акцентная плашка-цитата ─────────────────────────────── */
.claim{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding:clamp(26px,3.4vw,44px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,#23201B,#15120E);color:var(--paper);
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;margin-top:34px;
}
.claim__q{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:76px;line-height:.7;
  color:var(--brick);
}
.claim p{font-size:clamp(18px,2.1vw,24px);line-height:1.45;color:#EDE7DE;margin:0}
.claim b{color:#fff}

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento .b-wide{grid-column:span 4}
  .bento .b-half{grid-column:span 2}
  .bento .b-third{grid-column:span 2}
}
@media (max-width:760px){
  .cover__s{font-size:14px;letter-spacing:.1em}
  .cover__chip{font-size:14px;right:16px;top:16px;padding:6px 12px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento .b-wide,.bento .b-half,.bento .b-third{grid-column:span 1}
  .ghost{font-size:120px}
  .claim{grid-template-columns:1fr;gap:12px}
  .claim__q{font-size:52px}
  .cover{padding:20px}
  .card__mark{font-size:90px}
}