/*
 * DG Bangla Engineering — approved brand-style alignment
 * Source of truth: DG Bangla Brand Style, August 2026.
 * Loaded after the core and responsive styles so the exact brand tokens and
 * component states below remain consistent across templates and plugins.
 */

:root {
  --ground: #1c2739;
  --navy: #1c2739;
  --deep: #141b28;
  --mid: #56606e;
  --red: #b2413c;
  --accent: #b2413c;
  --red-dark: #8f322f;
  --paper: #f2f1ec;
  --paper2: #e9e7e0;
  --ink: #1a2230;
  --grey: #56606e;
  --line: #dfdcd3;
  --hairline: #dfdcd3;
  --success: #2a8a64;
  --success-bg: #e4efe8;
  --error-bg: #fff0ee;
  --confirm: #93631f;
  --confirm-bg: #f4e7c7;
  --whatsapp: #25d366;
  --radius: 3px;
  --ground-gradient: linear-gradient(145deg, #1c2739 0%, #141b28 100%);
  --accent-gradient: linear-gradient(120deg, #b2413c 0%, #8f322f 100%);
  --accent-shadow: 0 10px 24px rgba(178, 65, 60, 0.22);
}

html {
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--ground);
  outline-offset: 3px;
}

.section {
  padding-block: clamp(78px, 8vw, 112px);
}

.mono-label,
.section-eyebrow {
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.2em;
}

.section-eyebrow {
  color: var(--accent);
}

.section-title,
.page-hero h1,
.hero h1 {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(50px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

h2,
.h2 {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

html[lang="bn"] body {
  font-family: "Noto Sans Bengali", sans-serif;
}

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] .section-title,
html[lang="bn"] .page-hero h1,
html[lang="bn"] .hero h1 {
  font-family: "Noto Sans Bengali", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.16;
  text-transform: none;
}

html[lang="bn"] h2,
html[lang="bn"] .h2 {
  font-size: clamp(30px, 3.8vw, 42px);
}

html[lang="ko"] body {
  font-family: "Noto Sans KR", "Inter", sans-serif;
  word-break: keep-all;
}

html[lang="zh"] body {
  font-family: "Noto Sans SC", "Inter", sans-serif;
}

html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] .section-title,
html[lang="ko"] .page-hero h1,
html[lang="ko"] .hero h1 {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-transform: none;
}

html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] .section-title,
html[lang="zh"] .page-hero h1,
html[lang="zh"] .hero h1 {
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: none;
}

html[lang="ko"] .mono-label,
html[lang="zh"] .mono-label,
html[lang="ko"] .section-eyebrow,
html[lang="zh"] .section-eyebrow {
  letter-spacing: 0.1em;
}

/* Blueprint surfaces */
.blueprint {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 17px);
}

.hero,
.page-hero,
.dark-section,
.signature-section,
.milestones-band,
.navy-section,
.stats-band,
.why-band,
.signature-project,
.site-footer,
.mobile-drawer,
.contact-panel,
.procurement-pack,
.enquiry-card,
.reassurance-panel,
.status-hero,
.dark-panel {
  background-color: var(--ground);
  background-image: var(--ground-gradient);
}

.hero h1,
.page-hero h1,
.navy-section .section-title,
.dark-panel .section-title,
.signature-project .section-title {
  color: #fff;
}

.hero-copy,
.page-hero p,
.navy-section .section-copy,
.dark-panel .section-copy,
.site-footer {
  color: rgba(255, 255, 255, 0.72);
}

.hero .accent,
.text-red,
.accent-text {
  color: var(--accent);
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 27, 40, 0.98) 0%, rgba(28, 39, 57, 0.91) 43%, rgba(28, 39, 57, 0.52) 72%, rgba(20, 27, 40, 0.2)),
    linear-gradient(0deg, rgba(20, 27, 40, 0.58), transparent 48%);
}

.case-shade {
  background:
    linear-gradient(90deg, rgba(20, 27, 40, 0.96), rgba(28, 39, 57, 0.72) 56%, rgba(20, 27, 40, 0.18)),
    linear-gradient(0deg, rgba(20, 27, 40, 0.82), transparent 58%);
}

.hero-spec,
.survey-frame > span,
.survey-frame figcaption,
.case-image figcaption,
.about-story figcaption,
.signature-layout > figure figcaption {
  background: rgba(20, 27, 40, 0.88);
}

