/* =========================================
   MAIN CONTAINER – TOP TO BOTTOM SPACING
========================================= */

.drawing-container {
  position: relative;
  width: 100%;
  max-width: 1420px;

  margin: 0 auto;
  padding: 70px 30px 80px;

  box-sizing: border-box;
}

.drawing-container > * {
  margin-top: 0;
  margin-bottom: 0;
}

.drawing-container .row {
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================================================
   DRAWING LIFECYCLE CONTAINER
========================================================= */

.drawing-container {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =========================================
   LARGE SCREEN
========================================= */

@media (min-width: 1300px) {
  .drawing-container {
    max-width: 1300px;
    padding: 60px 35px 90px;
  }
}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1200px) and (max-width: 1299px) {
  .drawing-container {
    max-width: 1200px;
    padding: 75px 30px 85px;
  }
}

/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 1199px) {
  .drawing-container {
    width: 100%;
    max-width: 100%;
    padding: 60px 30px 70px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .drawing-container {
    width: 100%;
    max-width: 100%;
    padding: 45px 20px 55px;
  }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {
  .drawing-container {
    padding: 35px 16px 45px;
  }
}

/* =========================================================
   DRAWING HERO
========================================================= */

.drawing-hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: 25px 0 0;
  min-height: 900px;
  font-family: "Inter", sans-serif;
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.drawing-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* background-image:
    linear-gradient(
      rgba(5, 59, 47, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(5, 59, 47, 0.035) 1px,
      transparent 1px
    ); */

  background-size: 42px 42px;

  /* mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.6) 70%,
    transparent 100%
  ); */
}

/* =========================================================
   SOFT GLOWS
========================================================= */

.drawing-hero-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  pointer-events: none;
}

.drawing-hero-glow-one {
  left: -230px;
  top: 140px;
  background: #d9fff5;
}

.drawing-hero-glow-two {
  right: -230px;
  top: 120px;
  background: #fff0bd;
}

/* =========================================================
   CONTAINER
========================================================= */

.drawing-container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   PRODUCT BRAND
========================================================= */

.drawing-product-brand {
  text-align: center;
  margin-bottom: -15px;
}

.drawing-product-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  color: var(--primary);

  background: rgba(255, 255, 255, 0.8);
}

.drawing-product-name {
  font-size: 13px;
  font-weight: 700;
  color: #064c3e;
  letter-spacing: 0.4px;
}

.drawing-product-subtitle {
  margin-top: 6px;

  font-size: 12px;
  font-weight: 700;
  color: #164d43;
  letter-spacing: 0.7px;
}
/* =====================================================
   DRAWING LIFECYCLE FLOW
===================================================== */

.drawing-mini-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 22px auto 34px;
  padding: 11px 20px;
  gap: 13px;
  white-space: nowrap;
}
/* =====================================================
   FLOW TEXT
===================================================== */

.drawing-mini-flow span {
  display: inline-flex;
  align-items: center;

  color: rgba(12, 24, 36, 0.88);

  font-size: 13px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.2px;

  white-space: nowrap;

  transition: all 0.3s ease;
}

/* =====================================================
   ARROWS
===================================================== */

.drawing-mini-flow i {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #034933;

  font-size: 11px;

  opacity: 0.8;

  flex-shrink: 0;

  transition: all 0.3s ease;
}

/* =====================================================
   HOVER
===================================================== */

.drawing-mini-flow span:hover {
  color: var(--secondary);
  transform: translateY(-1px);
}

.drawing-mini-flow i:hover {
  opacity: 1;
  transform: translateX(3px) scale(1.1);
}

/* =====================================================
   FINAL STAGE
===================================================== */

.drawing-mini-flow span:last-child {
  color: rgba(12, 24, 36, 0.88);
  font-weight: 700;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {
  .drawing-mini-flow {
    gap: 10px;

    padding: 10px 16px;

    margin-top: 18px;
    margin-bottom: 28px;
  }

  .drawing-mini-flow span {
    font-size: 11px;
  }

  .drawing-mini-flow i {
    font-size: 9px;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 575px) {
  .drawing-mini-flow {
    width: 100%;

    flex-wrap: wrap;
    justify-content: center;

    white-space: normal;

    gap: 9px 10px;

    padding: 12px 14px;

    margin: 16px auto 25px;

    border-radius: 16px;
  }

  .drawing-mini-flow span {
    font-size: 10px;
  }

  .drawing-mini-flow i {
    font-size: 8px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 380px) {
  .drawing-mini-flow {
    gap: 7px 8px;
    padding: 10px 10px;
  }

  .drawing-mini-flow span {
    font-size: 9px;
  }

  .drawing-mini-flow i {
    font-size: 7px;
  }
}

/* =========================================================
   MAIN GRID
========================================================= */

.drawing-main-grid {
  display: grid;

  grid-template-columns:
    minmax(235px, 1fr)
    minmax(500px, 2.6fr)
    minmax(235px, 1fr);

  gap: 32px;

  align-items: center;
}

/* =========================================================
   SIDE COLUMNS
========================================================= */

.drawing-side {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.drawing-side-left {
  align-items: flex-end;
}

.drawing-side-right {
  align-items: flex-start;
}

/* =========================================================
   FEATURE CARDS
========================================================= */

.drawing-feature-card {
  width: 125%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border-radius: 22px;
  border: 1px solid rgb(71 83 80);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82),
    rgba(255, 255, 255, 0.55)
  );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 18px 45px rgba(5, 59, 47, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.drawing-feature-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(5, 59, 47, 0.1);

  border-color: var(--primary-light);
}

/* =========================================================
   FEATURE ICON
========================================================= */

.drawing-feature-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
}

/* Individual icon backgrounds */

.drawing-card-blue .drawing-feature-icon {
  color: #2468d8;
  background: #eaf2ff;
}

.drawing-card-green .drawing-feature-icon {
  color: #129b79;
  background: #e5f7f2;
}

.drawing-card-yellow .drawing-feature-icon {
  color: #c99400;
  background: #fff8df;
}

.drawing-card-purple .drawing-feature-icon {
  color: #7142dc;
  background: #f0eaff;
}

.drawing-card-orange .drawing-feature-icon {
  color: #e86420;
  background: #fff0e8;
}

.drawing-card-teal .drawing-feature-icon {
  color: #208e8c;
  background: #e8f7f6;
}

.drawing-card-gold .drawing-feature-icon {
  color: #b78000;
  background: #fff6dc;
}

.drawing-card-pink .drawing-feature-icon {
  color: #d83e77;
  background: #fdebf2;
}

/* =========================================================
   CARD CONTENT
========================================================= */

.drawing-feature-content {
  min-width: 0;
  flex: 1;
}

.drawing-feature-content h4 {
  margin: 0 0 5px;

  font-size: 14px;
  font-weight: 500;

  color: #1e2024;
}

.drawing-feature-content p {
  margin: 0;

  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 10px;

  color: #59645f;
}

/* =========================================================
   PREVIEW LINK
========================================================= */

.drawing-preview-link {
  position: absolute;
  right: 23px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #053b2f;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5px;
  letter-spacing: 0.2px;
  opacity: 0.72;
  z-index: 5;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.drawing-preview-link > i:first-child {
  font-size: 5px;
  color: #f7c948;
}

.drawing-preview-link > i:last-child {
  font-size: 8px;
}

/* =========================================================
   CENTER CONTENT
========================================================= */

.drawing-center-content {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

/* =========================================================
   EYEBROW
========================================================= */

.drawing-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-bottom: 14px;

  font-size: 11px;
  font-weight: 700;

  color: #145548;
}

.drawing-eyebrow-icon {
  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #ffffff;
  background: var(--primary);

  font-size: 11px;
}

.drawing-eyebrow-divider {
  width: 22px;
  height: 1px;

  background: #c9d5d1;
}

/* =========================================================
   HERO TITLE
========================================================= */

.drawing-hero-title {
  margin: 0;

  font-size: clamp(34px, 3.2vw, 42px);

  line-height: 1;
  letter-spacing: 0.3;
  font-weight: 700;

  color: #1f2937;
}

.drawing-hero-title span {
  display: block;

  color: #059669;
}

/* =========================================================
   TITLE LINE
========================================================= */

.drawing-title-line {
  width: 56px;
  height: 3px;

  margin: 17px auto 19px;

  border-radius: 50px;

  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

/* =========================================================
   DESCRIPTION
========================================================= */

.drawing-hero-description {
  max-width: 650px;
  margin: 0 auto;
}

.drawing-hero-description p {
  margin: 0 0 14px;

  font-size: 16px;
  line-height: 1.5;

  color: #6b7480;
}

.drawing-hero-description p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   HIGHLIGHT
========================================================= */

.drawing-hero-highlight {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top: 15px;
  padding: 9px 13px;

  border-radius: 13px;

  background: rgba(235, 248, 243, 0.8);
}

.drawing-highlight-icon {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #d8f2e9;
  color: var(--primary);

  font-size: 12px;
}

.drawing-hero-highlight div {
  text-align: left;
}

.drawing-hero-highlight small {
  display: block;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.8px;

  color: #799087;
}

.drawing-hero-highlight strong {
  display: block;

  font-size: 11px;

  color: #164e43;
}

.drawing-highlight-check {
  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #ffffff;

  color: #15906f;

  font-size: 9px;
}

/* =========================================================
   ACTIONS
========================================================= */

.drawing-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-top: 17px;
}

/* Primary button */

.drawing-btn-primary {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 11px 18px;

  border-radius: 9px;

  background: var(--primary);
  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition: all 0.3s ease;
}

.drawing-btn-primary:hover {
  background: var(--primary-light);
  color: #ffffff;

  transform: translateY(-2px);
}

/* Watch */

.drawing-watch-btn {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  text-decoration: none;

  color: #214d43;
}

.drawing-watch-icon {
  width: 31px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #edf6f3;

  color: var(--primary);

  font-size: 10px;
}

.drawing-watch-content {
  text-align: left;
}

.drawing-watch-content strong {
  display: block;

  font-size: 10px;
}

.drawing-watch-content small {
  display: block;

  font-size: 8px;

  color: #8a9691;
}

/* =========================================================
   BOTTOM IMAGE
========================================================= */

.drawing-bottom-preview {
  position: relative;

  width: 72%;
  height: 50%;
  margin: 38px auto 0;

  text-align: center;
}

.drawing-preview-glow {
  position: absolute;

  left: 50%;
  bottom: 0;

  width: 70%;
  height: 100px;

  transform: translateX(-50%);

  background: #dff8f0;

  filter: blur(55px);

  opacity: 0.65;

  z-index: 0;
}

.drawing-preview-image {
  position: relative;
  z-index: 1;

  width: 100%;

  display: block;

  border-radius: 12px 12px 0 0;

  box-shadow: 0 -8px 35px rgba(5, 59, 47, 0.07);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {
  .drawing-main-grid {
    grid-template-columns:
      minmax(210px, 1fr)
      minmax(430px, 2fr)
      minmax(210px, 1fr);

    gap: 20px;
  }

  .drawing-feature-card {
    max-width: 235px;
  }

  .drawing-hero-title {
    font-size: 38px;
  }

  .drawing-hero-description p {
    font-size: 13px;
  }
}

@media (max-width: 991px) {
  .drawing-hero {
    padding-top: 35px;
  }

  .drawing-main-grid {
    grid-template-columns: 1fr;
  }

  .drawing-center-content {
    order: 1;
  }

  .drawing-side-left {
    order: 2;
  }

  .drawing-side-right {
    order: 3;
  }

  .drawing-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .drawing-side-left,
  .drawing-side-right {
    align-items: stretch;
  }

  .drawing-feature-card {
    max-width: 100%;
  }

  .drawing-bottom-preview {
    width: 90%;
    margin-top: 30px;
  }
}

@media (max-width: 575px) {
  .drawing-hero {
    padding-top: 25px;
  }

  .drawing-product-brand {
    margin-bottom: 20px;
  }

  .drawing-hero-title {
    font-size: 31px;
    letter-spacing: -0.7px;
  }

  .drawing-hero-description p {
    font-size: 12px;
  }

  .drawing-hero-actions {
    flex-direction: column;
  }

  .drawing-side {
    grid-template-columns: 1fr;
  }

  .drawing-feature-card {
    min-height: 95px;
  }

  .drawing-bottom-preview {
    width: 100%;
    margin-top: 25px;
  }
}

/* =========================================================
   LIFECYCLE
========================================================= */

.drawing-lifecycle-wrapper {
  position: relative;
}

.drawing-lifecycle-line {
  position: absolute;

  top: 78px;
  left: 8%;
  right: 8%;

  height: 2px;

  background: linear-gradient(
    90deg,
    var(--secondary),
    var(--primary),
    var(--secondary)
  );

  opacity: 0.25;
}

/* =========================================================
   LIFECYCLE STAGE CARDS
   ALL CARDS SAME WHITE DESIGN
========================================================= */

.drawing-stage-card {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 112px;

  border: 1px solid var(--border-color);

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 22px 12px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  transition: var(--transition-normal);

  cursor: pointer;

  box-shadow: none;
}

/* =========================================================
   REMOVE ACTIVE DARK COLOR
========================================================= */

.drawing-stage-card.active {
  background: var(--white) !important;

  border-color: var(--border-color) !important;

  color: var(--text-primary) !important;

  transform: none;

  box-shadow: none;
}

/* =========================================================
   CARD HOVER
========================================================= */

.drawing-stage-card:hover {
  transform: translateY(-7px);

  border-color: rgba(5, 59, 47, 0.2);

  box-shadow: var(--shadow-md);

  background: var(--white);
}

/* =========================================================
   CARD NUMBER
========================================================= */

.drawing-stage-number {
  position: absolute;

  top: 8px;
  right: 10px;

  color: var(--text-light);

  font-size: 10px;

  font-weight: var(--fw-bold);
}

/* Active card number should also remain same
   as other cards */

.drawing-stage-card.active .drawing-stage-number {
  color: var(--text-light) !important;
}

/* =========================================================
   CARD ICON
========================================================= */

.drawing-stage-icon {
  width: 52px;
  height: 52px;

  margin-bottom: 12px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 50%;

  font-size: 18px;

  transition: var(--transition-fast);
}

/* Active card icon same as normal */

.drawing-stage-card.active .drawing-stage-icon {
  color: var(--primary) !important;

  background: rgba(5, 59, 47, 0.07) !important;
}

/* =========================================================
   CARD TITLE
========================================================= */

.drawing-stage-card strong {
  color: var(--text-primary) !important;

  font-size: var(--fs-sm);

  font-weight: var(--fw-bold);

  text-align: center;
}

/* =========================================================
   CARD SUBTEXT
========================================================= */

.drawing-stage-card small {
  margin-top: 3px;

  color: var(--text-secondary) !important;

  font-size: 11px;

  text-align: center;
}

/* Active card text same as normal */

.drawing-stage-card.active strong {
  color: var(--text-primary) !important;
}

.drawing-stage-card.active small {
  color: var(--text-secondary) !important;
}

/* =========================================================
   LIFECYCLE DETAIL
========================================================= */

.drawing-lifecycle-detail {
  padding: 34px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);

  background: var(--white);

  box-shadow: var(--shadow-md);
}

.drawing-detail-label {
  color: var(--primary);

  font-size: 11px;

  font-weight: var(--fw-bold);

  letter-spacing: 1.3px;
}

.drawing-lifecycle-detail-content h3 {
  margin: 10px 0 14px;

  font-family: var(--font-heading);

  color: var(--primary);

  font-size: var(--fs-xl);

  font-weight: var(--fw-bold);
}

.drawing-lifecycle-detail-content p {
  color: var(--text-secondary);

  line-height: 1.75;
}

.drawing-detail-points {
  display: grid;

  gap: 10px;

  margin-top: 20px;
}

.drawing-detail-points div {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--text-primary);

  font-size: var(--fs-sm);

  font-weight: var(--fw-medium);
}

.drawing-detail-points i {
  width: 23px;
  height: 23px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.08);

  border-radius: 50%;

  font-size: 10px;
}

/* =========================================================
   LIFECYCLE PREVIEW
========================================================= */

.drawing-lifecycle-preview {
  overflow: hidden;

  border-radius: var(--radius-lg);

  border: 1px solid var(--border-color);

  background: #f9fbfa;
}

.drawing-preview-topbar {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 13px 18px;

  color: var(--white);

  background: var(--primary);

  font-size: 11px;
}

.drawing-preview-topbar span:first-child {
  font-weight: var(--fw-bold);
}

.drawing-preview-topbar i {
  color: var(--secondary);

  margin-right: 5px;
}

.drawing-preview-content {
  padding: 35px 25px;
}

.drawing-preview-flow {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 10px;
}

.drawing-preview-flow span {
  padding: 8px 13px;

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-full);

  color: var(--text-secondary);

  font-size: 11px;

  font-weight: var(--fw-semibold);
}

