/* ARMA page-specific styles — extracted from inline <style> blocks of the static pages.
   Asset url('assets/...') rewritten to the theme images path. */


/* ===== services.html ===== */












/* ===== service-legalization.html ===== */












  .fig-hero { position: relative; height: clamp(360px, 22.85vw, 468px); }
  .fig-hero__inner { position: relative; max-width: 2048px; margin: 0 auto; height: 100%; }
  .fig-hero__title {
    position: absolute; left: clamp(20px, 2.0vw, 41px); top: clamp(48px, 4.78vw, 98px);
    width: clamp(380px, 38.1vw, 780px);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(72px, 8.3vw, 170px); line-height: clamp(36px, 4.22vw, 86.4px);
    letter-spacing: -0.0235em; text-transform: uppercase; color: #333; margin: 0;
  }
  .fig-hero__cta {
    position: absolute; left: clamp(40%, 52.44vw, 1074px); top: clamp(150px, 14.8vw, 303px);
    width: clamp(420px, 45.55vw, 933px); height: clamp(82px, 8.06vw, 165px);
    background: #ff4501; display: flex; align-items: center;
    padding-left: clamp(38px, 6.74vw, 138px); padding-right: clamp(20px, 2vw, 41px);
  }
  .fig-hero__cta p {
    color: #fff; font-family: 'Fixel Display', sans-serif; font-weight: 500;
    font-size: clamp(11px, 1.07vw, 22px); line-height: clamp(15px, 1.46vw, 30px);
    max-width: 657px;
  }
  .fig-hero__bc {
    position: absolute; left: clamp(26px, 2.59vw, 53px); top: clamp(184px, 18.36vw, 376px);
    display: flex; align-items: center; gap: 8px; height: 20px;
    font-family: 'Fixel Display', sans-serif; font-size: clamp(11px, 0.879vw, 18px);
    color: rgba(51,51,51,0.5);
  }
  .fig-hero__bc .sep { font-family: 'Inter', sans-serif; }
  .fig-hero__bc .crumb-current { color: #ff4501; font-weight: 700; }
  .fig-hero__rule {
    position: absolute; left: clamp(20px, 2.0vw, 41px); top: clamp(148px, 14.75vw, 302px);
    right: clamp(20px, 2.0vw, 41px); height: 1px; background: rgba(10,10,10,0.1);
  }
  /* Mobile fallback: stack title/breadcrumb/orange callout vertically */
  @media (max-width: 1023px) {
    .fig-hero { height: auto; padding: 28px 20px 32px; }
    .fig-hero__inner { height: auto; }
    .fig-hero__title { position: static; width: 100%; font-size: clamp(56px, 16vw, 96px); line-height: 1; margin-bottom: 28px; }
    .fig-hero__rule { position: static; margin-bottom: 20px; left: 0; right: 0; width: 100%; }
    .fig-hero__bc { position: static; margin-bottom: 20px; flex-wrap: wrap; height: auto; }
    .fig-hero__cta { position: static; width: 100%; height: auto; padding: 18px 22px; }
    .fig-hero__cta p { font-size: 14px; line-height: 21px; max-width: 100%; }
  }


  .fig-01 {
    position: relative; background: #232323; color: #fff;
    height: clamp(880px, 60.26vw, 1234px);
  }
  .fig-01__inner { position: relative; max-width: 2048px; margin: 0 auto; height: 100%; }
  /* Eyebrow row */
  .fig-01__num {
    position: absolute; left: clamp(27px, 2.69vw, 55px); top: clamp(64px, 6.15vw, 126px);
    font-family: 'Fixel Display', sans-serif; font-weight: 500; font-size: clamp(11px, 0.879vw, 18px);
    letter-spacing: 0.122em; text-transform: uppercase; color: #fff;
  }
  .fig-01__eyebrow {
    position: absolute; left: clamp(55px, 5.42vw, 111px); top: clamp(64px, 6.2vw, 127px);
    font-family: 'Fixel Display', sans-serif; font-weight: 500; font-size: clamp(11px, 0.879vw, 18px);
    letter-spacing: 0.122em; text-transform: uppercase; color: #fff; line-height: 16.5px;
  }
  .fig-01__rule {
    position: absolute; left: clamp(116px, 11.57vw, 237px); top: clamp(67px, 6.69vw, 137px);
    right: clamp(20px, 2vw, 43px); height: 1px; background: rgba(255,255,255,0.10);
  }
  /* Section heading */
  .fig-01__h2 {
    position: absolute; left: clamp(27px, 2.69vw, 55px); top: clamp(108px, 10.89vw, 223px);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(48px, 4.88vw, 100px); line-height: clamp(40px, 4.22vw, 86.4px);
    letter-spacing: -0.048em; text-transform: uppercase; color: rgba(255,255,255,0.70);
    margin: 0; max-width: clamp(540px, 58.25vw, 1193px);
  }
  /* Share row (right-aligned per Figma at x=1594 y=257) */
  .fig-01__share {
    position: absolute; left: clamp(50%, 77.83vw, 1594px); top: clamp(124px, 12.55vw, 257px);
    display: flex; align-items: center; gap: clamp(8px, 1.2vw, 24px);
  }
  .fig-01__share-label {
    font-family: 'Fixel Display', sans-serif; font-weight: 500; font-size: clamp(11px, 1.07vw, 22px);
    line-height: 30px; color: rgba(255,255,255,0.7);
  }
  .fig-01__share-row { display: flex; gap: clamp(4px, 0.4vw, 8px); }
  .fig-01__share-icon {
    width: clamp(36px, 3.7vw, 76px); height: clamp(36px, 3.7vw, 76px);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center; transition: border-color .2s;
  }
  .fig-01__share-icon:hover { border-color: #ff4501; }
  .fig-01__share-icon img { width: 40%; height: 40%; filter: invert(1); }
  /* Bottom rule above image+orange row */
  .fig-01__rule2 {
    position: absolute; left: clamp(27px, 2.69vw, 55px); top: clamp(186px, 18.65vw, 382px);
    right: clamp(20px, 2vw, 43px); height: 1px; background: rgba(255,255,255,0.10);
  }
  /* Image + orange panel layered row at y=477 */
  .fig-01__image {
    position: absolute; left: clamp(27px, 2.69vw, 55px); top: clamp(234px, 23.29vw, 477px);
    width: clamp(450px, 46.92vw, 961px); aspect-ratio: 961 / 669;
    overflow: hidden;
  }
  .fig-01__image img { width: 100%; height: 100%; object-fit: cover; }
  .fig-01__panel {
    position: absolute; left: clamp(310px, 38.77vw, 794px); top: clamp(234px, 23.29vw, 477px);
    width: clamp(440px, 59.13vw, 1211px); min-height: clamp(360px, 25.20vw, 516px);
    padding: clamp(34px, 3.42vw, 70px) clamp(60px, 4.79vw, 98px);
    background: #ff4501; color: #fff;
    display: flex; flex-direction: column; gap: clamp(20px, 2vw, 40px);
  }
  /* Panel heading mixed case (у ЗАКОН и ТИ САМОВІЛЬНЕ БУДІВНИЦТВО) */
  .fig-01__panel-h3 {
    max-width: clamp(330px, 49.66vw, 1017px);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(30px, 2.93vw, 60px); line-height: clamp(32px, 3.17vw, 65px);
    letter-spacing: -0.028em; margin: 0;
  }
  /* Panel body text */
  .fig-01__panel-body {
    max-width: clamp(330px, 49.46vw, 1013px);
    font-family: 'Fixel Display', sans-serif; font-weight: 500;
    font-size: clamp(13px, 0.977vw, 20px); line-height: clamp(18px, 1.46vw, 30px);
    color: #fff;
  }
  .fig-01__panel-body a { text-decoration: underline; }
  /* 2 buttons inside panel - 380x87 each */
  .fig-01__panel-btns {
    margin-top: auto;
    display: flex; gap: clamp(8px, 1.66vw, 34px); flex-wrap: wrap;
  }
  .fig-01__btn {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: clamp(180px, 18.55vw, 380px); height: clamp(48px, 4.25vw, 87px);
    padding: 0 clamp(20px, 2.64vw, 54px);
    border: 0.8px solid rgba(255,255,255,0.6);
    color: #fff;
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    font-size: clamp(12px, 0.781vw, 16px); letter-spacing: 0.11em;
    text-transform: uppercase; line-height: 13.2px;
    transition: background .2s, border-color .2s;
  }
  .fig-01__btn:hover { background: rgba(0,0,0,0.25); border-color: #fff; }
  .fig-01__btn i.arrow { margin-left: auto; }
  /* Mobile fallback: stack all elements vertically */
  @media (max-width: 1023px) {
    .fig-01 { height: auto; padding: 32px 20px 40px; }
    .fig-01__inner { height: auto; }
    .fig-01__num,
    .fig-01__eyebrow { position: static; }
    .fig-01__num { display: inline; }
    .fig-01__eyebrow { display: inline; margin-left: 16px; }
    .fig-01__rule,
    .fig-01__rule2,
    .fig-01__share { display: none; }
    .fig-01__h2 { position: static; max-width: 100%; font-size: clamp(36px, 9vw, 56px); line-height: 1.05; margin: 16px 0 24px; }
    .fig-01__image { position: static; width: 100%; height: auto; aspect-ratio: 961/669; margin-bottom: 0; }
    .fig-01__panel { position: static; width: 100%; height: auto; padding: 32px 22px; }
    .fig-01__panel-h3 { position: static; width: 100%; font-size: 28px; line-height: 32px; margin: 0 0 16px; }
    .fig-01__panel-body { position: static; width: 100%; font-size: 14px; line-height: 22px; }
    .fig-01__panel-body p { margin-bottom: 12px; }
    .fig-01__panel-btns { position: static; margin-top: 22px; flex-direction: column; gap: 10px; }
    .fig-01__btn { width: 100%; height: 56px; padding: 0 18px; }
  }


  /* Sidebar category-list items - small bordered card with [NN] badge, title, orange arrow.
     Active variant inverts the title color + adds a left orange bar (Figma 206:7146). */
  .cat-side-item {
    display: grid;
    grid-template-columns: 56px 1fr 40px;
    align-items: center;
    gap: clamp(0.5rem, 0.8vw, 1rem);
    padding: clamp(0.875rem, 1vw + 0.4rem, 1.25rem) clamp(0.875rem, 1vw + 0.4rem, 1.25rem);
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.10);
    transition: border-color .2s ease, background .2s ease;
  }
  .cat-side-item:hover { border-color: #ff4501; }
  .cat-side-item .cat-side-num {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: rgba(0, 0, 0, 0.50);
    font-weight: 500;
  }
  .cat-side-item .cat-side-title {
    font-size: clamp(0.8rem, 0.6vw + 0.6rem, 0.95rem);
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    line-height: 1.15;
  }
  .cat-side-item .cat-side-arrow {
    width: 36px;
    height: 36px;
    background: #ff4501;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cat-side-item .cat-side-arrow .arrow { width: 16px; height: 2px; }
  .cat-side-item .cat-side-arrow .arrow::before { right: -1px; top: -3px; width: 8px; height: 8px; border-top-width: 2px; border-right-width: 2px; }
  .cat-side-item--active {
    background: #fff;
    border-color: #ff4501;
    border-left-width: 4px;
  }
  .cat-side-item--active .cat-side-num { color: #ff4501; }
  /* Popular-services side item - inline, white bg, small chevron arrow on right */
  .pop-side-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: clamp(0.875rem, 1vw + 0.4rem, 1.25rem);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    transition: border-color .2s ease;
  }
  .pop-side-item:hover { border-color: #ff4501; }
  .pop-side-title {
    font-size: clamp(0.85rem, 0.6vw + 0.65rem, 1rem);
    color: #333;
    line-height: 1.25;
    font-weight: 500;
  }
  .pop-side-arrow {
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    flex-shrink: 0;
  }
  /* Dark list block (Figma node 206:7453 - generous rows, dividers above/below every item) */
  .dark-list {
    background: #1a1a1a; color: #fff;
    padding: clamp(28px, 2.10vw, 43px) clamp(20px, 4.54vw, 93px);
  }
  .dark-list__title {
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    font-size: clamp(15px, 1.07vw, 22px); letter-spacing: -0.01em;
    text-transform: uppercase; line-height: 1.4; color: #fff;
    margin: 0 0 clamp(20px, 3.56vw, 73px);
  }
  .dark-list__items {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .dark-list__item {
    display: grid;
    grid-template-columns: clamp(56px, 5.42vw, 111px) 1fr;
    gap: clamp(8px, 1.95vw, 40px);
    align-items: center;
    min-height: clamp(48px, 3.32vw, 68px);
    padding: clamp(10px, 1.17vw, 24px) 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .dark-list__num {
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    color: #ff4501; letter-spacing: -0.01em;
    font-size: clamp(13px, 0.98vw, 20px);
  }
  .dark-list__text {
    color: rgba(255,255,255,0.85); line-height: 1.4;
    font-size: clamp(14px, 1.07vw, 22px);
  }
  @media (max-width: 1023px) {
    .dark-list { padding: 20px 18px; }
    .dark-list__title { font-size: 14px; margin-bottom: 16px; }
    .dark-list__item { grid-template-columns: 48px 1fr; gap: 8px; min-height: 0; padding: 14px 0; }
    .dark-list__num { font-size: 13px; }
    .dark-list__text { font-size: 14px; line-height: 1.45; }
  }
  /* Light list variant (Figma nodes 206:7512 + 206:7546 - transparent over article body, dark text + dark hairlines) */
  .light-list {
    background: transparent; color: #333;
    padding: clamp(28px, 2.10vw, 43px) clamp(0px, 4.54vw, 93px);
  }
  .light-list__title {
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    font-size: clamp(15px, 1.07vw, 22px); letter-spacing: -0.01em;
    text-transform: uppercase; line-height: 1.4; color: #333;
    margin: 0 0 clamp(20px, 3.56vw, 73px);
  }
  .light-list__items {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid rgba(0,0,0,0.10);
  }
  .light-list__item {
    display: grid;
    grid-template-columns: clamp(56px, 5.42vw, 111px) 1fr;
    gap: clamp(8px, 1.95vw, 40px);
    align-items: center;
    min-height: clamp(48px, 3.32vw, 68px);
    padding: clamp(10px, 1.17vw, 24px) 0;
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }
  .light-list__num {
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    color: #ff4501; letter-spacing: -0.01em;
    font-size: clamp(13px, 0.98vw, 20px);
  }
  .light-list__text {
    color: rgba(51,51,51,0.85); line-height: 1.4;
    font-size: clamp(14px, 1.07vw, 22px);
  }
  @media (max-width: 1023px) {
    .light-list { padding: 8px 0 12px; }
    .light-list__title { font-size: 14px; margin-bottom: 16px; }
    .light-list__item { grid-template-columns: 48px 1fr; gap: 8px; min-height: 0; padding: 14px 0; }
    .light-list__num { font-size: 13px; }
    .light-list__text { font-size: 14px; line-height: 1.45; }
  }


  .fig-03 { background: #fff; color: #333; padding: clamp(40px, 4.88vw, 100px) 0; }
  .fig-03__inner { position: relative; max-width: 2048px; margin: 0 auto; padding: 0 clamp(20px, 2.64vw, 54px); }
  .fig-03__eyebrow {
    display: flex; align-items: center; gap: clamp(8px, 0.879vw, 18px);
    height: 20px; margin-bottom: clamp(28px, 4.88vw, 100px);
  }
  .fig-03__eyebrow .num,
  .fig-03__eyebrow .label {
    font-family: 'Fixel Display', sans-serif; font-weight: 500;
    font-size: clamp(11px, 0.879vw, 18px); letter-spacing: 0.122em;
    text-transform: uppercase; color: #333;
  }
  .fig-03__eyebrow .rule { flex: 1; height: 1px; background: rgba(10,10,10,0.10); }
  .fig-03__title-row {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 36.38vw, 745px);
    gap: clamp(20px, 5vw, 202px); align-items: start;
    margin-bottom: clamp(40px, 4.88vw, 100px);
  }
  .fig-03__title {
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(48px, 4.88vw, 100px); line-height: clamp(48px, 4.79vw, 98px);
    letter-spacing: -0.048em; text-transform: uppercase; color: #333; margin: 0;
  }
  .fig-03__title .accent { color: #ff4501; display: block; }
  .fig-03__subhead {
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(14px, 1.07vw, 22px); line-height: clamp(20px, 1.46vw, 30px);
    color: rgba(51,51,51,0.65); padding-top: clamp(8px, 1vw, 22px);
  }
  .fig-03__cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid rgba(0,0,0,0.10); border-bottom: 1px solid rgba(0,0,0,0.10);
    height: clamp(180px, 11.04vw, 226px);
  }
  .fig-03__card {
    position: relative; padding: clamp(15px, 1.51vw, 31px) clamp(18px, 1.9vw, 39px);
    border-right: 1px solid rgba(0,0,0,0.10);
  }
  .fig-03__card:last-child { border-right: none; }
  .fig-03__card .card-num {
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: clamp(11px, 0.683vw, 14px); letter-spacing: 0.143em; line-height: 1.14;
    color: #ff4501;
  }
  .fig-03__card .card-h {
    margin-top: clamp(20px, 2.78vw, 57px);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(14px, 1.07vw, 22px); line-height: clamp(16px, 1.22vw, 25px);
    text-transform: uppercase; color: #333;
  }
  .fig-03__card .card-p {
    margin-top: clamp(8px, 1vw, 20px);
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(12px, 0.879vw, 18px); line-height: clamp(16px, 1.22vw, 25px);
    color: rgba(51,51,51,0.60);
  }
  /* Mobile fallback: stack title/subhead and collapse 4-col cards to single column */
  @media (max-width: 1023px) {
    .fig-03 { padding: 32px 0 36px; }
    .fig-03__inner { padding: 0 20px; }
    .fig-03__title-row { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
    .fig-03__title { font-size: clamp(34px, 9vw, 56px); line-height: 1.05; }
    .fig-03__subhead { padding-top: 0; font-size: 14px; line-height: 1.45; }
    .fig-03__cards { grid-template-columns: 1fr; height: auto; }
    .fig-03__card { padding: 22px 0; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.10); }
    .fig-03__card:last-child { border-bottom: none; }
    .fig-03__card .card-h { margin-top: 14px; font-size: 16px; line-height: 1.2; }
    .fig-03__card .card-p { margin-top: 8px; font-size: 14px; line-height: 1.5; }
  }


  .fig-04 {
    position: relative; background: #242323; color: #fff;
    height: clamp(700px, 47.27vw, 968px);
  }
  .fig-04__inner { position: relative; max-width: 2048px; margin: 0 auto; height: 100%; }
  .fig-04__h2 {
    position: absolute; left: clamp(27px, 2.64vw, 54px); top: clamp(38px, 3.71vw, 76px);
    width: clamp(420px, 42.58vw, 872px);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(30px, 2.93vw, 60px); line-height: clamp(36px, 3.42vw, 70px);
    text-transform: uppercase; color: rgba(255,255,255,0.95); margin: 0;
  }
  .fig-04__top-right {
    position: absolute; left: clamp(50%, 61.52vw, 1260px); top: clamp(56px, 5.42vw, 113px);
    width: clamp(330px, 33.35vw, 683px);
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(13px, 0.879vw, 18px); line-height: clamp(20px, 1.56vw, 32px);
    color: rgba(255,255,255,0.9);
  }
  .fig-04__body {
    position: absolute; left: clamp(27px, 2.64vw, 54px); top: clamp(135px, 13.18vw, 270px);
    width: clamp(420px, 41.26vw, 845px);
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(13px, 0.879vw, 18px); line-height: clamp(20px, 1.56vw, 32px);
    color: rgba(255,255,255,0.9); margin: 0;
  }
  .fig-04__alert {
    position: absolute; left: clamp(27px, 2.64vw, 54px); top: clamp(216px, 21.04vw, 431px);
    width: clamp(420px, 42.58vw, 872px); height: clamp(60px, 4.98vw, 102px);
    border: 1px solid #ff4501; display: flex; align-items: center;
    padding-left: clamp(20px, 1.81vw, 37px);
  }
  .fig-04__alert-bang {
    font-family: 'Arimo', sans-serif; font-weight: 700;
    font-size: clamp(30px, 2.93vw, 60px); color: #ff4501; line-height: 1; margin-right: clamp(12px, 1vw, 22px);
  }
  .fig-04__alert-text {
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(12px, 0.879vw, 18px); line-height: clamp(16px, 1.22vw, 25px);
    letter-spacing: 0.039em; color: rgba(255,255,255,0.9);
  }
  .fig-04__image {
    position: absolute; left: clamp(48%, 49.71vw, 1018px); top: clamp(160px, 13.18vw, 270px);
    width: clamp(420px, 47.80vw, 979px); height: clamp(280px, 30.37vw, 622px);
    overflow: hidden;
  }
  .fig-04__image img { width: 100%; height: 100%; object-fit: cover; }
  .fig-04__phone {
    position: absolute; left: clamp(27px, 2.64vw, 54px); top: clamp(346px, 28.86vw, 591px);
    width: clamp(420px, 42.77vw, 876px);
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(13px, 0.879vw, 18px); line-height: clamp(20px, 1.56vw, 32px);
    color: rgba(255,255,255,0.9);
  }
  .fig-04__phone b {
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
  }
  /* Two orange buttons positioned per Figma at top=766 (relative to section) */
  .fig-04__btns {
    position: absolute; left: clamp(27px, 2.64vw, 54px); top: clamp(440px, 37.40vw, 766px);
    display: flex; gap: clamp(8px, 1.51vw, 31px);
  }
  .fig-04__btn {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: clamp(180px, 18.55vw, 380px); height: clamp(48px, 4.25vw, 87px);
    padding: 0 clamp(20px, 2.64vw, 54px);
    background: #ff4501; border: 0.8px solid rgba(10,10,10,0.1);
    color: #fff;
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    font-size: clamp(12px, 0.781vw, 16px); letter-spacing: 0.11em;
    text-transform: uppercase; line-height: 13.2px;
    transition: filter .2s;
  }
  .fig-04__btn:hover { filter: brightness(1.1); }
  .fig-04__btn i.arrow { margin-left: auto; }
  /* Mobile fallback */
  @media (max-width: 1023px) {
    .fig-04 { height: auto; padding: 32px 20px 40px; }
    .fig-04__inner { height: auto; }
    .fig-04__h2 { position: static; width: 100%; font-size: clamp(26px, 7vw, 40px); line-height: 1.15; margin-bottom: 16px; }
    .fig-04__top-right { position: static; width: 100%; margin-bottom: 24px; font-size: 14px; line-height: 22px; }
    .fig-04__body { position: static; width: 100%; font-size: 14px; line-height: 22px; margin-bottom: 22px; }
    .fig-04__alert { position: static; width: 100%; height: auto; padding: 18px 22px; margin-bottom: 24px; }
    .fig-04__alert-bang { font-size: 36px; }
    .fig-04__alert-text { font-size: 13px; line-height: 19px; }
    .fig-04__image { position: static; width: 100%; height: auto; aspect-ratio: 979/622; margin-bottom: 24px; }
    .fig-04__phone { position: static; width: 100%; font-size: 14px; line-height: 22px; margin-bottom: 24px; }
    .fig-04__btns { position: static; flex-direction: column; gap: 10px; }
    .fig-04__btn { width: 100%; height: 56px; padding: 0 18px; }
  }


  .fig-05 {
    position: relative; background: #fbfbfb; color: #333;
    height: clamp(820px, 50.39vw, 1032px);
  }
  .fig-05__inner { position: relative; max-width: 2048px; margin: 0 auto; height: 100%; }
  .fig-05__eyebrow {
    position: absolute; left: clamp(26px, 2.54vw, 52px); top: clamp(50px, 4.88vw, 100px);
    right: clamp(20px, 1.03vw, 21px); display: flex; align-items: center; gap: clamp(8px, 0.879vw, 18px); height: 20px;
  }
  .fig-05__eyebrow .num,
  .fig-05__eyebrow .label {
    font-family: 'Fixel Display', sans-serif; font-weight: 500;
    font-size: clamp(11px, 0.879vw, 18px); letter-spacing: 0.122em;
    text-transform: uppercase; color: #333;
  }
  .fig-05__eyebrow .rule { flex: 1; height: 1px; background: rgba(10,10,10,0.10); }
  /* Left column: title + description */
  .fig-05__title {
    position: absolute; left: clamp(28px, 2.78vw, 57px); top: clamp(160px, 15.38vw, 315px);
    width: clamp(380px, 37.45vw, 767px); margin: 0;
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(48px, 4.88vw, 100px); line-height: clamp(48px, 4.88vw, 100px);
    text-transform: uppercase; color: #333;
  }
  .fig-05__title .accent { color: #ff4501; }
  .fig-05__desc {
    position: absolute; left: clamp(27px, 2.69vw, 55px); top: clamp(400px, 36.91vw, 756px);
    width: clamp(320px, 29.15vw, 597px); margin: 0;
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(13px, 0.879vw, 18px); line-height: clamp(20px, 1.37vw, 28px);
    color: #333;
  }
  /* Form panel */
  .fig-05__form {
    position: absolute; left: clamp(48%, 47.17vw, 966px); top: clamp(100px, 9.77vw, 200px);
    width: clamp(440px, 50.44vw, 1033px); height: clamp(580px, 35.74vw, 732px);
    background: #fff; border: 1px solid #ddd; padding: 0;
  }
  /* Progress bars (top of form) */
  .fig-05__progress { display: flex; height: 11px; }
  .fig-05__progress .seg { height: 11px; }
  .fig-05__progress .seg-1 { flex: 1; background: #ff4501; }
  .fig-05__progress .seg-2 { flex: 1; background: #ddd; }
  /* Progress label */
  .fig-05__step {
    margin: clamp(20px, 1.98vw, 41px) 0 0 clamp(28px, 2.88vw, 59px);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(14px, 1.07vw, 22px); line-height: 16px; letter-spacing: 0.091em;
    text-transform: uppercase;
  }
  .fig-05__step .em { color: #ff4501; }
  .fig-05__step .dim { color: rgba(51,51,51,0.9); }
  /* Form grid */
  .fig-05__grid {
    margin: clamp(20px, 1.95vw, 40px) clamp(20px, 2.84vw, 58px) 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.46vw, 30px) clamp(14px, 1.46vw, 30px);
  }
  .fig-05__field { display: flex; flex-direction: column; gap: clamp(10px, 1.07vw, 22px); }
  .fig-05__field--wide { grid-column: 1 / -1; }
  .fig-05__field label {
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(12px, 0.781vw, 16px); letter-spacing: 0.103em;
    text-transform: uppercase; color: #333;
  }
  .fig-05__field input,
  .fig-05__field select {
    width: 100%; height: clamp(36px, 2.54vw, 52px);
    border: 0; border-bottom: 1px solid rgba(51,51,51,0.2);
    background: transparent;
    font-family: 'Fixel Display', sans-serif; font-size: 16px; color: #333;
    outline: none; padding: 0;
  }
  .fig-05__field input::placeholder { color: rgba(51,51,51,0.6); }
  .fig-05__field input:focus,
  .fig-05__field select:focus { border-bottom-color: #ff4501; }
  /* Yes/No radio buttons */
  .fig-05__radios { display: flex; gap: clamp(8px, 0.59vw, 12px); }
  .fig-05__radio { position: relative; cursor: pointer; }
  .fig-05__radio input { position: absolute; opacity: 0; }
  .fig-05__radio span {
    display: inline-flex; align-items: center; justify-content: center;
    height: clamp(40px, 2.54vw, 52px); padding: 0 clamp(14px, 0.83vw, 17px);
    border: 1px solid rgba(51,51,51,0.15);
    font-family: 'Fixel Display', sans-serif; font-weight: 600;
    font-size: clamp(13px, 0.879vw, 18px); letter-spacing: 0.043em;
    text-transform: uppercase; line-height: 19.5px; color: #333;
  }
  .fig-05__radio input:checked + span { background: #ff4501; color: #fff; }
  /* Disclaimer + submit row */
  .fig-05__footer {
    position: absolute; left: clamp(28px, 2.83vw, 58px); right: clamp(20px, 2.84vw, 58px);
    bottom: clamp(20px, 2.44vw, 50px); display: flex; align-items: center; gap: clamp(12px, 1vw, 22px);
  }
  .fig-05__disclaim {
    flex: 1;
    font-family: 'Fixel Display', sans-serif; font-weight: 400;
    font-size: clamp(11px, 0.683vw, 14px); line-height: clamp(16px, 1.17vw, 24px);
    color: rgba(51,51,51,0.9); margin: 0;
  }
  .fig-05__submit {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: clamp(180px, 18.55vw, 380px); height: clamp(56px, 4.25vw, 87px);
    padding: 0 clamp(20px, 3.54vw, 72px);
    background: #ff4501; border: 0.8px solid rgba(10,10,10,0.1);
    color: #fff;
    font-family: 'Fixel Display', sans-serif; font-weight: 700;
    font-size: clamp(13px, 0.879vw, 18px); letter-spacing: 0.098em;
    text-transform: uppercase; line-height: 13.2px;
    transition: filter .2s; cursor: pointer;
  }
  .fig-05__submit:hover { filter: brightness(1.1); }
  .fig-05__submit i.arrow { margin-left: auto; }
  /* Mobile fallback */
  @media (max-width: 1023px) {
    .fig-05 { height: auto; padding: 28px 20px 40px; }
    .fig-05__inner { height: auto; }
    .fig-05__eyebrow { position: static; height: auto; margin-bottom: 24px; }
    .fig-05__title { position: static; width: 100%; font-size: clamp(36px, 9vw, 56px); line-height: 1.05; margin-bottom: 16px; }
    .fig-05__desc { position: static; width: 100%; margin-bottom: 24px; font-size: 14px; line-height: 22px; }
    .fig-05__form { position: static; width: 100%; height: auto; padding-bottom: 24px; }
    .fig-05__grid { grid-template-columns: 1fr; gap: 22px; margin: 24px 22px 0; }
    .fig-05__step { font-size: 14px; margin: 18px 0 0 22px; }
    .fig-05__footer { position: static; margin: 24px 22px 0; flex-direction: column; align-items: stretch; gap: 18px; }
    .fig-05__submit { width: 100%; height: 56px; padding: 0 22px; }
  }


/* ===== cases.html ===== */












  .case-sec { background:#232323; color:#fff; padding-top:clamp(2.5rem,5vw,5.5rem); padding-bottom:clamp(2.5rem,5vw,5.5rem); border-top:1px solid rgba(255,255,255,0.10); }
  .case-eyebrow { display:flex; align-items:center; gap:clamp(1rem,1.6vw,1.75rem); font-family:'Fixel Display',sans-serif; font-size:clamp(0.8125rem,0.45vw+0.72rem,1.125rem); line-height:1; letter-spacing:0.122em; text-transform:uppercase; color:#fff; }
  .case-eyebrow__num { font-weight:500; flex-shrink:0; }
  .case-eyebrow__label { font-weight:600; }
  .case-eyebrow__rule { flex:1; min-width:24px; height:1px; background:rgba(255,255,255,0.10); }
  .case-title { font-family:'Fixel Display',sans-serif; font-weight:600; font-size:clamp(1.75rem,2.4vw,2.375rem); line-height:1.32; letter-spacing:-0.025em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin:0 0 clamp(1.5rem,2.4vw,2.5rem); }
  .case-title .reveal-text { --reveal-to:rgba(255,255,255,0.7); }
  /* Left column: title stacked above the image (matches Figma — stats sit top-right level with the title, divider runs full height) */
  .case-grid { display:grid; gap:clamp(2rem,3.9vw,80px); grid-template-columns:1fr; margin-top:clamp(2.25rem,3.1vw,3.75rem); }
  .case-col { display:flex; flex-direction:column; }
  @media (min-width:1024px) { .case-grid { grid-template-columns: minmax(0,900fr) 973fr; } }
  .case-img { position:relative; aspect-ratio:900/526; background-size:cover; background-position:center; overflow:hidden; }
  /* Figma look on the real photo: readability scrim, slim orange header bar,
     uppercase white sub-headline, and the Арма Експерт logo bottom-right. */
  .case-img::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.66) 100%); }
  .case-img::after { content:''; position:absolute; z-index:2; right:clamp(1.5rem,2vw,2.25rem); bottom:clamp(1.25rem,1.8vw,1.75rem); width:clamp(116px,13vw,188px); aspect-ratio:3627/861; background:#fff; opacity:0.95; -webkit-mask:url('../../images/arma/logo.png') center/contain no-repeat; mask:url('../../images/arma/logo.png') center/contain no-repeat; }
  .case-banner { position:absolute; z-index:2; left:clamp(1.5rem,2.6vw,2.5rem); right:clamp(1.5rem,2.6vw,2.5rem); top:46%; transform:translateY(-50%); }
  .case-banner__head { display:block; background:#ff4501; color:#fff; text-align:center; font-family:'Fixel Display',sans-serif; font-weight:600; font-size:clamp(0.875rem,1.05vw,1.25rem); letter-spacing:0.06em; line-height:1.25; text-transform:uppercase; padding:clamp(0.6rem,0.95vw,0.95rem) clamp(1rem,1.5vw,1.5rem); }
  .case-banner__body { font-family:'Fixel Display',sans-serif; margin-top:clamp(0.85rem,1.4vw,1.4rem); font-size:clamp(1.125rem,1.6vw,1.75rem); line-height:1.2; font-weight:700; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.55); }
  .case-meta { display:flex; flex-direction:column; gap:clamp(1.75rem,2.6vw,2.75rem); }
  @media (min-width:1024px) { .case-meta { border-left:1px solid rgba(255,255,255,0.10); padding-left:clamp(1.5rem,2vw,40px); } }
  .case-stats { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.5rem,2.3vw,2.75rem); }
  .case-stat__icon { width:clamp(60px,3.7vw,76px); height:clamp(60px,3.7vw,76px); border:1px solid #ff4501; box-shadow:0 0 28px rgba(255,69,1,0.12); display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
  .case-stat__icon svg { width:clamp(26px,1.56vw,32px); height:clamp(26px,1.56vw,32px); stroke:#ff4501; }
  .case-stat__label { font-family:'Fixel Display',sans-serif; font-weight:400; font-size:14px; line-height:1.14; letter-spacing:0.14em; color:rgba(255,255,255,0.5); margin-bottom:clamp(1rem,1.5vw,1.5rem); text-transform:uppercase; }
  .case-stat__value { font-family:'Fixel Display',sans-serif; font-size:18px; line-height:1.33; font-weight:600; color:#fff; }
  .case-stat:first-child .case-stat__value { text-transform:uppercase; }
  .case-block { padding-top:clamp(1.5rem,2.4vw,2.5rem); border-top:1px solid rgba(255,255,255,0.10); }
  .case-block__label { font-family:'Fixel Display',sans-serif; font-weight:400; font-size:14px; line-height:1.14; letter-spacing:0.14em; color:rgba(255,255,255,0.5); margin-bottom:clamp(1.25rem,1.6vw,1.5rem); text-transform:uppercase; }
  .case-block__body { font-family:'Fixel Display',sans-serif; font-size:18px; line-height:1.33; color:#fff; }
  /* Cases pagination — dark bar continuing the case sections */
  .case-pagination { background:#232323; display:flex; flex-wrap:wrap; gap:clamp(0.4rem,0.6vw,0.6rem); justify-content:center; align-items:center; padding:clamp(2rem,4vw,4.5rem) 1rem clamp(3rem,5vw,5.5rem); }
  .case-pagination__btn { min-width:clamp(46px,3.4vw,62px); height:clamp(46px,3.4vw,62px); display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.75); font-family:'Fixel Display',sans-serif; font-weight:600; font-size:clamp(0.95rem,1vw,1.125rem); letter-spacing:0.04em; text-decoration:none; transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease; }
  .case-pagination__btn svg { width:42%; height:42%; }
  .case-pagination__btn:hover { border-color:#ff4501; color:#fff; }
  .case-pagination__btn.is-active { background:#ff4501; border-color:#ff4501; color:#fff; }
  .case-pagination__btn.is-disabled { opacity:0.35; pointer-events:none; }


/* ===== case-detail.html ===== */












@layer utilities {
  /* Diagonal stripe pattern for the "roof-tile" texture inside the X-hazard banner */
  .roof-tiles {
    background-color: #2a2a2a;
    background-image:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 16px),
      repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 16px),
      linear-gradient(180deg, #2f2f2f, #1f1f1f);
  }
  /* Subhead with orange underline accent (Figma article subheads) */
  .h-rule { position: relative; padding-bottom: clamp(0.75rem, 1vw + 0.3rem, 1.5rem); }
  .h-rule::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(40px, 4vw + 1rem, 72px);
    height: 3px;
    background: #ff4501;
  }
}


/* ===== index.html ===== */












      /* Blinking caret after the typed title text */
      [data-top-svc-title]::after {
        content: '|';
        display: inline-block;
        margin-left: 4px;
        font-weight: 300;
        animation: heroCaret 1s steps(2, start) infinite;
      }
      @keyframes heroCaret { to { visibility: hidden; } }