/*
 * OASN FrontEnd - project-specific style overrides.
 *
 * This file is loaded AFTER the Dewi template stylesheet (~/assets/css/main.css),
 * so rules placed here can customise the template without editing it directly.
 *
 * The default ASP.NET Core scaffold rules that used to live here (html font-size,
 * body margin-bottom, etc.) were removed because they changed Dewi's original
 * typography and spacing.
 */

/*--------------------------------------------------------------
# Shared header / navbar
#
# Constant background: Dewi's own darkest scrolled state is
#   .scrolled .header { --background-color: rgba(21, 34, 43, 0.85);
#                       box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1); }
# (assets/css/main.css, "Global Header on Scroll"). The same values are
# applied here to .header at every scroll position, so entering or leaving
# the .scrolled state no longer changes the header. The .scrolled class and
# its JS are kept untouched. The alpha lives only in the background colour,
# so text and buttons stay fully opaque.
--------------------------------------------------------------*/
.header {
  --background-color: rgba(21, 34, 43, 0.85);
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Stacked text branding: OASN / Solutions */
.header .oasn-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.header .oasn-brand-name {
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--heading-color);
}

.header .oasn-brand-sub {
  margin-top: 3px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--nav-color);
}

/* Logo image (original OASNLogo.jpg, unmodified) in a subtle glass frame - CSS only.
   The Home link keeps the former 46px layout height of the text branding; the frame is centred
   on it and uses part of the header padding, so the navbar height does not change. */
.header .oasn-brand {
  height: 46px;
}

.header .oasn-logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 0;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 7px;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.22),
    0 0 8px rgba(255, 255, 255, 0.12);
}

.header .logo .oasn-logo-img {
  display: block;
  width: 140px;
  height: auto;
  max-height: 64px;
  margin: 0;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .header .logo .oasn-logo-img {
    width: 110px;
    max-height: 56px;
  }
}

/* Compact desktop navigation (Dewi default: 13px / 500, 14px item padding) */
@media (min-width: 1200px) {
  .navmenu > ul > li {
    padding: 15px 11px;
  }

  .navmenu a,
  .navmenu a:focus {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  .header .cta-btn,
  .header .cta-btn:focus {
    margin-left: 24px;
  }
}

/*--------------------------------------------------------------
# Home - Hero
# The background image is Dewi's absolutely positioned <img> (object-fit: cover,
# dark overlay from .hero:before). Only focal point, wrapping and subtitle weight
# are adjusted here.
--------------------------------------------------------------*/
.hero .hero-bg {
  object-position: center center;
}

.hero h2 {
  text-align: center;
  overflow-wrap: break-word;
}

.hero .hero-subtitle {
  font-weight: 700;
  text-align: center;
}

@media (max-width: 575.98px) {
  .hero h2 {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Home - Mission & Vision tabs (scoped to .mission-vision)
# Adapted from Dewi's .features tabs; uses Dewi's colour variables.
#
# Sizing reproduces the original OASN design proportions. Values scale
# with the viewport (vw) and are capped at the reference sizes, which
# are reached on a ~1710px-wide viewport:
#   container 1470px | tab group 725px (2 x ~350px, 26px gap)
#   tab height 90px  | icon 44px | tab label 21px | text 29px
--------------------------------------------------------------*/
.mission-vision .mv-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.5vw, 26px);
  width: 100%;
  max-width: 725px;
  margin-bottom: clamp(20px, 2vw, 34px);
  border: 0;
}

.mission-vision .mv-tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
}

.mission-vision .mv-tabs .nav-link {
  width: 100%;
  min-height: clamp(60px, 5.3vw, 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 20px);
  padding: 10px clamp(12px, 1.4vw, 24px);
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 0;
  background-color: var(--surface-color);
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(15px, 1.2vw, 21px);
  font-weight: 600;
  white-space: nowrap;
  transition: 0.3s;
}

/* Image tab icons (mission.jpeg / vission.jpeg). The source images are square
   with a very light grey background, so they sit in a white circular backing
   that clips that square and keeps contrast on the orange active tab. */
.mission-vision .mv-tabs .mv-tab-icon {
  flex: 0 0 auto;
  width: clamp(38px, 3.4vw, 58px);
  height: clamp(38px, 3.4vw, 58px);
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 88%);
}

.mission-vision .mv-tabs .mv-tab-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The artwork fills only ~50% of the square source; enlarge it uniformly
     so the circle clips the empty margin (aspect ratio unchanged). */
  transform: scale(1.6);
}

.mission-vision .mv-tabs .nav-link:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.mission-vision .mv-tabs .nav-link.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.mission-vision .mv-tabs .nav-link.active .mv-tab-icon {
  box-shadow: none;
}