.drawing-preview-flow span.active {
  color: var(--primary);

  border-color: rgba(5, 59, 47, 0.2);

  background: rgba(5, 59, 47, 0.07);
}

.drawing-preview-flow i {
  color: var(--secondary-dark);

  font-size: 10px;
}

.drawing-preview-record {
  margin-top: 30px;

  padding: 18px;

  display: flex;

  align-items: center;

  gap: 13px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  background: var(--white);
}

.drawing-record-icon {
  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.08);

  border-radius: 10px;
}

.drawing-preview-record small,
.drawing-preview-record strong {
  display: block;
}

.drawing-preview-record small {
  color: var(--text-light);

  font-size: 10px;
}

.drawing-preview-record strong {
  margin-top: 3px;

  color: var(--text-primary);

  font-size: var(--fs-sm);
}

.drawing-record-check {
  width: 28px;
  height: 28px;

  margin-left: auto;

  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.08);

  border-radius: 50%;

  font-size: 11px;
}
.drawing-section-title h2 {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #1f2937;
}

.drawing-section-title h2 span {
  font-size: 36px;

  color: #059669;
}

/* =========================================================
   MODULE BADGE
========================================================= */

.module-badge {
  display: inline-flex;

  align-items: center;

  padding: 6px 18px;

  border: 1px solid #a7f3d0;

  border-radius: 999px;

  background: #ecfdf5;

  color: #047857;

  font-size: 14px;

  font-weight: 500;

  margin-bottom: 20px;
}
/* =========================================================
   RFI VISUAL
========================================================= */

.drawing-rfi-visual {
  position: relative;

  min-height: 540px;

  display: flex;
  align-items: center;
}

.drawing-rfi-glow {
  position: absolute;

  width: 300px;
  height: 300px;

  background: rgba(247, 201, 72, 0.15);

  filter: blur(80px);

  border-radius: 50%;

  left: 15%;
  top: 20%;
}

.drawing-rfi-window {
  position: relative;
  z-index: 2;

  width: 88%;

  border-radius: var(--radius-xl);

  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border-color);

  box-shadow: var(--shadow-lg);
}
.attendance-3d::before {
  content: "";
  position: absolute;
  inset: 0;

  background-color:
    linear-gradient(to right, rgba(226, 232, 240, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.12) 1px, transparent 1px);

  background-size: 64px 64px;
  pointer-events: none;

  z-index: 0;
}

.attendance-3d__container {
  position: relative;
  z-index: 1;
}
.drawing-window-header {
  padding: 16px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: var(--white);

  background: var(--primary);
}

.drawing-window-header strong {
  font-size: 11px;
  letter-spacing: 1px;
}

.drawing-window-dots {
  display: flex;
  gap: 5px;
}

.drawing-window-dots span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);
}

.drawing-rfi-form {
  padding: 25px;
}

.drawing-rfi-form-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
}

.drawing-rfi-form-title > span:first-child {
  color: var(--primary);

  font-family: var(--font-heading);

  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.drawing-mini-status {
  padding: 6px 10px;

  color: #15803d;

  background: #dcfce7;

  border-radius: var(--radius-full);

  font-size: 10px;
  font-weight: var(--fw-bold);
}

.drawing-form-field {
  min-height: 66px;

  padding: 12px;

  background: var(--bg-light);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);
}

.drawing-form-field small,
.drawing-form-field strong {
  display: block;
}

.drawing-form-field small {
  margin-bottom: 4px;

  color: var(--text-light);

  font-size: 10px;
}

.drawing-form-field strong {
  color: var(--text-primary);

  font-size: 12px;
}

.drawing-response-box {
  padding: 15px;

  border-radius: var(--radius-sm);

  background: rgba(5, 59, 47, 0.05);

  border-left: 3px solid var(--primary);
}

.drawing-response-box small {
  color: var(--primary);

  font-size: 10px;
  font-weight: var(--fw-bold);
}

.drawing-response-box p {
  margin: 5px 0 0;

  color: var(--text-secondary);

  font-size: 12px;
  line-height: 1.6;
}

.drawing-rfi-flow-card {
  position: absolute;

  z-index: 4;

  right: 0;
  bottom: -96px;
  left: -2px;

  width: 92%;

  padding: 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.96);

  box-shadow: var(--shadow-md);

  backdrop-filter: blur(12px);
}

.drawing-flow-node {
  text-align: center;
  flex: 1;
}

.drawing-flow-node span {
  width: 38px;
  height: 38px;

  margin: 0 auto 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 50%;
}

.drawing-flow-node strong,
.drawing-flow-node small {
  display: block;
}

.drawing-flow-node strong {
  color: var(--text-primary);

  font-size: 10px;
}

.drawing-flow-node small {
  color: var(--text-light);

  font-size: 9px;
}

.drawing-rfi-flow-card > i {
  color: var(--secondary-dark);

  font-size: 11px;
}

/* RFI CONTENT */

.drawing-rfi-states {
  margin-top: 28px;

  display: grid;
  gap: 15px;
}

.drawing-rfi-state {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.drawing-state-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;
}

.drawing-state-icon.open {
  color: #b45309;
  background: #fef3c7;
}

.drawing-state-icon.resolved {
  color: #15803d;
  background: #dcfce7;
}

.drawing-rfi-state strong {
  display: block;

  color: var(--text-primary);

  font-size: var(--fs-sm);
}

.drawing-rfi-state p {
  margin: 3px 0 0;

  color: var(--text-secondary);

  font-size: 13px;
  line-height: 1.6;
}

.drawing-callout {
  margin-top: 25px;

  padding: 17px;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  background: var(--primary);

  border-radius: var(--radius-md);
}

.drawing-callout > span {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--secondary);

  border-radius: 50%;
}

.drawing-callout strong {
  color: var(--white);

  font-size: var(--fs-sm);
}

.drawing-callout p {
  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.65);

  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   REVIEW DASHBOARD