/* Header and navigation */
.announce {
  background: var(--deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

.announce-text i,
.announce .diamond {
  color: var(--accent);
}

.navbar {
  background: rgba(28, 39, 57, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 28px rgba(20, 27, 40, 0.14);
  color: #fff;
}

.navbar .logo-text,
.navbar .navbar-list a,
.navbar .mobile-toggle {
  color: #fff;
}

.navbar .logo-text small {
  color: rgba(255, 255, 255, 0.58);
}

.logo-mark {
  background: var(--accent-gradient);
  box-shadow: 0 7px 18px rgba(178, 65, 60, 0.26);
}

.navbar-list a::after {
  background: var(--accent);
}

.lang {
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}

.lang a {
  padding: 3px 7px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

.lang a.active {
  background: #fff;
  color: var(--ground);
}

.mobile-drawer,
.mobile-list a {
  color: #fff;
}

.breadcrumbs {
  background: transparent;
  color: var(--mid);
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
}

.breadcrumbs span {
  color: var(--accent);
}

.breadcrumbs strong {
  color: var(--ink);
}

/* Buttons and links */
.btn {
  min-height: 46px;
  border-radius: var(--radius);
  padding: 12px 21px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}

.btn:hover {
  box-shadow: 0 10px 20px rgba(20, 27, 40, 0.14);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--ground);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}

.btn-red,
.cta-band,
.submit-btn {
  background: var(--accent-gradient);
  color: #fff;
}

.btn-red {
  box-shadow: var(--accent-shadow);
}

.btn-red:hover {
  box-shadow: 0 14px 28px rgba(178, 65, 60, 0.28);
}

.btn-light {
  background: #fff;
  border-color: var(--hairline);
  color: var(--ink);
}

.btn-plain {
  background: #e7e5de;
  border-color: #e7e5de;
  color: var(--ink);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn:disabled,
.btn[aria-disabled="true"],
button:disabled {
  background: #e7e5de;
  border-color: #e7e5de;
  box-shadow: none;
  color: #9f9d96;
  cursor: not-allowed;
  transform: none;
}

.whatsapp,
.btn-whatsapp,
.float-whatsapp {
  background: var(--whatsapp) !important;
  color: #0c3b1d !important;
}

.text-link,
a.text-link {
  color: var(--accent);
}

/* Chips, status and data marks */
.confirm-tag,
.confirm-chip {
  background: var(--confirm-bg);
  border: 1px dashed #b18848;
  color: var(--confirm);
}

.trust-chip,
.filter-chip,
.status-chip,
.proof-chip,
.sector-chip {
  background: #fff;
  border-color: var(--hairline);
  color: var(--ink);
}

.trust-chip:first-child,
.filter-chip.active,
.filter-chip[aria-pressed="true"],
.status-chip.is-primary,
.government-chip {
  background: var(--ground);
  border-color: var(--ground);
  color: #fff;
}

.trust-chips span {
  background: #fff;
  border-color: var(--hairline);
  color: var(--ink);
}

.trust-chips span:first-child {
  background: var(--ground);
  border-color: var(--ground);
  color: #fff;
}

.project-filters button {
  background: #fff;
  border-color: var(--hairline);
  color: var(--ink);
}

.project-filters button.active,
.project-filters button[aria-pressed="true"] {
  background: var(--ground);
  border-color: var(--ground);
  color: #fff;
}

.status-chip.is-success,
.sent-chip,
.success-chip {
  background: var(--success-bg);
  border-color: #b8d6c5;
  color: var(--success);
}

.diamond,
.cap-card::before,
.project-card::before {
  background: var(--accent);
}

/* Cards and section surfaces */
.card,
.project-card,
.service-card,
.cap-card,
.process-card,
.why-card,
.reference-card,
.credential-card,
.update-card,
.team-card,
.quote-form,
.status-form,
.faq-item,
.spec-card,
.evidence-card,
.form-card,
.panel {
  border-color: var(--hairline);
  border-radius: var(--radius);
}

.project-card,
.service-card,
.process-card,
.reference-card,
.credential-card,
.update-card,
.team-card,
.quote-form,
.status-form,
.faq-item,
.spec-card,
.evidence-card,
.form-card,
.panel {
  background: #fff;
}

.project-grid > article,
.leadership-grid article,
.credential-grid > article,
.updates-grid article,
.lookup-form,
.empty-state {
  background: #fff;
  border-color: var(--hairline);
  border-radius: var(--radius);
}

.assurance-grid,
.assurance-grid article,
.process-grid article,
.why-grid,
.why-grid article,
.team-units,
.team-units article,
.quality-grid,
.quality-grid article,
.evidence-grid,
.evidence-grid section,
.spec-table,
.spec-table > div,
.service-list > article,
.faq,
.faq details {
  border-color: var(--hairline);
}

.cap-card,
.why-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.13);
}

.cap-card:hover,
.project-card:hover,
.service-card:hover,
.credential-card:hover,
.update-card:hover {
  border-color: rgba(178, 65, 60, 0.5);
  box-shadow: 0 18px 40px rgba(20, 27, 40, 0.12);
}

.project-card img,
.service-card img,
.signature-image img,
.framed-image img,
.team-card img,
.gallery img {
  filter: saturate(0.74) contrast(1.04);
}

img.image-fallback {
  background: var(--ground);
  object-fit: cover;
  object-position: center;
}

.project-card:hover img,
.service-card:hover img,
.gallery a:hover img {
  filter: saturate(0.92) contrast(1.03);
}

.hero-image,
.case-hero > img,
.project-media img,
.service-list figure img,
.cap-card figure img,
.leadership-grid figure img,
.updates-grid img,
.contact-panel figure img {
  filter: saturate(0.74) contrast(1.04);
}

.project-media::after,
.service-list figure::after,
.cap-card figure::after,
.contact-panel figure::after {
  background: linear-gradient(180deg, transparent 42%, rgba(20, 27, 40, 0.84));
}

.trusted-strip,
.trust-row,
.spec-strip,
.footer-bottom {
  border-color: var(--hairline);
}

/* Gauges and progress */
.gauge-track,
.progress-track,
.wizard-progress {
  background: var(--hairline);
}

.gauge-track {
  height: 3px;
}

.gauge-fill,
.progress-fill,
.wizard-progress span {
  background: var(--accent-gradient);
}

.gauges > div > i {
  height: 3px;
  background: var(--hairline);
}

.gauges em {
  background: var(--accent-gradient);
}

.wizard-progress li {
  border-color: var(--hairline);
}

.wizard-progress li.active {
  border-color: var(--accent);
}

.gauge-value,
.stat-number,
.key-number,
.stat strong {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stats-band .stat {
  border-color: rgba(255, 255, 255, 0.14);
}

.stats-band .mono-label {
  color: rgba(255, 255, 255, 0.58);
}

/* Forms and system feedback */
input,
select,
textarea,
.form-control {
  background: #fff;
  border-color: var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: #8a9099;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ground);
  outline: 2px solid #fff;
  outline-offset: 0;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.has-error input,
.has-error select,
.has-error textarea {
  background: var(--error-bg);
  border-color: var(--accent);
}

.qf-field input,
.qf-field select,
.qf-field textarea,
.lookup-form input {
  background: #fff;
  border-color: var(--hairline);
}

.qf-field input:focus,
.qf-field select:focus,
.qf-field textarea:focus,
.lookup-form input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ground);
  outline: 2px solid #fff;
}

.qf-field.invalid input,
.qf-field.invalid select,
.qf-field.invalid textarea {
  background: var(--error-bg);
  border-color: var(--accent);
}

input:not([type="checkbox"]):not([type="radio"]):valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  background: var(--success-bg);
  border-color: #b8d6c5;
}

.form-feedback,
.success-state,
.quote-success {
  background: var(--success-bg);
  border: 1px solid #b8d6c5;
  color: #205f47;
}

.form-success,
.verification-banner,
.verified-stamp,
.lookup-result.ok {
  background: var(--success-bg);
  border-color: #b8d6c5;
  color: #205f47;
}

.qf-status.err,
.lookup-result.err {
  background: var(--error-bg);
  border-color: #e6b8b4;
  color: #8f322f;
}

.form-feedback i,
.success-state i,
.quote-success i {
  color: var(--success);
}

.is-sending,
.sending-state {
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.is-sending::before,
.sending-state::before {
  border: 2px solid rgba(178, 65, 60, 0.22);
  border-top-color: var(--accent);
}

.btn.is-sending {
  background: #fff;
  border-color: var(--hairline);
  box-shadow: none;
  color: var(--ink);
}

.btn.is-sending::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(178, 65, 60, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dgb-brand-spin 0.8s linear infinite;
}

.btn.is-sending::after {
  display: none;
}

@keyframes dgb-brand-spin {
  to { transform: rotate(360deg); }
}

.service-list h2,
.sig-card h2,
.contact-panel h2,
.enquiry-card h2 {
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 700;
  line-height: 1;
}

/* Calls to action and footer */
.cta-band {
  border: 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13);
}

.cta-band .section-title,
.cta-band h2,
.cta-band p {
  color: #fff;
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer a:hover,
.footer-title,
.site-footer .section-eyebrow {
  color: #fff;
}

.site-footer .logo-text {
  color: #fff;
}

.site-footer .logo-text small {
  color: rgba(255, 255, 255, 0.56);
}

.action-dock a,
.mobile-cta .btn-red {
  background: var(--accent-gradient);
}

.floating-dock a,
.mobile-cta a {
  border-radius: var(--radius);
}

/* WordPress-generated controls */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: var(--radius) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent-gradient) !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  body {
    font-size: 16px;
  }

  .section-title,
  .page-hero h1,
  .hero h1 {
    font-size: clamp(44px, 11vw, 58px);
  }

  .navbar {
    background: var(--ground);
  }
}

@media (max-width: 600px) {
  .section {
    padding-block: 68px;
  }

  .section-title,
  .page-hero h1,
  .hero h1 {
    font-size: clamp(40px, 12vw, 50px);
  }

  h2,
  .h2 {
    font-size: 34px;
  }

  .announce-right > a {
    display: none;
  }

  .lang a {
    padding-inline: 6px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .project-card,
  .service-card,
  .credential-card,
  .update-card,
  .project-card img,
  .service-card img,
  .gallery img {
    transition: none !important;
  }
}