/* ASAMSO V89 — clean header plus unified black translucent croquis watermarks */

@font-face {
  font-family: "ASAMSO Hand V87";
  src: url("assets/fonts/Rakkas-Regular-v87.woff") format("woff"),
       url("assets/fonts/Rakkas-Regular-v87.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ASAMSO Ruqaa Ink";
  src: url("assets/fonts/Rakkas-Regular-v87.woff") format("woff"),
       url("assets/fonts/Rakkas-Regular-v87.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.signature-seo-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-office-signature-art {
  display: block !important;
  width: min(100%, 1051px) !important;
  height: auto !important;
  max-height: 100px !important;
  margin-inline: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .32));
}

html[lang="ar"] body.official-dark-site .site-header.asamso-header .official-brand .brand-office-signature-art {
  display: block !important;
  width: min(100%, 430px) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  height: auto !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  object-fit: contain !important;
  object-position: center right !important;
}

@media screen {
  html[lang="ar"] body.official-dark-site .site-header.asamso-header .brand-office-name strong {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-family: "ASAMSO Hand V87", "ASAMSO Ruqaa Ink", "Damascus", "Geeza Pro", "Al Bayan", serif !important;
    font-weight: 400 !important;
    font-synthesis: none;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    letter-spacing: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-font-smoothing: antialiased;
  }

  body.official-dark-site .section {
    padding-block: clamp(48px, 5.2vw, 68px) !important;
  }

  body.official-dark-site .section-heading,
  body.official-dark-site .official-heading {
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  body.official-dark-site .official-hero {
    min-height: clamp(570px, calc(100svh - var(--asamso-header-h, 96px)), 700px) !important;
    height: auto !important;
  }

  body.official-dark-site .official-hero .hero-content {
    padding-top: clamp(32px, 4vw, 52px) !important;
    padding-bottom: clamp(32px, 4vw, 52px) !important;
  }

  body.official-dark-site .official-hero h1 {
    max-width: min(940px, 100%) !important;
    margin: 0 auto 17px !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  html[lang="ar"] body.official-dark-site .official-hero .hero-office-signature {
    display: block;
    font-family: "ASAMSO Hand V87", "ASAMSO Ruqaa Ink", "Damascus", "Geeza Pro", "Al Bayan", serif !important;
    font-size: clamp(31px, 3.55vw, 48px) !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    color: #ffffff !important;
    font-synthesis: none;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .36);
  }

  body.official-dark-site .official-hero h1 strong {
    display: block;
    margin-top: 3px;
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: clamp(33px, 3.85vw, 52px) !important;
    line-height: 1.12 !important;
  }

  body.official-dark-site .official-hero-intro {
    font-size: 18px !important;
    line-height: 1.85 !important;
  }

  body.official-dark-site .official-since {
    margin-bottom: 12px !important;
    padding: 6px 11px !important;
  }

  body.official-dark-site .hero-actions {
    gap: 10px !important;
    margin: 20px 0 !important;
  }

  body.official-dark-site .btn {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }

  body.official-dark-site .official-facts {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  body.official-dark-site .official-facts div {
    padding: 12px 14px !important;
  }

  body.official-dark-site .official-service-grid {
    gap: 13px !important;
  }

  body.official-dark-site .official-service-card {
    min-height: 0 !important;
    padding: 22px !important;
  }

  body.official-dark-site .official-service-card h3 {
    margin: 14px 0 7px !important;
  }

  body.official-dark-site .official-service-card a {
    margin-top: 12px !important;
  }

  .gallery-heading-clean {
    margin-bottom: 20px !important;
  }

  .visual-gallery-grid {
    gap: 11px !important;
  }

  .survey-lab-badges {
    margin-bottom: 12px !important;
  }

  .official-tool-notice {
    margin-bottom: 12px !important;
    padding: 13px 15px !important;
  }

  .survey-tools-hub {
    padding: 18px !important;
  }

  .survey-tools-hub__head {
    gap: 16px !important;
    margin-bottom: 14px !important;
  }

  .survey-tool-grid {
    gap: 8px !important;
  }

  .survey-tool-card {
    min-height: 76px !important;
    padding: 10px !important;
  }

  .survey-tool-card__icon {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .survey-tools-hub .professional-tools-note {
    margin-top: 10px !important;
    padding: 10px 12px !important;
  }

  .calc-shell .calc-panel:not(#panel-parcel) {
    padding: 18px !important;
  }

  .customer-sketch-intro {
    margin-bottom: 12px !important;
    padding: 13px 15px !important;
  }

  .customer-sketch-form {
    gap: 10px !important;
  }

  .sketch-step-card {
    padding: 14px !important;
  }

  #panel-parcel .customer-sketch-workspace {
    gap: 14px !important;
  }

  #panel-parcel .customer-sketch-output > .precise-location-card {
    margin-block: 12px 16px !important;
  }

  .compact-coverage-section .cad-map-stage {
    height: clamp(480px, 60svh, 590px) !important;
    min-height: 460px !important;
  }

  body.official-dark-site .internal-main {
    padding-top: calc(var(--asamso-header-h, 96px) + 24px) !important;
  }

  body.official-dark-site .internal-hero-grid {
    gap: 24px !important;
  }

  body.official-dark-site .site-footer {
    padding-top: 38px !important;
  }

  body.official-dark-site .official-footer-grid {
    gap: 24px !important;
    padding-bottom: 26px !important;
  }

  #panel-parcel .professional-sheet-card {
    border: 1px solid rgba(247, 183, 24, .34) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #172129, #0c1217) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  }

  #panel-parcel .professional-sheet-wrap {
    border: 1px solid #8ea0a8 !important;
    border-radius: 14px !important;
    background: #f8fbfc !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 0 0 5px rgba(255, 255, 255, .72) !important;
  }

  #conceptPlot.v83-premium-croquis {
    text-rendering: optimizeLegibility;
    shape-rendering: geometricPrecision;
  }

  #conceptPlot.v83-premium-croquis [data-v85-room-symbol] {
    filter: drop-shadow(0 5px 8px rgba(65, 43, 0, .22));
  }
}