========================================================= */

/* =========================================================
   DRAWING REVIEW DASHBOARD
   Root variables: KEEP YOUR EXISTING ROOT
========================================================= */

.drawing-review-dashboard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px -28px rgba(10, 40, 30, 0.25);
}

/* =========================================================
   DASHBOARD HEADER
========================================================= */

.drawing-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px 24px;

  background: var(--teal-deep);
  color: #fff;
}

.drawing-dashboard-header small {
  display: block;

  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #a9d6c8;
  font-weight: 600;
}

.drawing-dashboard-header h3 {
  margin: 2px 0 0;

  color: #fff;

  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.drawing-dashboard-status {
  padding: 6px 12px;

  color: var(--teal-deep);
  background: var(--gold);

  border-radius: 20px;

  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
   DRAWING VIEWER
========================================================= */

.drawing-viewer {
  position: relative;

  padding: 20px 24px 4px;

  background: var(--card);

  overflow: hidden;
}

.drawing-viewer img {
  width: 100%;
  height: auto;

  display: block;

  border: 1px solid var(--line);
  border-radius: 10px;

  object-fit: cover;
}

/* =========================================================
   VIEWER LABEL
========================================================= */

.drawing-viewer-label {
  position: absolute;

  top: 32px;
  left: 36px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 8px 12px;

  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);

  border: 1px solid var(--line);
  border-radius: 8px;

  font-size: 10px;
  font-weight: 600;

  box-shadow: 0 5px 15px rgba(10, 40, 30, 0.08);
}

.drawing-viewer-label i {
  color: var(--teal);
}

/* =========================================================
   DRAWING COMMENT / REVIEW MARKERS
========================================================= */

.drawing-comment-marker {
  position: absolute;

  width: 29px;
  height: 29px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--teal-deep);
  background: var(--gold);

  border: 3px solid #fff;
  border-radius: 50%;

  font-size: 9px;
  font-weight: 700;

  box-shadow: 0 5px 15px rgba(10, 40, 30, 0.18);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.drawing-comment-marker:hover {
  transform: scale(1.18);

  box-shadow: 0 8px 20px rgba(10, 40, 30, 0.22);
}

/* Marker positions */

.marker-one {
  top: 30%;
  left: 27%;
}

.marker-two {
  top: 55%;
  right: 30%;
}

.marker-three {
  bottom: 20%;
  left: 52%;
}

/* =========================================================
   COMMENTS / TRACKING PANEL
========================================================= */

.drawing-comments-panel {
  padding: 8px 24px 24px;
}

.drawing-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px 0 10px;

  border-bottom: 1px solid var(--line);

  margin-bottom: 14px;
}

.drawing-comments-header strong {
  color: var(--ink);

  font-size: 14.5px;
  font-weight: 600;
}

.drawing-comments-header span {
  padding: 4px 10px;

  color: var(--teal);

  background: var(--teal-tint);

  border-radius: 20px;

  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
   COMMENT ITEM
========================================================= */

.drawing-comment-item {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 14px 0;

  border-bottom: 1px solid var(--line);
}

.drawing-comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Avatar */

.drawing-comment-avatar {
  flex: none;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--teal-deep);
  background: var(--teal-tint);

  border-radius: 9px;

  font-size: 13px;
  font-weight: 700;
}

/* Content */

.drawing-comment-item > div {
  flex: 1;
  min-width: 0;
}

.drawing-comment-item strong {
  display: block;

  color: var(--ink);

  font-size: 14px;
  font-weight: 600;

  margin-bottom: 3px;
}

.drawing-comment-item p {
  margin: 0;

  color: var(--ink-soft);

  font-size: 13px;
  line-height: 1.6;
}

/* Status */

.drawing-comment-item small {
  flex: none;
  align-self: flex-start;

  padding: 5px 10px;

  border-radius: 20px;

  margin-top: 1px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Status colors */

.drawing-comment-item:nth-child(1) small {
  background: #fdf1dc;
  color: #9a6b0e;
}

.drawing-comment-item:nth-child(2) small {
  background: var(--teal-tint);
  color: var(--teal-deep);
}

.drawing-comment-item:nth-child(3) small {
  background: #e9f0fb;
  color: #2b579e;
}

/* =========================================================
   REVIEW ACTION / FLOW
========================================================= */

.drawing-review-action {
  padding: 0 24px 24px;
}

.drawing-flow-strip {
  display: flex;
  align-items: center;

  gap: 10px;
  flex-wrap: wrap;

  padding: 12px 16px;

  color: var(--teal-deep);
  background: var(--teal-tint);

  border-radius: 10px;

  font-size: 12.5px;
  font-weight: 600;
}

.drawing-flow-strip i {
  color: var(--teal);
  font-size: 11px;
}

/* =========================================================
   REVIEW BENEFITS
========================================================= */

.drawing-review-benefits {
  margin-top: 30px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;
}

.drawing-review-benefits > div {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 20px;

  background: var(--card);

  border: 1px solid var(--line);

  border-radius: 14px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Benefit hover */

.drawing-review-benefits > div:hover {
  transform: translateY(-4px);

  border-color: rgba(15, 110, 86, 0.25);

  box-shadow: 0 12px 28px -18px rgba(10, 40, 30, 0.25);
}

/* Benefit Icon */

.drawing-review-benefits > div > span {
  flex: none;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--teal);

  background: var(--teal-tint);

  border-radius: 10px;

  font-size: 15px;
}

/* Benefit Title */

.drawing-review-benefits strong {
  display: block;

  color: var(--ink);

  font-size: 14.5px;
  font-weight: 600;

  margin-bottom: 4px;
}

/* Benefit Description */

.drawing-review-benefits p {
  margin: 0;

  color: var(--ink-soft);

  font-size: 13.5px;
  line-height: 1.55;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .drawing-review-benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .drawing-dashboard-header {
    padding: 17px 18px;
  }

  .drawing-dashboard-header h3 {
    font-size: 15px;
  }

  .drawing-dashboard-status {
    padding: 5px 9px;
    font-size: 10px;
  }

  .drawing-viewer {
    padding: 15px 16px 4px;
  }

  .drawing-viewer-label {
    top: 26px;
    left: 26px;
  }

  .drawing-comments-panel {
    padding: 8px 18px 20px;
  }

  .drawing-comment-item {
    gap: 10px;
  }

  .drawing-comment-item p {
    font-size: 12px;
  }

  .drawing-review-action {
    padding: 0 18px 20px;
  }

  .drawing-review-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .drawing-review-benefits > div {
    padding: 17px;
  }
}

/* =========================================================
   GFC FILTERS
========================================================= */

.drawing-gfc-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 8px;
}

.drawing-gfc-filter {
  padding: 9px 16px;

  color: var(--text-secondary);

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-full);

  font-size: 12px;
  font-weight: var(--fw-semibold);

  transition: var(--transition-fast);
}

.drawing-gfc-filter:hover {
  color: var(--primary);

  border-color: rgba(5, 59, 47, 0.2);
}

.drawing-gfc-filter.active {
  color: var(--white);

  background: var(--primary);

  border-color: var(--primary);
}

/* =========================================================
   GFC BOARD
========================================================= */

.drawing-gfc-board {
  overflow: hidden;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);

  background: var(--white);

  box-shadow: var(--shadow-md);
}

.drawing-gfc-board-header {
  padding: 23px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--border-color);
}

.drawing-gfc-board-header > div:first-child span {
  color: var(--text-light);

  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
}

.drawing-gfc-board-header h3 {
  margin: 4px 0 0;

  color: var(--primary);

  font-family: var(--font-heading);

  font-size: var(--fs-xl);
}

.drawing-live-indicator {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--text-secondary);

  font-size: 10px;
}

.drawing-live-indicator span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #22c55e;

  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1);
}

.drawing-gfc-table {
  margin: 0;

  min-width: 700px;
}

.drawing-gfc-table th {
  padding: 14px 18px;

  color: var(--text-light);

  background: #fbfcfc;

  border-bottom: 1px solid var(--border-color);

  font-size: 10px;
  font-weight: var(--fw-bold);

  white-space: nowrap;
}

.drawing-gfc-table td {
  padding: 17px 18px;

  vertical-align: middle;

  color: var(--text-secondary);

  font-size: 12px;

  border-color: var(--border-color);
}

.drawing-table-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawing-table-title > span {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 9px;
}

.drawing-table-title strong,
.drawing-table-title small {
  display: block;
}

.drawing-table-title strong {
  color: var(--text-primary);
  font-size: 12px;
}

.drawing-table-title small {
  margin-top: 2px;

  color: var(--text-light);
  font-size: 9px;
}

.drawing-status {
  display: inline-flex;

  padding: 6px 10px;

  border-radius: var(--radius-full);

  font-size: 9px;
  font-weight: var(--fw-bold);
}

.drawing-status.issued {
  color: #15803d;
  background: #dcfce7;
}

.drawing-status.pending {
  color: #a16207;
  background: #fef3c7;
}

/* =========================================================
   GFC REMINDER
========================================================= */

.drawing-gfc-reminder-card {
  height: 100%;

  padding: 28px;

  border-radius: var(--radius-xl);

  background: var(--primary);

  position: relative;

  overflow: hidden;

  box-shadow: var(--shadow-lg);
}

.drawing-gfc-reminder-card::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  right: -90px;
  top: -80px;

  border-radius: 50%;

  background: rgba(247, 201, 72, 0.12);
}

.drawing-reminder-top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawing-reminder-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--secondary);

  border-radius: 13px;
}

.drawing-ai-badge {
  padding: 6px 10px;

  color: var(--secondary);

  background: rgba(247, 201, 72, 0.1);

  border: 1px solid rgba(247, 201, 72, 0.25);

  border-radius: var(--radius-full);

  font-size: 9px;
  font-weight: var(--fw-bold);
}

.drawing-reminder-label {
  display: block;

  position: relative;
  z-index: 1;

  margin-top: 35px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 1.3px;
}

.drawing-gfc-reminder-card h3 {
  position: relative;
  z-index: 1;

  margin: 5px 0 8px;

  color: var(--white);

  font-family: var(--font-heading);

  font-size: var(--fs-2xl);
}

.drawing-gfc-reminder-card > p {
  position: relative;
  z-index: 1;

  color: rgba(255, 255, 255, 0.65);

  font-size: 13px;
  line-height: 1.7;
}

.drawing-reminder-list {
  position: relative;
  z-index: 1;

  margin-top: 25px;

  display: grid;
  gap: 10px;
}

.drawing-reminder-list > div {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 11px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.05);

  border-radius: var(--radius-sm);
}

.drawing-reminder-list > div > span {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--secondary);

  border-radius: 9px;

  font-family: var(--font-heading);

  font-weight: var(--fw-bold);
}

.drawing-reminder-list strong,
.drawing-reminder-list small {
  display: block;
}

.drawing-reminder-list strong {
  color: var(--white);
  font-size: 11px;
}

.drawing-reminder-list small {
  margin-top: 2px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 9px;
}

.drawing-ai-task {
  position: relative;
  z-index: 1;

  margin-top: 18px;

  padding: 14px;

  display: flex;
  align-items: flex-start;
  gap: 11px;

  background: rgba(247, 201, 72, 0.1);

  border: 1px solid rgba(247, 201, 72, 0.18);

  border-radius: var(--radius-md);
}

.drawing-ai-task > span {
  color: var(--secondary);
}