.mission-vision .mv-tabs .nav-link:focus-visible {
  outline: 2px solid var(--heading-color);
  outline-offset: 2px;
}

.mission-vision .mv-text {
  font-family: var(--heading-font);
  font-size: clamp(19px, 1.6vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--heading-color);
  margin: 0;
}

.mission-vision .mv-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Desktop: reference container width and 46% / 5% / 49% columns */
@media (min-width: 992px) {
  .mission-vision .mv-container {
    width: min(1470px, calc(100% - 48px), 86%);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .mission-vision .mv-tabs {
    width: 49%;
  }

  .mission-vision .mv-row {
    --bs-gutter-x: 0;
    justify-content: space-between;
    align-items: flex-start;
  }

  .mission-vision .mv-col-text {
    width: 46%;
  }

  .mission-vision .mv-col-img {
    width: 49%;
  }
}

/*--------------------------------------------------------------
# Shared footer - copyright bar only
--------------------------------------------------------------*/
.footer .copyright {
  padding: 22px 0;
  border-top: 0;
}

.footer .copyright p {
  font-size: 14px;
  line-height: 1.5;
}

/*--------------------------------------------------------------
# Services page - non-clickable service titles
# Items 2-4 use <span class="title-text"> instead of a link; give it the
# same colour and hover colour Dewi applies to ".services-2 .service-item .title a".
--------------------------------------------------------------*/
.services-2 .service-item .title .title-text {
  color: var(--heading-color);
  transition: 0.3s;
}

.services-2 .service-item:hover .title .title-text {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# About page
--------------------------------------------------------------*/
.about .about-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Phase 9E: About video = real thumbnail of About.VideoURL. YouTube's hqdefault image is 4:3
   with letterbox bars, so it is cropped to 16:9. The neutral placeholder (Vimeo, or a thumbnail
   that fails to load) has the same box so the Play button stays centred. */
.about .about-video-thumb,
.about .about-video-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.about .about-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--heading-color), transparent 10%), color-mix(in srgb, var(--accent-color), #000 45%));
  color: rgba(255, 255, 255, 0.25);
  font-size: 64px;
}

.about .about-video-placeholder[hidden] {
  display: none;
}

/*--------------------------------------------------------------
# Phase 9D: inner pages no longer have the Dewi page-title cover.
# The header is position: fixed (86-88px tall), so every page except the
# homepage (body.index-page, whose hero sits under the header) is pushed
# below it. The first section keeps its own 60px top padding.
--------------------------------------------------------------*/
:root {
  --oasn-header-offset: 88px;
}

body:not(.index-page) .main {
  padding-top: var(--oasn-header-offset);
}

/* Anchor links (e.g. /Home/Team#articles) must not land under the fixed header. */
body:not(.index-page) .main section[id] {
  scroll-margin-top: var(--oasn-header-offset);
}

/*--------------------------------------------------------------
# Phase 9D: Company -> Articles category filter (Dewi .portfolio-filters look)
# and article cards that open the article profile.
--------------------------------------------------------------*/
.articles .portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin-bottom: 30px;
}

/* The <li> keeps Dewi's styling (color, hover, .filter-active orange); the button inside
   is visually neutral but keyboard-focusable. */
.articles .portfolio-filters li button {
  all: unset;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  padding: 2px 0;
}

.articles .portfolio-filters li button:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 2px;
}

.articles .portfolio-content .portfolio-info h4 a {
  color: inherit;
}

/* Phase 9E: article cards have no zoom/lightbox icon; the details icon stays above the
   card-wide article link (both open ArticleDetails in the same tab). */
.articles .portfolio-content .portfolio-info .details-link {
  z-index: 3;
}

/* Article profile (/articles/{id}) - reuses .platform-details; only the title is new. */
.article-details .article-details-title {
  font-size: 26px;
  font-weight: 700;
  margin: 4px 0 18px;
  overflow-wrap: break-word;
}

.article-details .article-back-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
}

/* Sanitized rich text: tables from legacy articles. */
.platform-details-long table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 14px;
}

.platform-details-long th,
.platform-details-long td {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}

/* Rich-text images (uploaded through the admin editor) never overflow their column. */
.platform-details-long img,
.about-lead img {
  max-width: 100%;
  height: auto;
}

.platform-details-long figure {
  margin: 0 0 16px;
}

.platform-details-long figcaption {
  font-size: 13px;
  opacity: 0.75;
}

.platform-details-long ul,
.platform-details-long ol {
  padding-left: 1.4em;
  margin-bottom: 12px;
}

/* Phase 9B hotfix: LEFT = Description as large bold lead text (then the image),
   RIGHT = Headline as regular paragraph text (then the video). */
.about .about-lead,
.about .about-lead p,
.about .about-lead span,
.about .about-lead strong {
  font-family: var(--heading-font);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
  overflow-wrap: break-word;
}