@media screen and (max-width: 820px) {
  html[lang="ar"] body.official-dark-site .site-header.asamso-header .brand-office-name strong {
    font-size: clamp(12.5px, 3.4vw, 14.5px) !important;
    line-height: 1.18 !important;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body.official-dark-site .container {
    width: min(100% - 20px, 1220px) !important;
  }

  body.official-dark-site .section {
    padding-block: 40px !important;
  }

  body.official-dark-site h2 {
    font-size: clamp(29px, 8.6vw, 42px) !important;
    line-height: 1.2 !important;
  }

  body.official-dark-site .section-heading,
  body.official-dark-site .official-heading {
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  body.official-dark-site .section-heading > p,
  body.official-dark-site .official-heading > p {
    margin-top: 8px !important;
  }

  body.official-dark-site .official-hero {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  body.official-dark-site .official-hero .hero-content {
    width: calc(100% - 20px) !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }

  body.official-dark-site .official-hero .hero-content > * {
    max-width: 100% !important;
  }

  body.official-dark-site .official-hero h1 {
    margin-bottom: 13px !important;
    font-size: clamp(22px, 6vw, 29px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  html[lang="ar"] body.official-dark-site .official-hero .hero-office-signature {
    font-size: clamp(29px, 7.8vw, 36px) !important;
    line-height: 1.3 !important;
  }

  body.official-dark-site .official-hero h1 strong {
    margin-top: 2px;
    font-size: clamp(28px, 8vw, 37px) !important;
  }

  body.official-dark-site .official-hero-intro {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
  }

  body.official-dark-site .official-since {
    margin-bottom: 10px !important;
    font-size: 12px !important;
  }

  body.official-dark-site .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 16px 0 !important;
  }

  body.official-dark-site .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
  }

  body.official-dark-site .official-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 14px !important;
  }

  body.official-dark-site .official-facts div {
    min-width: 0 !important;
    padding: 9px 7px !important;
    text-align: center;
  }

  body.official-dark-site .official-facts span {
    font-size: 9.5px !important;
    line-height: 1.45 !important;
  }

  body.official-dark-site .official-facts b {
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }

  body.official-dark-site .official-service-card {
    padding: 18px !important;
  }

  .equipment-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .equipment-gallery-grid .visual-gallery-item,
  .equipment-gallery-grid .visual-gallery-item--wide,
  .equipment-gallery-grid .visual-gallery-item--portrait {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  .equipment-gallery-grid .visual-gallery-item--wide {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 8 !important;
  }

  .equipment-gallery-grid .visual-gallery-item--portrait {
    aspect-ratio: 4 / 5 !important;
  }

  .equipment-gallery-grid .visual-gallery-item--portrait img {
    object-fit: contain !important;
  }

  .survey-lab-badges {
    gap: 6px !important;
  }

  .survey-lab-badges span {
    padding: 7px 9px !important;
    font-size: 10px !important;
  }

  .survey-tools-hub {
    padding: 13px !important;
  }

  .survey-tools-hub__head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .survey-tools-hub__head h3 {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  .survey-tools-select select {
    min-height: 46px !important;
  }

  .survey-tool-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .survey-tool-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 8px !important;
    gap: 8px !important;
    scroll-snap-align: none !important;
  }

  .survey-tool-card__icon {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .survey-tool-card__copy {
    gap: 2px !important;
  }

  .survey-tool-card__copy b {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .survey-tool-card__copy small {
    min-height: 0 !important;
    font-size: 8.8px !important;
    line-height: 1.35 !important;
  }

  .survey-tools-hub .professional-tools-note {
    display: grid !important;
    gap: 4px !important;
    margin-top: 9px !important;
  }

  .survey-tools-hub .professional-tools-note span {
    white-space: normal !important;
  }

  .calc-shell,
  .calc-panel,
  .tool-card,
  .calc-results,
  .map-shell,
  .geocad-map-card,
  .concept-input-card,
  .concept-output-card,
  .geo-map-stage-card,
  .customer-sketch-form,
  .customer-sketch-output,
  .precise-location-card,
  .precise-map-column,
  .precise-location-controls,
  .dxf-gis-controls,
  .dxf-gis-results {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .calc-shell {
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .calc-shell .calc-panel:not(#panel-parcel) {
    padding: 12px !important;
  }

  #calculator > .container {
    width: calc(100% - 14px) !important;
  }

  .calc-grid,
  .concept-layout,
  .geocad-workspace,
  .geo-map-layout,
  .geo-results-layout,
  .dxf-gis-layout,
  .cogo-grid,
  .point-pair-grid,
  .earthwork-layout,
  .helmert-layout,
  .precise-location-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .field,
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-width: 0;
  }

  .inline-actions,
  .drawing-toolbar,
  .geo-map-toolbar,
  .cad-map-actions {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap !important;
  }

  .inline-actions > *,
  .drawing-toolbar > * {
    min-width: 0;
  }

  .tool-table-wrap,
  .points-table-wrap,
  .concept-svg-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .tool-table,
  .points-table {
    width: max-content;
    min-width: 100%;
  }

  #polygonPlot,
  #traversePlot,
  #levelPlot,
  #earthworkPlot,
  .calc-panel svg[role="img"] {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .geo-parcel-map {
    height: 390px !important;
    min-height: 340px !important;
  }

  .precise-land-map,
  #panel-parcel .customer-sketch-output > .precise-location-card .precise-land-map {
    height: 340px !important;
    min-height: 340px !important;
  }

  .compact-coverage-section .cad-map-stage,
  .official-dark-site .reference-coverage-layout .cad-cinematic-v34 .cad-map-stage {
    height: clamp(360px, 58svh, 440px) !important;
    min-height: 360px !important;
  }

  .official-dark-site .reference-coverage-layout .cad-cinematic-v34 .cad-map-topbar {
    min-height: 0 !important;
    height: auto !important;
  }

  .assistant-panel {
    max-width: calc(100vw - 16px) !important;
    overflow: auto !important;
  }

  body.official-dark-site .internal-main {
    padding-top: calc(var(--asamso-header-h, 90px) + 18px) !important;
  }

  body.official-dark-site .internal-hero-grid {
    gap: 18px !important;
  }

  body.official-dark-site .internal-copy p {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 520px) {
  html[lang="ar"] body.official-dark-site .site-header.asamso-header .brand-office-name strong {
    font-size: clamp(11.5px, 3.25vw, 13.5px) !important;
    line-height: 1.16 !important;
  }

  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  body.official-dark-site .container {
    width: calc(100% - 14px) !important;
  }

  body.official-dark-site .section {
    padding-block: 32px !important;
  }

  body.official-dark-site .section-heading,
  body.official-dark-site .official-heading {
    margin-bottom: 18px !important;
  }

  body.official-dark-site .kicker {
    margin-bottom: 7px !important;
  }

  body.official-dark-site .official-hero .hero-content {
    padding-top: 22px !important;
    padding-bottom: 24px !important;
  }

  body.official-dark-site .official-hero h1 {
    font-size: clamp(21px, 5.9vw, 27px) !important;
  }

  html[lang="ar"] body.official-dark-site .official-hero .hero-office-signature {
    font-size: clamp(28px, 7.7vw, 34px) !important;
  }

  body.official-dark-site .official-hero h1 strong {
    font-size: clamp(27px, 7.7vw, 35px) !important;
  }

  body.official-dark-site .hero-actions {
    margin: 13px 0 !important;
  }

  body.official-dark-site .official-facts {
    margin-top: 11px !important;
  }

  body.official-dark-site .official-service-grid {
    gap: 9px !important;
  }

  body.official-dark-site .official-service-card {
    padding: 15px !important;
    border-radius: 15px !important;
  }

  body.official-dark-site .official-service-card > span {
    width: 36px !important;
    height: 36px !important;
  }

  body.official-dark-site .official-service-card h3 {
    margin: 10px 0 5px !important;
    font-size: 19px !important;
  }

  body.official-dark-site .official-service-card p {
    font-size: 13.5px !important;
    line-height: 1.75 !important;
  }

  .survey-tools-hub {
    padding: 10px !important;
  }

  .survey-tool-card {
    min-height: 64px !important;
  }

  .survey-tool-card__copy small {
    font-size: 8.2px !important;
  }

  .official-tool-notice {
    padding: 10px 12px !important;
  }

  .calc-shell .calc-panel:not(#panel-parcel) {
    padding: 9px !important;
  }

  #calculator > .container {
    width: calc(100% - 8px) !important;
  }

  .calc-panel,
  .tool-card,
  .calc-results,
  .geo-map-stage-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .form-row,
  .concept-fields,
  .manual-coordinate-fields,
  .project-meta-grid,
  .result-grid,
  .concept-results,
  .area-only-results,
  .slope-results,
  .earthwork-summary-grid,
  .geo-summary-grid,
  .dxf-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .inline-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .inline-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }

  .drawing-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .drawing-toolbar > * {
    width: 100% !important;
  }

  .points-table-wrap {
    max-height: 360px;
  }

  .tool-table,
  .points-table {
    min-width: 610px;
  }

  .geo-parcel-map {
    height: 330px !important;
    min-height: 300px !important;
  }

  .precise-land-map,
  #panel-parcel .customer-sketch-output > .precise-location-card .precise-land-map {
    height: 300px !important;
    min-height: 300px !important;
  }

  .mobile-action-dock {
    right: 5px !important;
    left: 5px !important;
    bottom: max(5px, env(safe-area-inset-bottom)) !important;
    padding: 5px !important;
    border-radius: 14px !important;
  }

  .mobile-action-dock a {
    min-height: 50px !important;
  }

  .smart-contact-assistant {
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }

  .assistant-panel {
    max-height: calc(100dvh - var(--asamso-header-h, 90px) - 138px - env(safe-area-inset-bottom)) !important;
  }

  body.official-dark-site .site-footer {
    padding-top: 30px !important;
  }

  body.official-dark-site .official-footer-grid {
    gap: 18px !important;
    padding-bottom: 20px !important;
  }
}

@media screen and (max-width: 360px) {
  html[lang="ar"] body.official-dark-site .site-header.asamso-header .brand-office-name strong {
    font-size: 11px !important;
    line-height: 1.14 !important;
  }

  body.official-dark-site .official-hero .hero-content {
    width: calc(100% - 14px) !important;
  }

  body.official-dark-site .official-hero h1 {
    font-size: 21px !important;
  }

  html[lang="ar"] body.official-dark-site .official-hero .hero-office-signature {
    font-size: 26px !important;
  }

  body.official-dark-site .official-hero h1 strong {
    font-size: 27px !important;
  }

  body.official-dark-site .official-hero-intro {
    font-size: 14.5px !important;
  }

  .survey-tool-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .survey-tool-card__copy small {
    font-size: 9px !important;
  }

  .equipment-gallery-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .equipment-gallery-grid .visual-gallery-item--wide {
    grid-column: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
}

@supports not (overflow: clip) {
  @media screen and (max-width: 820px) {
    html,
    body {
      overflow-x: hidden;
    }
  }
}

@media print {
  body.official-dark-site .section {
    padding-block: 0 !important;
  }

  #panel-parcel .professional-sheet-card,
  #panel-parcel .professional-sheet-wrap {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}