.drawing-ai-task strong,
.drawing-ai-task small {
  display: block;
}

.drawing-ai-task strong {
  color: var(--white);

  font-size: 11px;
}

.drawing-ai-task small {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 9px;
  line-height: 1.5;
}

/* FEATURE MESSAGE */

.drawing-feature-message {
  padding: 20px 24px;

  display: flex;
  align-items: center;
  gap: 15px;

  border: 1px solid rgba(5, 59, 47, 0.12);

  background: var(--white);

  border-radius: var(--radius-lg);
}

.drawing-feature-message-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 12px;
}

.drawing-feature-message strong {
  color: var(--primary);

  font-size: var(--fs-sm);
}

.drawing-feature-message p {
  margin: 4px 0 0;

  color: var(--text-secondary);

  font-size: 12px;
}
/* =========================================================
   SECTION
========================================================= */

.drawing-latest-control {
  position: relative;
  padding: 100px 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(11, 93, 71, 0.07), transparent 28%),
    radial-gradient(
      circle at 90% 80%,
      rgba(247, 201, 72, 0.08),
      transparent 25%
    ),
    var(--drawing-bg);

  overflow: hidden;
}

/* =========================================================
   INTRO
========================================================= */

.drawing-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 14px;

  border: 1px solid rgba(5, 59, 47, 0.12);
  border-radius: 50px;

  background: rgba(255, 255, 255, 0.75);

  color: var(--primary-light);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.drawing-section-title {
  margin: 18px 0 14px;

  color: #1f2937;

  font-size: clamp(34px, 4vw, 36px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.drawing-section-title span {
  display: block;
  color: #059669;
}

.drawing-section-description {
  max-width: 820px;
  margin: 0 auto;

  color: #6b7480;

  font-size: 16px;
  line-height: 1.5;
}

.intro1 {
  margin: 0 auto;
  max-width: 820px;

  line-height: 2.5;

  color: #6b7280;
  font-size: 16px;
  font-weight: 600;
}
/* =========================================================
   COMMON CARD
========================================================= */

.drawing-control-card {
  position: relative;

  height: 100%;
  padding: 30px;

  border: 1px solid var(--drawing-border);
  border-radius: 22px;

  background: rgba(255, 255, 255, 0.94);

  box-shadow: 0 18px 45px rgba(5, 59, 47, 0.07);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.drawing-control-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: var(--primary);
}

.drawing-control-card:hover {
  transform: translateY(-5px);

  border-color: rgba(5, 59, 47, 0.18);

  box-shadow: 0 24px 55px rgba(5, 59, 47, 0.11);
}

/* =========================================================
   CARD HEADER
========================================================= */

.drawing-control-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 25px;
}

.drawing-control-label {
  display: block;

  color: var(--primary-light);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.drawing-control-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 6px 10px;

  border-radius: 50px;

  background: rgba(25, 135, 84, 0.08);

  color: var(--drawing-success);

  font-size: 11px;
  font-weight: 700;
}

.drawing-control-live i {
  font-size: 6px;
}

/* =========================================================
   LEFT CARD
========================================================= */

.drawing-issuer-card h3 {
  max-width: 430px;

  margin-bottom: 14px;

  color: var(--primary-dark);

  font-size: 29px;
  line-height: 1.2;
  font-weight: 700;
}

.drawing-issuer-card h3 span {
  color: 059669;
}

.drawing-card-description {
  margin-bottom: 28px;

  color: #6b7480;

  font-size: 16px;
  line-height: 1.75;
}

/* =========================================================
   ISSUER FLOW
========================================================= */

.drawing-issuer-flow {
  position: relative;
}

.drawing-issuer-step {
  display: flex;
  align-items: center;
  gap: 14px;

  position: relative;
  z-index: 2;

  padding: 9px 0;
}

.drawing-issuer-icon {
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(5, 59, 47, 0.12);
  border-radius: 12px;

  background: #f3f8f6;

  color: var(--primary-light);

  font-size: 16px;
}

.drawing-issuer-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drawing-issuer-text strong {
  color: var(--primary-dark);

  font-size: 13px;
  font-weight: 700;
}

.drawing-issuer-text small {
  color: var(--drawing-muted);

  font-size: 11px;
}

.drawing-flow-line {
  position: relative;

  width: 44px;
  height: 25px;

  margin-left: 21px;

  border-left: 1px dashed rgba(5, 59, 47, 0.25);
}

.drawing-flow-line span {
  position: absolute;

  left: -4px;
  bottom: -1px;

  width: 7px;
  height: 7px;

  border-right: 1px solid var(--primary-light);
  border-bottom: 1px solid var(--primary-light);

  transform: rotate(45deg);
}

/* =========================================================
   RIGHT REVISION CONTROL
========================================================= */

.drawing-revision-control .drawing-control-card-header {
  align-items: center;
}

.drawing-revision-control h3 {
  margin: 5px 0 0;

  color: var(--primary-dark);

  font-size: 22px;
  font-weight: 700;
}

.drawing-revision-control h3 span {
  color: var(--primary-light);
}

.drawing-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 12px;

  border-radius: 8px;

  background: rgba(5, 59, 47, 0.06);

  color: var(--primary);

  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.drawing-source-badge i {
  font-size: 12px;
}

/* =========================================================
   VERSION TIMELINE
========================================================= */

.drawing-version-timeline {
  position: relative;

  padding-left: 8px;
}

.drawing-version-timeline::before {
  content: "";

  position: absolute;

  left: 23px;
  top: 22px;
  bottom: 22px;

  width: 1px;

  background: var(--drawing-border);
}

.drawing-version-item {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 14px;

  min-height: 68px;

  margin-bottom: 10px;
  padding: 10px 14px 10px 8px;

  border: 1px solid var(--drawing-border);
  border-radius: 13px;

  background: #fff;

  transition: 0.3s ease;
}

.drawing-version-item:hover {
  transform: translateX(4px);
}

.drawing-version-number {
  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #eef2f0;

  color: var(--drawing-muted);

  font-size: 11px;
  font-weight: 800;
}

.drawing-version-content {
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drawing-version-content strong {
  color: var(--primary-dark);

  font-size: 13px;
  font-weight: 700;
}

.drawing-version-content small {
  color: var(--drawing-muted);

  font-size: 10px;
}

.drawing-version-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  font-size: 10px;
  font-weight: 700;
}

.superseded .drawing-version-status {
  color: var(--drawing-danger);
}

.superseded .drawing-version-number {
  background: rgba(217, 92, 92, 0.08);
  color: var(--drawing-danger);
}

.current {
  border-color: rgba(25, 135, 84, 0.28);

  background: linear-gradient(90deg, rgba(25, 135, 84, 0.06), #fff);
}

.current .drawing-version-number {
  background: rgba(25, 135, 84, 0.1);
  color: var(--drawing-success);
}

.current .drawing-version-status {
  color: var(--drawing-success);
}

/* =========================================================
   PDF STAMP
========================================================= */

.drawing-issued-document {
  display: flex;
  align-items: center;
  gap: 15px;

  margin-top: 18px;
  padding: 15px;

  border: 1px dashed rgba(5, 59, 47, 0.2);
  border-radius: 14px;

  background: #f8faf9;
}

.drawing-pdf-box {
  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #fff0f0;

  color: var(--drawing-danger);
}

.drawing-pdf-box i {
  font-size: 18px;
}

.drawing-pdf-box span {
  margin-top: 2px;

  font-size: 7px;
  font-weight: 800;
}

.drawing-issued-info {
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drawing-issued-info span {
  color: var(--primary-light);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.drawing-issued-info strong {
  color: var(--primary-dark);

  font-size: 13px;
}

.drawing-issued-info p {
  margin: 0;

  color: var(--drawing-muted);

  font-size: 9px;
}

.drawing-issued-info p b {
  color: var(--primary-light);
}

.drawing-document-check {
  color: var(--drawing-success);

  font-size: 22px;
}

/* =========================================================
   SITE VERIFICATION
========================================================= */

.drawing-site-verification {
  display: flex;
  align-items: center;
  gap: 20px;

  padding: 24px 28px;

  border: 1px solid rgba(5, 59, 47, 0.12);
  border-radius: 18px;

  background: linear-gradient(
    100deg,
    rgba(5, 59, 47, 0.06),
    rgba(255, 255, 255, 0.9)
  );
}

.drawing-site-icon {
  flex: 0 0 52px;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: var(--primary);

  color: var(--secondary);

  font-size: 20px;
}

.drawing-site-content {
  flex: 1;
}

.drawing-site-content > span {
  display: block;

  margin-bottom: 4px;

  color: var(--primary-light);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.drawing-site-content strong {
  display: block;

  margin-bottom: 5px;

  color: var(--primary-dark);

  font-size: 17px;
  font-weight: 700;
}

.drawing-site-content p {
  max-width: 850px;

  margin: 0;

  color: var(--drawing-muted);

  font-size: 12px;
  line-height: 1.6;
}

.drawing-verification-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 13px;

  border-radius: 50px;

  background: rgba(25, 135, 84, 0.08);

  color: var(--drawing-success);

  font-size: 10px;
  font-weight: 700;

  white-space: nowrap;
}

/* =========================================================
   WARNING / REWORK MESSAGE
========================================================= */

.drawing-latest-message {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 22px 25px;

  border: 1px solid rgba(247, 201, 72, 0.25);
  border-radius: 16px;

  background: linear-gradient(
    100deg,
    rgba(247, 201, 72, 0.11),
    rgba(255, 255, 255, 0.95)
  );
}

.drawing-latest-message-icon {
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: rgba(247, 201, 72, 0.18);

  color: #a87900;

  font-size: 16px;
}

.drawing-latest-message strong {
  display: block;

  margin-bottom: 5px;

  color: var(--primary-dark);

  font-size: 15px;
}

.drawing-latest-message p {
  max-width: 1000px;

  margin: 0;

  color: var(--drawing-muted);

  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   FINAL FLOW MESSAGE
========================================================= */

.drawing-section-bottom-message {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;

  margin-top: 38px;
}

.drawing-section-bottom-message span {
  padding: 10px 17px;

  border: 1px solid rgba(5, 59, 47, 0.12);
  border-radius: 50px;

  background: #fff;

  color: var(--primary);

  font-size: 11px;
  font-weight: 700;

  box-shadow: 0 6px 18px rgba(5, 59, 47, 0.05);
}

.drawing-section-bottom-message i {
  color: var(--secondary);

  font-size: 13px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .drawing-latest-control {
    padding: 75px 0;
  }

  .drawing-section-title {
    font-size: 40px;
  }

  .drawing-source-badge {
    margin-top: 5px;
  }
}

@media (max-width: 767.98px) {
  .drawing-latest-control {
    padding: 60px 0;
  }

  .drawing-section-title {
    font-size: 34px;
  }

  .drawing-control-card {
    padding: 22px;
    border-radius: 17px;
  }

  .drawing-control-card-header {
    flex-direction: column;
    gap: 10px;
  }

  .drawing-revision-control .drawing-control-card-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .drawing-source-badge {
    white-space: normal;
    text-align: center;
  }

  .drawing-site-verification {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .drawing-verification-status {
    margin-left: 72px;
  }

  .drawing-latest-message {
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .drawing-section-title {
    font-size: 30px;
  }

  .drawing-section-description {
    font-size: 13px;
  }

  .drawing-issuer-card h3 {
    font-size: 24px;
  }

  .drawing-revision-control h3 {
    font-size: 19px;
  }

  .drawing-revision-item {
    padding-right: 8px;
  }

  .drawing-version-status {
    font-size: 9px;
  }

  .drawing-issued-document {
    align-items: flex-start;
  }

  .drawing-document-check {
    font-size: 18px;
  }

  .drawing-section-bottom-message {
    gap: 9px;
  }

  .drawing-section-bottom-message span {
    font-size: 10px;
    padding: 8px 12px;
  }

  .drawing-section-bottom-message i {
    font-size: 10px;
  }
}

/* =========================================================
   ISSUANCE
========================================================= */

.drawing-issuance-panel,
.drawing-revision-panel {
  height: 100%;
}

.drawing-direct-flow {
  margin-top: 30px;

  padding: 20px;

  display: flex;
  align-items: center;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  background: var(--bg-light);
}

.drawing-direct-node {
  flex: 1;

  text-align: center;
}

.drawing-direct-node span {
  width: 48px;
  height: 48px;

  margin: 0 auto 9px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: 50%;
}

.drawing-direct-node strong {
  display: block;

  color: var(--text-primary);

  font-size: 10px;
}

.drawing-direct-arrow {
  color: var(--secondary-dark);

  font-size: 11px;
}

.drawing-notification-card {
  margin-top: 18px;

  padding: 18px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: rgba(5, 59, 47, 0.05);

  border: 1px solid rgba(5, 59, 47, 0.1);

  border-radius: var(--radius-md);
}

.drawing-notification-card > span {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--white);

  border-radius: 10px;
}

.drawing-notification-card strong {
  display: block;

  color: var(--text-primary);

  font-size: 12px;
}

.drawing-notification-card p {
  margin: 3px 0 0;

  color: var(--text-secondary);

  font-size: 10px;
}

.drawing-notification-check {
  margin-left: auto;

  color: #16a34a;
}

/* REVISION */

.drawing-revision-panel {
  padding: 28px;

  background: var(--bg-light);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);
}

.drawing-revision-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.drawing-revision-header > div > span {
  color: var(--text-light);

  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
}

.drawing-revision-header h3 {
  margin: 5px 0 0;

  color: var(--primary);

  font-family: var(--font-heading);

  font-size: var(--fs-xl);
}

.drawing-source-badge {
  padding: 7px 10px;

  color: #15803d;
  background: #dcfce7;

  border-radius: var(--radius-full);

  font-size: 9px;
  font-weight: var(--fw-bold);
}

.drawing-revision-stack {
  margin-top: 24px;

  display: grid;
  gap: 10px;
}

.drawing-revision-item {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 13px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  background: var(--white);

  transition: var(--transition-fast);
}

.drawing-revision-item.current {
  border-color: rgba(5, 59, 47, 0.2);

  box-shadow: 0 7px 18px rgba(5, 59, 47, 0.07);
}

.drawing-revision-number {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color: var(--text-secondary);

  background: var(--bg-light);

  font-family: var(--font-heading);

  font-size: 12px;
  font-weight: var(--fw-bold);
}

.drawing-revision-item.current .drawing-revision-number {
  color: var(--primary);

  background: var(--secondary);
}

.drawing-revision-info {
  flex: 1;
}

.drawing-revision-info strong,
.drawing-revision-info small {
  display: block;
}

.drawing-revision-info strong {
  color: var(--text-primary);

  font-size: 12px;
}

.drawing-revision-info small {
  margin-top: 2px;

  color: var(--text-light);

  font-size: 9px;
}

.drawing-revision-state {
  padding: 6px 9px;

  color: var(--text-light);

  background: var(--bg-light);

  border-radius: var(--radius-full);

  font-size: 8px;
  font-weight: var(--fw-bold);
}

.drawing-revision-item.current .drawing-revision-state {
  color: #15803d;

  background: #dcfce7;
}

.drawing-pdf-stamp {
  margin-top: 20px;

  padding: 15px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);
}

.drawing-pdf-preview {
  width: 43px;
  height: 50px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: #dc2626;

  background: #fef2f2;

  border-radius: 8px;

  font-size: 14px;
}

.drawing-pdf-preview span {
  margin-top: 2px;

  font-size: 7px;
  font-weight: var(--fw-bold);
}

.drawing-pdf-stamp strong {
  display: block;

  color: var(--text-primary);

  font-size: 11px;
}

.drawing-pdf-stamp p {
  margin: 3px 0 0;

  color: var(--text-secondary);

  font-size: 9px;
}

.drawing-stamp-check {
  margin-left: auto;

  color: var(--primary);
}

.drawing-source-note {
  margin-top: 13px;

  display: flex;
  gap: 7px;

  color: var(--text-secondary);

  font-size: 10px;
  line-height: 1.5;
}

.drawing-source-note i {
  color: var(--primary);
}

.drawing-section-bottom-message {
  margin-top: 35px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;
}

.drawing-section-bottom-message span {
  padding: 10px 15px;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.06);

  border-radius: var(--radius-full);

  font-size: 12px;
  font-weight: var(--fw-bold);
}

.drawing-section-bottom-message i {
  color: var(--secondary-dark);

  font-size: 11px;
}

/* =========================================================
   SITE RFI
========================================================= */

.drawing-site-rfi-visual {
  min-height: 510px;

  position: relative;

  border-radius: var(--radius-xl);

  background: var(--white);

  border: 1px solid var(--border-color);

  overflow: hidden;

  box-shadow: var(--shadow-md);
}

.drawing-site-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(5, 59, 47, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 59, 47, 0.05) 1px, transparent 1px);

  background-size: 40px 40px;
}

.drawing-site-center {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 145px;
  height: 145px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: var(--primary);

  border: 8px solid rgba(5, 59, 47, 0.08);

  border-radius: 50%;

  box-shadow: 0 15px 35px rgba(5, 59, 47, 0.18);
}

.drawing-site-center i {
  color: var(--secondary);

  font-size: 22px;
}

.drawing-site-center strong {
  margin-top: 8px;

  color: var(--white);

  font-size: 11px;
}

.drawing-site-center small {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 9px;
}

.drawing-site-node {
  position: absolute;
  z-index: 3;

  width: 145px;

  padding: 13px;

  text-align: center;

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  transition: var(--transition-fast);
}

.drawing-site-node:hover {
  transform: translateY(-5px);

  border-color: rgba(5, 59, 47, 0.2);
}

.drawing-site-node span {
  width: 38px;
  height: 38px;

  margin: 0 auto 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 50%;
}

.drawing-site-node strong,
.drawing-site-node small {
  display: block;
}

.drawing-site-node strong {
  color: var(--text-primary);

  font-size: 10px;
}

.drawing-site-node small {
  margin-top: 2px;

  color: var(--text-light);

  font-size: 8px;
}

.node-gfc {
  top: 45px;
  left: 45px;
}

.node-site {
  top: 45px;
  right: 45px;
}

.node-rfi {
  bottom: 45px;
  left: 45px;
}

.node-consultant {
  bottom: 45px;
  right: 45px;
}

.drawing-site-connection {
  position: absolute;
  z-index: 1;

  background: var(--secondary);

  height: 2px;

  transform-origin: left center;

  opacity: 0.75;
}

.connection-one {
  width: 185px;

  top: 125px;
  left: 175px;

  transform: rotate(23deg);
}

.connection-two {
  width: 185px;

  top: 125px;
  right: 175px;

  transform: rotate(157deg);
}

.connection-three {
  width: 185px;

  bottom: 125px;
  left: 175px;

  transform: rotate(-23deg);
}

.connection-four {
  width: 185px;

  bottom: 125px;
  right: 175px;

  transform: rotate(-157deg);
}

.drawing-site-process {
  margin-top: 28px;

  display: grid;
  gap: 11px;
}

.drawing-process-step {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  transition: var(--transition-fast);
}

.drawing-process-step:hover {
  transform: translateX(5px);

  border-color: rgba(5, 59, 47, 0.2);
}

.drawing-process-step > span {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 9px;

  font-size: 9px;
  font-weight: var(--fw-bold);
}

.drawing-process-step strong,
.drawing-process-step small {
  display: block;
}

.drawing-process-step strong {
  color: var(--text-primary);

  font-size: 11px;
}

.drawing-process-step small {
  margin-top: 2px;

  color: var(--text-light);

  font-size: 9px;
}
/* =========================================================
   SITE RFI — FEEDBACK LOOP VISUAL
========================================================= */

.drawing-site-rfi-visual {
  position: relative;

  width: 100%;
  min-height: 500px;

  border: 1px solid rgba(5, 59, 47, 0.12);
  border-radius: 24px;

  background:
    radial-gradient(circle at center, rgba(11, 93, 71, 0.07), transparent 38%),
    #ffffff;

  overflow: hidden;

  box-shadow: 0 20px 55px rgba(5, 59, 47, 0.08);
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.drawing-site-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(5, 59, 47, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 59, 47, 0.045) 1px, transparent 1px);

  background-size: 32px 32px;

  mask-image: radial-gradient(circle at center, black 30%, transparent 82%);

  -webkit-mask-image: radial-gradient(
    circle at center,
    black 30%,
    transparent 82%
  );
}