.about .about-lead {
  margin-bottom: 20px;
}

.about .about-lead p:last-child {
  margin-bottom: 0;
}

.about .about-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: break-word;
}

/*--------------------------------------------------------------
# Platforms page - compact responsive card grid (scoped to .platforms)
# White card, orange outline, orange title, white circular badge with an
# orange ring. Sized so two rows of three fit in about the area one row
# of the previous large cards used.
#   Cards: width 100%, max-width 395px, min-height 240px
#   Badge: 72px circle (image 54px), overlapping the top edge by 36px
#   Grid:  3 columns >= 992px | 2 columns 576-991px | 1 column < 576px
#          gap 60px (rows; ~24px clear above the next row's badge) x 20px
--------------------------------------------------------------*/
.platforms .platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 20px;
  justify-items: center;
  align-items: stretch;
  padding-top: 36px; /* room for the first row's overlapping badges */
}

.platforms .platform-card {
  position: relative;
  width: 100%;
  max-width: 395px;
  min-height: 240px;
  padding: 48px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--surface-color);
  border: 2px solid var(--accent-color);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platforms .platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.platforms .platform-badge {
  position: absolute;
  top: -36px;
  left: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  background-color: var(--surface-color);
}

.platforms .platform-badge img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.platforms .platform-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.platforms .platform-title a {
  color: var(--accent-color);
}

.platforms .platform-title a:focus-visible {
  outline: 2px solid var(--heading-color);
  outline-offset: 2px;
}

.platforms .platform-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
  .platforms .platforms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .platforms .platforms-grid {
    grid-template-columns: 1fr;
  }

  .platforms .platform-card {
    min-height: 0;
  }
}

/* Empty / unavailable states of the Platforms listing (no cards rendered). */
.platforms .platforms-state {
  max-width: 520px;
  margin: 0 auto;
  padding: 36px 24px;
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent-color), transparent 50%);
  border-radius: 10px;
  background-color: var(--surface-color);
}

.platforms .platforms-state i {
  font-size: 36px;
  color: var(--accent-color);
}

.platforms .platforms-state p {
  margin: 10px 0 0;
  font-size: 16px;
}

.platforms .platforms-state a {
  display: inline-block;
  margin-top: 12px;
  font-weight: 500;
}

/*--------------------------------------------------------------
# Platform profile (ServiceDetails/{id}) - scoped to .platform-details
# Left 5/12 (~40%): name, metadata, short description, buttons.
# Right 7/12 (~60%): image, long description, related links.
--------------------------------------------------------------*/
.platform-details .platform-details-name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 18px;
}

.platform-details .platform-meta {
  margin: 0 0 18px;
  font-size: 15px;
}

.platform-details .platform-meta-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 6px;
  margin-bottom: 8px;
}

.platform-details .platform-meta dt {
  font-weight: 700;
  color: var(--heading-color);
}

.platform-details .platform-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.platform-details .platform-details-short {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.platform-details .platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-details .platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 4px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: 0.3s;
}

.platform-details .platform-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.platform-details .platform-details-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  margin-bottom: 22px;
}

/* Neutral placeholder when the API returns no public image URL. */
.platform-details .platform-image-missing {
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border: 1px dashed color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 6px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
}

.platform-details .platform-image-missing i {
  font-size: 40px;
  line-height: 1;
}

.platform-details .platform-details-topic {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.platform-details .platform-details-long {
  font-size: 15px;
  line-height: 1.7;
  text-align: justify;
  overflow-wrap: break-word;
}

.platform-details .platform-details-long p {
  margin-bottom: 10px;
}

.platform-details .platform-details-long strong {
  color: var(--heading-color);
}

.platform-details .platform-links {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
}

.platform-details .platform-links a {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .platform-details .platform-details-long {
    text-align: left;
  }
}

/*--------------------------------------------------------------
# Company page - Team (scoped to .company-team)
# Circular 160px photos with a 3px accent ring; info card below the photo.
--------------------------------------------------------------*/
.company-team .member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.company-team .member .pic {
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
  margin: 0 0 -24px;
  border-radius: 50%;
  border: 3px solid var(--accent-color);
  overflow: hidden;
  background-color: var(--surface-color);
  position: relative;
  z-index: 1;
}

.company-team .member .pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Neutral placeholder when a member has no uploaded photo (same 160px ring). */
.company-team .member .pic.pic-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
}

.company-team .member .pic.pic-missing i {
  font-size: 84px;
  line-height: 1;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

/* Empty / unavailable states of the Team section (API data). */
.company-team .team-state {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent-color), transparent 50%);
  border-radius: 10px;
  background-color: var(--surface-color);
}