/* =========================================================
   CENTER AREA
========================================================= */

.drawing-site-center {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 155px;
  height: 155px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  border: 1px solid rgba(5, 59, 47, 0.15);
  border-radius: 50%;

  background: radial-gradient(circle, #ffffff 45%, #f1f7f4 100%);

  box-shadow:
    0 0 0 12px rgba(5, 59, 47, 0.025),
    0 15px 40px rgba(5, 59, 47, 0.1);

  z-index: 5;
}

/* center icon */

.drawing-site-center i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 45px;
  height: 45px;

  margin-bottom: 10px;

  border-radius: 13px;

  background: var(--primary);

  color: var(--secondary);

  font-size: 18px;

  box-shadow: 0 8px 18px rgba(5, 59, 47, 0.18);
}

.drawing-site-center strong {
  display: block;

  color: var(--primary-dark);

  font-size: 13px;
  font-weight: 800;
}

.drawing-site-center small {
  display: block;

  margin-top: 3px;

  color: var(--drawing-muted);

  font-size: 10px;
}

/* =========================================================
   NODE COMMON
========================================================= */

.drawing-site-node {
  position: absolute;
  z-index: 10;

  width: 145px;

  padding: 15px 12px;

  text-align: center;

  border: 1px solid rgba(5, 59, 47, 0.12);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 12px 30px rgba(5, 59, 47, 0.08);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* =========================================================
   NODE ICON
========================================================= */

.drawing-site-node > span {
  width: 42px;
  height: 42px;

  margin: 0 auto 9px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #f1f7f4;

  color: var(--primary-light);

  font-size: 17px;

  transition: all 0.3s ease;
}

/* =========================================================
   NODE TEXT
========================================================= */

.drawing-site-node strong {
  display: block;

  color: var(--primary-dark);

  font-size: 12px;
  font-weight: 800;

  line-height: 1.3;
}

.drawing-site-node small {
  display: block;

  margin-top: 4px;

  color: var(--drawing-muted);

  font-size: 9px;
  line-height: 1.4;
}

/* =========================================================
   NODE POSITIONS
========================================================= */

/* GFC — Top */

.node-gfc {
  top: 30px;
  left: 50%;

  transform: translateX(-50%);
}

/* Site — Right */

.node-site {
  top: 50%;
  right: 38px;

  transform: translateY(-50%);
}

/* RFI — Bottom */

.node-rfi {
  bottom: 30px;
  left: 50%;

  transform: translateX(-50%);
}

/* Consultant — Left */

.node-consultant {
  top: 68%;
  left: 37px;
  transform: translateY(-122%);
}

/* =========================================================
   HOVER
========================================================= */

.drawing-site-node:hover {
  border-color: rgba(11, 93, 71, 0.28);

  box-shadow: 0 18px 38px rgba(5, 59, 47, 0.13);
}

/* preserve positional transform */

.node-gfc:hover {
  transform: translateX(-50%) translateY(-5px);
}

.node-site:hover {
  transform: translateY(-50%) translateX(5px);
}

.node-rfi:hover {
  transform: translateX(-50%) translateY(5px);
}

.node-consultant:hover {
  transform: translateY(-122%) translateX(-5px);
}

.drawing-site-node:hover > span {
  background: var(--primary);

  color: var(--secondary);
}

/* =========================================================
   CONNECTION LINES
========================================================= */

.drawing-site-connection {
  position: absolute;

  z-index: 2;

  background: rgba(5, 59, 47, 0.18);
}

/* =========================================================
   TOP → RIGHT
========================================================= */

.connection-one {
  width: 145px;
  height: 1px;

  left: 50%;
  top: 28%;

  transform: translateX(-5%) rotate(31deg);

  transform-origin: left center;
}

/* =========================================================
   RIGHT → BOTTOM
========================================================= */

.connection-two {
  width: 145px;
  height: 1px;

  right: 50%;
  top: 50%;

  transform: translateX(5%) rotate(31deg);

  transform-origin: right center;
}

/* =========================================================
   BOTTOM → LEFT
========================================================= */

.connection-three {
  width: 145px;
  height: 1px;

  left: 50%;
  bottom: 28%;

  transform: translateX(-95%) rotate(31deg);

  transform-origin: right center;
}

/* =========================================================
   LEFT → TOP
========================================================= */

.connection-four {
  width: 145px;
  height: 1px;

  left: 50%;
  top: 50%;

  transform: translateX(-95%) rotate(-31deg);

  transform-origin: right center;
}

/* =========================================================
   CONNECTION DOTS
========================================================= */

.drawing-site-connection::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -3px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--secondary);

  transform: translateY(-50%);

  box-shadow: 0 0 0 4px rgba(247, 201, 72, 0.12);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991.98px) {
  .drawing-site-rfi-visual {
    min-height: 450px;
  }

  .drawing-site-center {
    width: 135px;
    height: 135px;
  }

  .drawing-site-node {
    width: 130px;
  }

  .node-site {
    right: 25px;
  }

  .node-consultant {
    left: 25px;
  }

  .connection-one,
  .connection-two,
  .connection-three,
  .connection-four {
    width: 115px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .drawing-site-rfi-visual {
    min-height: 520px;

    border-radius: 18px;
  }

  .drawing-site-center {
    width: 125px;
    height: 125px;
  }

  .drawing-site-center i {
    width: 38px;
    height: 38px;

    margin-bottom: 7px;

    font-size: 15px;
  }

  .drawing-site-center strong {
    font-size: 11px;
  }

  .drawing-site-center small {
    font-size: 8px;
  }

  .drawing-site-node {
    width: 120px;

    padding: 12px 9px;

    border-radius: 13px;
  }

  .drawing-site-node > span {
    width: 36px;
    height: 36px;

    margin-bottom: 7px;

    font-size: 14px;
  }

  .drawing-site-node strong {
    font-size: 10px;
  }

  .drawing-site-node small {
    font-size: 8px;
  }

  /* positions */

  .node-gfc {
    top: 25px;
  }

  .node-site {
    right: 12px;
  }

  .node-rfi {
    bottom: 25px;
  }

  .node-consultant {
    left: 12px;
  }

  /* smaller connections */

  .connection-one,
  .connection-two,
  .connection-three,
  .connection-four {
    width: 85px;
  }
}

/* =========================================================
   CHANGE CARDS
========================================================= */

.drawing-change-card {
  height: 100%;

  padding: 30px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);

  background: var(--white);

  transition: var(--transition-normal);
}

.drawing-change-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-md);
}

.instruction-card {
  border-color: rgba(5, 59, 47, 0.15);
}

.drawing-change-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.drawing-change-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);

  border-radius: 12px;
}

.drawing-change-tag {
  padding: 6px 10px;

  color: var(--text-secondary);

  background: var(--bg-light);

  border-radius: var(--radius-full);

  font-size: 8px;
  font-weight: var(--fw-bold);

  letter-spacing: 0.8px;
}

.instruction-card .drawing-change-tag {
  color: var(--primary);

  background: rgba(5, 59, 47, 0.07);
}

.drawing-change-card h3 {
  margin: 28px 0 10px;

  color: var(--text-primary);

  font-family: var(--font-heading);

  font-size: 24px;
  font-weight: var(--fw-bold);
}

.drawing-change-card > p {
  color: var(--text-secondary);

  font-size: 13px;
  line-height: 1.75;
}

.drawing-change-example {
  margin-top: 22px;

  padding: 12px;

  display: flex;
  align-items: center;
  gap: 9px;

  background: var(--bg-light);

  border-radius: var(--radius-sm);

  color: var(--text-primary);

  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.drawing-change-example i {
  color: var(--primary);
}

.drawing-change-result {
  margin-top: 18px;

  padding-top: 17px;

  border-top: 1px solid var(--border-color);
}

.drawing-change-result small,
.drawing-change-result strong {
  display: block;
}

.drawing-change-result small {
  color: var(--text-light);

  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
}

.drawing-change-result strong {
  margin-top: 4px;

  color: var(--primary);

  font-size: 11px;
}

.drawing-instruction-flow {
  padding: 23px;

  border: 1px solid rgba(5, 59, 47, 0.12);

  border-radius: var(--radius-xl);

  background: rgba(5, 59, 47, 0.035);
}

.drawing-instruction-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.drawing-instruction-title > span {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--secondary);

  border-radius: 11px;
}

.drawing-instruction-title strong,
.drawing-instruction-title small {
  display: block;
}

.drawing-instruction-title strong {
  color: var(--primary);

  font-size: 13px;
}

.drawing-instruction-title small {
  margin-top: 3px;

  color: var(--text-secondary);

  font-size: 10px;
}

.drawing-instruction-steps {
  margin-top: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.drawing-instruction-steps > div {
  flex: 1;

  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--text-primary);

  font-size: 10px;
  font-weight: var(--fw-semibold);
}

.drawing-instruction-steps > div span {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--white);

  border: 1px solid var(--border-color);

  border-radius: 50%;

  font-size: 9px;
}

.drawing-instruction-steps > i {
  color: var(--secondary-dark);

  font-size: 10px;
}

/* =========================================================
   AS-BUILT
========================================================= */

/*=========================================================
  LEFT
  SIDE
  CONTENT
  =========================================================*/
.drawing-asbuilt .drawing-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 13px;
  border: 1px solid rgba(15, 110, 86, 0.15);
  border-radius: 50px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
#drawing-asbuilt .drawing-section-title {
  margin: 0 0 20px;
  color: var(--ab-ink);
  font-size: clamp(32px, 4vw, 36px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.8px;
}
#drawing-asbuilt .drawing-section-title span {
  display: block;
  color: #059669;
}
#drawing-asbuilt .drawing-section-description {
  max-width: 590px;
  margin-bottom: 30px;
  color: #6b7480;
  font-size: 16px;
  line-height: 1.8;
} /* ========================================================= LEFT CHECKLIST ========================================================= */
#drawing-asbuilt .drawing-asbuilt-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
#drawing-asbuilt .drawing-asbuilt-checklist > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(18, 36, 31, 0.04);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}
#drawing-asbuilt .drawing-asbuilt-checklist > div:hover {
  transform: translateX(7px);
  border-color: rgba(15, 110, 86, 0.25);
  background: var(--ab-white);
  box-shadow: 0 14px 30px rgba(15, 110, 86, 0.09);
}
#drawing-asbuilt .drawing-asbuilt-checklist > div > span {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
}
#drawing-asbuilt .drawing-asbuilt-checklist strong,
#drawing-asbuilt .drawing-asbuilt-checklist small {
  display: block;
}
#drawing-asbuilt .drawing-asbuilt-checklist strong {
  margin-bottom: 3px;
  color: var(--ab-ink);
  font-size: 13px;
  font-weight: 750;
}
#drawing-asbuilt .drawing-asbuilt-checklist small {
  color: #78857f;
  font-size: 11px;
  line-height: 1.5;
} /* ========================================================= RIGHT AS-BUILT SYSTEM ========================================================= */
#drawing-asbuilt .drawing-asbuilt-system {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 65px minmax(190px, 1.15fr);
  gap: 0;
  align-items: center;
  min-height: 390px;
  padding: 28px;
  border: 1px solid var(--ab-line);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 250, 248, 0.96)
  );
  box-shadow:
    0 25px 70px rgba(18, 36, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
} /* subtle ERP grid */
#drawing-asbuilt .drawing-asbuilt-system::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(15, 110, 86, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 110, 86, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
} /* ========================================================= GFC / SITE CHANGE COLUMNS ========================================================= */
#drawing-asbuilt .drawing-asbuilt-column {
  position: relative;
  z-index: 2;
  min-height: 295px;
  padding: 18px;
  border: 1px solid var(--ab-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 32px rgba(18, 36, 31, 0.055);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
#drawing-asbuilt .drawing-asbuilt-column:hover {
  transform: translateY(-5px);
  border-color: rgba(15, 110, 86, 0.22);
  box-shadow: 0 20px 42px rgba(15, 110, 86, 0.1);
} /* ========================================================= COLUMN TITLE ========================================================= */
#drawing-asbuilt .drawing-asbuilt-column-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--ab-line);
}
#drawing-asbuilt .drawing-asbuilt-column-title span {
  color: var(--ab-teal);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.4px;
}
#drawing-asbuilt .drawing-asbuilt-column-title small {
  color: #7a8782;
  font-size: 10px;
  white-space: nowrap;
} /* ========================================================= ACTIVE GFC LIST ========================================================= */
#drawing-asbuilt .drawing-asbuilt-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#drawing-asbuilt .drawing-asbuilt-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #e7ece9;
  border-radius: 11px;
  background: #fbfcfb;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
#drawing-asbuilt .drawing-asbuilt-list div:hover {
  transform: translateX(4px);
  background: var(--ab-teal-soft);
  border-color: rgba(15, 110, 86, 0.18);
  box-shadow: 0 7px 18px rgba(15, 110, 86, 0.06);
}
#drawing-asbuilt .drawing-asbuilt-list div.active {
  border-color: rgba(15, 110, 86, 0.3);
  background: linear-gradient(
    90deg,
    rgba(15, 110, 86, 0.1),
    rgba(15, 110, 86, 0.035)
  );
  box-shadow: inset 3px 0 0 var(--ab-teal);
}
#drawing-asbuilt .drawing-asbuilt-list span {
  color: var(--ab-ink);
  font-size: 12px;
  font-weight: 800;
}
#drawing-asbuilt .drawing-asbuilt-list small {
  padding: 4px 7px;
  border-radius: 6px;
  background: #edf1ef;
  color: #65736d;
  font-size: 9px;
  font-weight: 700;
} /* ========================================================= CONNECTOR ========================================================= */
#drawing-asbuilt .drawing-asbuilt-connector {
  position: relative;
  z-index: 4;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