.company-team .team-state i {
  font-size: 36px;
  color: var(--accent-color);
}

.company-team .team-state p {
  margin: 10px 0 0;
}

/* Equal-height info panel: it fills the rest of the column (Bootstrap row columns stretch to the
   tallest card in the row, .member is height: 100%). Inside, a flex column with three fixed areas:
   name (top), job title (grows, at least one line reserved), social icons (pinned to the bottom,
   fixed height reserved even when there are no links). */
.company-team .member .member-info {
  position: static;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 150px;
  padding: 30px 18px 18px;
}

/* Name area: two lines are reserved and the name sits at the bottom of it, so the underline and
   the job title start at the same height whether the name takes one or two lines. Longer names
   still wrap (never clipped); the card then grows and the row's cards grow with it. */
.company-team .member h4 {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.3;
  min-height: calc(2.6em + 10px);   /* 2 lines + Dewi's 10px padding above the underline */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.company-team .member .member-role {
  flex: 1 0 auto;
  min-height: 1.5em;          /* one title line is reserved even when the title is empty */
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.company-team .member .member-role:empty {
  visibility: hidden;
}

/* Center Dewi's short rule under the name */
.company-team .member h4::after {
  left: 50%;
  margin-left: -25px;
}

.company-team .member .social {
  position: static;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 26px;           /* icon row height, kept when the member has no links */
  margin-top: 10px;
  line-height: 1;
}

/*--------------------------------------------------------------
# Company page - Articles (Dewi .portfolio gallery, scoped to .articles)
--------------------------------------------------------------*/
.articles .portfolio-content img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Article cards: only Dewi's details icon remains (main.css positions); the zoom icon was removed in Phase 9E. */

/*--------------------------------------------------------------
# Company page - Contact (Dewi .contact info cards + project form)
# The form uses .oasn-contact-form (not Dewi's .php-email-form, whose
# script would post it); the rules below mirror Dewi's form styling.
--------------------------------------------------------------*/
.company-contact .contact-cards .info-item {
  height: 100%;
  min-height: 190px;
  padding: 24px 12px;
  text-align: center;
}

.company-contact .info-item p + p {
  margin-top: 2px;
}

.company-contact .info-item .contact-accent,
.company-contact .info-item a {
  color: var(--accent-color);
  overflow-wrap: anywhere;
}

.company-contact .info-item a.contact-phone {
  color: var(--default-color);
}

.company-contact .info-item a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.company-contact .oasn-contact-form {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 30px;
}

.company-contact .oasn-contact-form .form-control {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.company-contact .oasn-contact-form .form-control:focus {
  border-color: var(--accent-color);
}

.company-contact .oasn-contact-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.company-contact .oasn-contact-form.was-validated .form-control:invalid {
  border-color: var(--bs-form-invalid-border-color);
}

.company-contact .oasn-contact-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.company-contact .oasn-contact-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.company-contact .oasn-contact-form button[type=submit]:disabled {
  cursor: wait;
  opacity: 0.75;
}

.company-contact .oasn-contact-form .contact-spinner {
  width: 1em;
  height: 1em;
  margin-right: 8px;
  vertical-align: -0.15em;
  border-width: 0.15em;
}

/* Honeypot: off-screen (not display:none, which some bots detect), never focusable. */
.company-contact .oasn-contact-form .contact-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.company-contact .contact-form-status {
  margin-bottom: 16px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--bs-warning-text-emphasis);
  background-color: var(--bs-warning-bg-subtle);
}

.company-contact .contact-form-status.is-success {
  color: var(--bs-success-text-emphasis);
  background-color: var(--bs-success-bg-subtle);
}

.company-contact .contact-form-status.is-error {
  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
}

@media (max-width: 575px) {
  .company-contact .oasn-contact-form {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Database-driven content (Phase 8F): shared empty / unavailable
# state, uploaded service icons, article image placeholder, map link.
--------------------------------------------------------------*/
.content-state {
  max-width: 520px;
  margin: 0 auto 24px;
  padding: 28px 24px;
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent-color), transparent 50%);
  border-radius: 10px;
  background-color: var(--surface-color);
}

.content-state i {
  font-size: 34px;
  color: var(--accent-color);
}

.content-state p {
  margin: 10px 0 0;
}

/* Uploaded service icon image: same footprint as Dewi's 36px font icon. */
.services-2 .service-item .service-icon-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  line-height: normal;
}

/* Article without image: neutral 4:3 box, same size as an article image. */
.articles .portfolio-content .article-image-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: color-mix(in srgb, var(--default-color), transparent 93%);
  color: color-mix(in srgb, var(--default-color), transparent 55%);
  font-size: 48px;
}

.company-contact .contact-map-link {
  margin-top: 6px;
  font-size: 14px;
}