#drawing-asbuilt .drawing-connector-line {
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: 35px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(15, 110, 86, 0.25),
    var(--ab-teal),
    rgba(15, 110, 86, 0.25),
    transparent
  );
}
#drawing-asbuilt .drawing-asbuilt-connect-btn {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: var(--ab-teal);
  color: #090707;
  box-shadow:
    0 10px 25px rgba(15, 110, 86, 0.24),
    0 0 0 7px rgba(15, 110, 86, 0.07);
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
#drawing-asbuilt .drawing-asbuilt-connect-btn:hover {
  transform: scale(1.1) rotate(8deg);
  background: var(--ab-teal-dark);
  box-shadow:
    0 14px 30px rgba(15, 110, 86, 0.3),
    0 0 0 10px rgba(15, 110, 86, 0.08);
}
#drawing-asbuilt .drawing-asbuilt-connector small {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  color: #75827d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
} /* ========================================================= SITE CHANGES ========================================================= */
#drawing-asbuilt .drawing-change-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#drawing-asbuilt .drawing-change-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e6ebe8;
  border-radius: 12px;
  background: #fbfcfb;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
#drawing-asbuilt .drawing-change-list > div:hover {
  transform: translateX(5px);
  border-color: rgba(233, 185, 73, 0.45);
  box-shadow: 0 8px 20px rgba(18, 36, 31, 0.06);
}
#drawing-asbuilt .drawing-change-list > div > span {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(233, 185, 73, 0.14);
  color: #b07c0d;
  font-size: 11px;
}
#drawing-asbuilt .drawing-change-list strong,
#drawing-asbuilt .drawing-change-list small {
  display: block;
}
#drawing-asbuilt .drawing-change-list strong {
  margin-bottom: 3px;
  color: var(--ab-ink);
  font-size: 12px;
  font-weight: 800;
}
#drawing-asbuilt .drawing-change-list small {
  color: #7a8782;
  font-size: 10px;
  line-height: 1.4;
} /* ========================================================= FINAL AS-BUILT BOX ========================================================= */
#drawing-asbuilt .drawing-asbuilt-final {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
  padding: 15px 18px;
  border: 1px solid rgba(15, 110, 86, 0.16);
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    rgba(15, 110, 86, 0.07),
    rgba(255, 255, 255, 0.9),
    rgba(15, 110, 86, 0.07)
  );
  box-shadow: 0 10px 25px rgba(18, 36, 31, 0.04);
}
#drawing-asbuilt .drawing-final-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  border-radius: 10px;
  background: var(--ab-teal);
  color: #090707;
  box-shadow: 0 7px 18px rgba(15, 110, 86, 0.2);
}
#drawing-asbuilt .drawing-asbuilt-final > span:not(.drawing-final-icon) {
  padding: 7px 10px;
  border: 1px solid #dce6e1;
  border-radius: 7px;
  background: #fff;
  color: #53635c;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.3;
} /* ========================================================= VERIFICATION ========================================================= */
#drawing-asbuilt .drawing-verification {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 28px;
  border: 1px solid var(--ab-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(18, 36, 31, 0.055);
}
#drawing-asbuilt .drawing-verification::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ab-teal), var(--ab-gold));
}
#drawing-asbuilt .drawing-verification-header {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
}
#drawing-asbuilt .drawing-verification-header > span {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ab-teal-soft);
  color: var(--ab-teal);
  font-size: 17px;
}
#drawing-asbuilt .drawing-verification-header strong,
#drawing-asbuilt .drawing-verification-header small {
  display: block;
}
#drawing-asbuilt .drawing-verification-header strong {
  margin-bottom: 3px;
  color: var(--ab-ink);
  font-size: 13px;
  font-weight: 800;
}
#drawing-asbuilt .drawing-verification-header small {
  color: #7b8882;
  font-size: 10px;
}
#drawing-asbuilt .drawing-verification-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  flex: 1;
}
#drawing-asbuilt .drawing-verification-items > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 62px;
  padding: 13px;
  border: 1px solid #e7ece9;
  border-radius: 11px;
  background: #fafcfb;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
#drawing-asbuilt .drawing-verification-items > div:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 110, 86, 0.2);
  background: #fff;
  box-shadow: 0 9px 22px rgba(18, 36, 31, 0.06);
}
#drawing-asbuilt .drawing-verification-items i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #16a34a;
  font-size: 13px;
}
#drawing-asbuilt .drawing-verification-items span {
  color: #596861;
  font-size: 10px;
  line-height: 1.6;
} /* ========================================================= TABLET ========================================================= */
@media (max-width: 1199px) {
  #drawing-asbuilt .drawing-asbuilt-system {
    grid-template-columns: minmax(145px, 1fr) 55px minmax(175px, 1fr);
    padding: 22px;
  }
  #drawing-asbuilt .drawing-asbuilt-column {
    padding: 15px;
  }
  #drawing-asbuilt .drawing-verification {
    align-items: flex-start;
    flex-direction: column;
  }
  #drawing-asbuilt .drawing-verification-items {
    width: 100%;
  }
} /* ========================================================= MOBILE / TABLET ========================================================= */
@media (max-width: 991px) {
  #drawing-asbuilt .drawing-section-title {
    font-size: 42px;
  }
  #drawing-asbuilt .drawing-asbuilt-system {
    margin-top: 10px;
  }
  #drawing-asbuilt .drawing-verification-items {
    grid-template-columns: 1fr;
  }
} /* ========================================================= MOBILE ========================================================= */
@media (max-width: 767px) {
  #drawing-asbuilt {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  #drawing-asbuilt .drawing-section-title {
    font-size: 34px;
    letter-spacing: -1px;
  }
  #drawing-asbuilt .drawing-section-description {
    font-size: 14px;
    line-height: 1.7;
  }
  #drawing-asbuilt .drawing-asbuilt-system {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: auto;
    padding: 18px;
  }
  #drawing-asbuilt .drawing-asbuilt-column {
    width: 100%;
    min-height: auto;
    padding: 15px;
  }
  #drawing-asbuilt .drawing-asbuilt-connector {
    width: 100%;
    height: 65px;
    margin: 0;
  }
  #drawing-asbuilt .drawing-connector-line {
    top: 0;
    bottom: 0;
    width: 2px;
  }
  #drawing-asbuilt .drawing-asbuilt-connect-btn {
    width: 42px;
    height: 42px;
  }
  #drawing-asbuilt .drawing-asbuilt-final {
    width: 100%;
    margin-top: 3px;
    flex-direction: column;
    text-align: center;
  }
  #drawing-asbuilt .drawing-final-icon {
    margin-right: 0;
    margin-bottom: 2px;
  }
  #drawing-asbuilt .drawing-verification {
    padding: 20px 18px;
    gap: 20px;
  }
} /* ========================================================= SMALL MOBILE ========================================================= */
@media (max-width: 480px) {
  #drawing-asbuilt .drawing-section-eyebrow {
    font-size: 9px;
    letter-spacing: 1.2px;
  }
  #drawing-asbuilt .drawing-section-title {
    font-size: 29px;
  }
  #drawing-asbuilt .drawing-asbuilt-system {
    padding: 14px;
  }
  #drawing-asbuilt .drawing-asbuilt-column {
    padding: 13px;
  }
  #drawing-asbuilt .drawing-asbuilt-list div {
    padding: 10px;
  }
  #drawing-asbuilt .drawing-verification-items > div {
    padding: 12px;
  }
}

/* =========================================================
   MEMORY
========================================================= */

.drawing-memory-dashboard {
  overflow: hidden;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);

  background: var(--white);

  box-shadow: var(--shadow-md);
}

.drawing-memory-header {
  padding: 22px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid var(--border-color);
}

.drawing-memory-header span:first-child {
  color: var(--text-light);

  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
}

.drawing-memory-header h3 {
  margin: 4px 0 0;

  color: var(--primary);

  font-family: var(--font-heading);

  font-size: var(--fs-xl);
}

.drawing-memory-status {
  padding: 7px 11px;

  color: #15803d;

  background: #dcfce7;

  border-radius: var(--radius-full);

  font-size: 9px;
  font-weight: var(--fw-bold);
}

.drawing-memory-timeline {
  padding: 25px;

  position: relative;
}

.drawing-memory-timeline::before {
  content: "";

  position: absolute;

  top: 25px;
  bottom: 25px;
  left: 43px;

  width: 2px;

  background: linear-gradient(
    var(--secondary),
    var(--primary),
    var(--secondary)
  );

  opacity: 0.3;
}

.drawing-memory-item {
  position: relative;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 9px 0;
}

.drawing-memory-dot {
  position: relative;
  z-index: 2;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--white);

  border: 2px solid var(--border-color);

  border-radius: 50%;

  font-size: 10px;
}

.drawing-memory-item.active .drawing-memory-dot {
  border-color: var(--primary);

  background: rgba(5, 59, 47, 0.06);
}

.drawing-memory-item.final .drawing-memory-dot {
  color: var(--primary);

  border-color: var(--secondary);

  background: var(--secondary);
}

.drawing-memory-item small,
.drawing-memory-item strong {
  display: block;
}

.drawing-memory-item small {
  color: var(--text-light);

  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.7px;
}

.drawing-memory-item strong {
  margin-top: 2px;

  color: var(--text-primary);

  font-size: 11px;
}

/* MEMORY CONTENT */

.drawing-employee-change {
  margin-top: 28px;

  display: flex;
  align-items: center;

  gap: 10px;
}

.drawing-person-card {
  flex: 1;

  padding: 13px;

  text-align: center;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  background: var(--bg-light);
}

.drawing-person-card > span {
  width: 38px;
  height: 38px;

  margin: 0 auto 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-secondary);

  background: var(--white);

  border-radius: 50%;
}

.drawing-person-card.project {
  border-color: rgba(5, 59, 47, 0.15);

  background: rgba(5, 59, 47, 0.05);
}

.drawing-person-card.project > span {
  color: var(--primary);

  background: var(--secondary);
}

.drawing-person-card strong,
.drawing-person-card small {
  display: block;
}

.drawing-person-card strong {
  color: var(--text-primary);

  font-size: 10px;
}

.drawing-person-card small {
  margin-top: 2px;

  color: var(--text-light);

  font-size: 8px;
}

.drawing-employee-arrow {
  text-align: center;
}

.drawing-employee-arrow i {
  color: var(--secondary-dark);
}

.drawing-employee-arrow small {
  display: block;

  margin-top: 3px;

  color: var(--text-light);

  font-size: 7px;
}

.drawing-new-member {
  margin-top: 16px;

  padding: 17px;

  display: flex;
  align-items: flex-start;
  gap: 12px;

  background: var(--primary);

  border-radius: var(--radius-md);
}

.drawing-new-member-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--primary);

  background: var(--secondary);

  border-radius: 10px;
}

.drawing-new-member strong {
  color: var(--white);

  font-size: 12px;
}

.drawing-new-member p {
  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 10px;

  line-height: 1.6;
}

/* =========================================================
   FINAL SECTION
========================================================= */

.drawing-final {
  position: relative;

  overflow: hidden;

  background: #ffffff !important;

  background-image: none !important;
}

/* Hide old background pattern */

.drawing-final-pattern {
  display: none !important;
}

/* Keep content above everything */

.drawing-final .drawing-container {
  position: relative;

  z-index: 2;
}

/* =========================================================
   FINAL TITLE
========================================================= */

.drawing-final-title {
  margin-bottom: 20px;

  font-size: clamp(34px, 3.2vw, 36px);

  line-height: 1;

  letter-spacing: 0.3px;

  font-weight: 700;

  color: #1f2937;
}

.drawing-final-title span {
  display: block;

  color: #059669;
}

/* =========================================================
   FINAL DESCRIPTION
========================================================= */

.drawing-final-description {
  max-width: 850px;

  margin: 20px auto 0;

  color: #64748b;

  font-size: var(--fs-md);

  line-height: 1.8;
}

/* =========================================================
   CONNECTED DRAWING LIFECYCLE
========================================================= */

.drawing-final-lifecycle {
  margin-top: 55px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}

/* =========================================================
   LIFECYCLE CARD
========================================================= */

.drawing-final-card {
  position: relative;

  min-height: 220px;

  padding: 25px 24px;

  background: #ffffff;

  border: 1px solid rgba(5, 59, 47, 0.1);

  border-radius: var(--radius-lg);

  box-shadow: 0 8px 25px rgba(5, 59, 47, 0.06);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Top green line */

.drawing-final-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* Hover */

.drawing-final-card:hover {
  transform: translateY(-6px);

  border-color: rgba(247, 201, 72, 0.55);

  box-shadow: 0 14px 30px rgba(5, 59, 47, 0.1);
}

/* =========================================================
   CARD NUMBER
========================================================= */

.drawing-final-card-number {
  position: absolute;

  top: 18px;

  right: 20px;

  color: #b7c2be;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;
}

/* =========================================================
   CARD ICON
========================================================= */

.drawing-final-card-icon {
  width: 48px;

  height: 48px;

  margin-bottom: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary);

  background: var(--secondary);

  border-radius: 13px;

  font-size: 17px;
}

/* =========================================================
   CARD CONTENT
========================================================= */

.drawing-final-card-content span {
  display: block;

  margin-bottom: 5px;

  color: #84918d;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.2px;
}

.drawing-final-card-content h3 {
  margin: 0 0 9px;

  color: var(--primary-dark);

  font-family: var(--font-heading);

  font-size: 18px;

  font-weight: 600;

  line-height: 1.3;
}

.drawing-final-card-content p {
  max-width: 330px;

  margin: 0;

  color: #71807b;

  font-size: 12px;

  line-height: 1.7;
}

/* =========================================================
   ACTIVE / FINAL CARD
========================================================= */

.drawing-final-card.active,
.drawing-final-card.final {
  border-color: rgba(247, 201, 72, 0.45);
}

.drawing-final-card.active::before,
.drawing-final-card.final::before {
  background: var(--secondary);
}

.drawing-final-card.active .drawing-final-card-icon,
.drawing-final-card.final .drawing-final-card-icon {
  box-shadow: 0 6px 18px rgba(247, 201, 72, 0.2);
}

/* =========================================================
   CONNECTED RECORD MESSAGE
========================================================= */

.drawing-final-record {
  max-width: 900px;

  margin: 35px auto 0;

  padding: 22px 25px;

  display: flex;

  align-items: center;

  gap: 18px;

  border: 1px solid rgba(5, 59, 47, 0.1);

  background: #f7faf9;

  border-radius: var(--radius-lg);

  box-shadow: 0 10px 30px rgba(5, 59, 47, 0.06);
}

/* Record icon */

.drawing-final-record-icon {
  width: 50px;

  height: 50px;

  flex: 0 0 50px;

  display: f;
}

/* =========================================================
   FOOTER
========================================================= */

.drawing-footer {
  padding: 25px 0;

  background: var(--primary-dark);

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
}

.drawing-footer a {
  margin-left: 20px;

  color: rgba(255, 255, 255, 0.55);

  transition: var(--transition-fast);
}

.drawing-footer a:hover {
  color: var(--secondary);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes drawingFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes drawingOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {
  .drawing-hero {
    padding: 75px 0;
  }

  .drawing-hero-visual {
    min-height: 480px;
  }

  .drawing-hero-image-wrap {
    width: 330px;
    height: 330px;
  }

  .drawing-orbit-one {
    width: 410px;
    height: 410px;
  }

  .drawing-orbit-two {
    width: 300px;
    height: 300px;
  }

  .drawing-floating-rfi {
    left: -5px;
  }

  .drawing-floating-gfc {
    right: -5px;
  }

  .drawing-instruction-steps {
    flex-wrap: wrap;
  }

  .drawing-instruction-steps > div {
    min-width: calc(50% - 30px);
  }
}

@media (max-width: 991px) {
  .section-padding {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .drawing-navbar {
    min-height: 80px;
  }

  .drawing-nav-list {
    margin-top: 15px;

    gap: 2px;
  }

  .drawing-navbar-action {
    margin-top: 12px;
    margin-bottom: 15px;
  }

  .drawing-hero {
    min-height: auto;
  }

  .drawing-hero-visual {
    min-height: 500px;

    margin-top: 20px;
  }

  .drawing-rfi-visual {
    min-height: 550px;
  }

  .drawing-review-dashboard {
    margin-top: 10px;
  }

  .drawing-issuance-panel {
    margin-bottom: 10px;
  }

  .drawing-verification {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .drawing-site-rfi-visual {
    min-height: 500px;
  }

  .drawing-final-flow {
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .drawing-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .drawing-hero {
    padding: 60px 0;
  }

  .drawing-hero-title {
    font-size: 40px;
  }

  .drawing-hero-description {
    font-size: 15px;
  }

  .drawing-hero-flow {
    gap: 6px;
  }

  .drawing-hero-flow i {
    display: none;
  }

  .drawing-hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .drawing-hero-visual {
    min-height: 430px;
  }

  .drawing-hero-image-wrap {
    width: 275px;
    height: 275px;
  }

  .drawing-orbit-one {
    width: 340px;
    height: 340px;
  }

  .drawing-orbit-two {
    width: 250px;
    height: 250px;
  }

  .drawing-floating-card {
    min-width: 155px;

    padding: 10px;
  }

  .drawing-floating-card strong {
    font-size: 10px;
  }

  .drawing-floating-rfi {
    top: 35px;
    left: 0;
  }

  .drawing-floating-gfc {
    top: 185px;
    right: 0;
  }

  .drawing-floating-asbuilt {
    bottom: 20px;
    left: 10px;
  }

  .drawing-lifecycle-line {
    display: none;
  }

  .drawing-lifecycle-detail {
    padding: 22px;
  }

  .drawing-rfi-window {
    width: 100%;
  }

  .drawing-rfi-flow-card {
    width: 100%;

    position: relative;

    right: auto;
    bottom: auto;

    margin-top: 15px;
  }

  .drawing-rfi-visual {
    display: block;

    min-height: auto;
  }

  .drawing-dashboard-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

  .drawing-viewer,
  .drawing-viewer img {
    min-height: 240px;
    height: 240px;
  }

  .drawing-review-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .drawing-gfc-board-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 12px;
  }

  .drawing-feature-message {
    align-items: flex-start;
  }

  .drawing-direct-flow {
    padding: 15px;
  }

  .drawing-direct-node strong {
    font-size: 8px;
  }

  .drawing-revision-panel {
    padding: 20px;
  }

  .drawing-site-rfi-visual {
    min-height: 430px;
  }

  .drawing-site-node {
    width: 115px;
    padding: 10px;
  }

  .drawing-site-node span {
    width: 32px;
    height: 32px;
  }

  .node-gfc,
  .node-rfi {
    left: 15px;
  }

  .node-site,
  .node-consultant {
    right: 15px;
  }

  .node-gfc,
  .node-site {
    top: 25px;
  }

  .node-rfi,
  .node-consultant {
    bottom: 25px;
  }

  .drawing-site-center {
    width: 115px;
    height: 115px;
  }

  .connection-one {
    width: 120px;

    left: 120px;
    top: 105px;
  }

  .connection-two {
    width: 120px;

    right: 120px;
    top: 105px;
  }

  .connection-three {
    width: 120px;

    left: 120px;
    bottom: 105px;
  }

  .connection-four {
    width: 120px;

    right: 120px;
    bottom: 105px;
  }

  .drawing-change-card {
    padding: 22px;
  }

  .drawing-change-card-header {
    align-items: flex-start;
  }

  .drawing-instruction-steps {
    display: grid;
  }

  .drawing-instruction-steps > div {
    min-width: 100%;
  }

  .drawing-instruction-steps > i {
    display: none;
  }

  .drawing-asbuilt-system {
    padding: 18px;
  }

  .drawing-verification-items {
    flex-direction: column;
  }

  .drawing-memory-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

  .drawing-employee-change {
    align-items: stretch;

    flex-direction: column;
  }

  .drawing-employee-arrow {
    transform: rotate(90deg);
  }

  .drawing-final-flow > i {
    display: none;
  }

  .drawing-final-flow-item {
    min-width: 82px;
  }

  .drawing-final-statement {
    align-items: flex-start;
  }

  .drawing-final-actions {
    flex-direction: column;
  }

  .drawing-final-actions .drawing-btn {
    width: 100%;
  }

  .drawing-footer {
    text-align: center;
  }

  .drawing-footer .text-md-end {
    margin-top: 10px;

    text-align: center !important;
  }

  .drawing-footer a {
    margin: 0 8px;
  }
}

@media (max-width: 575px) {
  .drawing-brand-logo {
    width: 130px;
  }

  .drawing-hero-title {
    font-size: 34px;

    letter-spacing: -1px;
  }

  .drawing-eyebrow {
    font-size: 11px;
  }

  .drawing-eyebrow-divider {
    display: none;
  }

  .drawing-hero-visual {
    min-height: 360px;
  }

  .drawing-hero-image-wrap {
    width: 225px;
    height: 225px;
  }

  .drawing-orbit-one {
    width: 285px;
    height: 285px;
  }

  .drawing-orbit-two {
    width: 210px;
    height: 210px;
  }

  .drawing-floating-card {
    min-width: 135px;
  }

  .drawing-floating-card small {
    font-size: 8px;
  }

  .drawing-floating-card strong {
    font-size: 9px;
  }

  .drawing-floating-icon {
    width: 31px;
    height: 31px;
  }

  .drawing-floating-rfi {
    top: 5px;
  }

  .drawing-floating-gfc {
    top: 130px;
  }

  .drawing-floating-asbuilt {
    bottom: 5px;
  }

  .drawing-section-title {
    font-size: 29px;
  }

  .drawing-rfi-form {
    padding: 15px;
  }

  .drawing-rfi-flow-card {
    display: grid;

    grid-template-columns: 1fr 20px 1fr 20px 1fr;

    padding: 10px 5px;
  }

  .drawing-flow-node span {
    width: 30px;
    height: 30px;
  }

  .drawing-flow-node strong {
    font-size: 7px;
  }

  .drawing-flow-node small {
    font-size: 7px;
  }

  .drawing-direct-flow {
    flex-wrap: wrap;
    justify-content: center;

    gap: 12px;
  }

  .drawing-direct-node {
    min-width: 65px;
  }

  .drawing-direct-arrow {
    display: none;
  }

  .drawing-final-statement {
    flex-direction: column;
  }

  .drawing-final-statement strong {
    font-size: 18px;
  }
}