/* =========================================================================
   SMD GLOBAL ENERGY SERVICES LTD — Site Stylesheet
   Palette pulled from the corporate profile: SMD red-orange, black
   type, and the light orange-white / sky-blue-white gradients used on
   the document's cover pages.

   Shape language: the logo is a sharp, pointed "M" — no curves at all.
   Structural elements (cards, frames, buttons) borrow that angularity
   via a two-corner diagonal notch, while small icons, chips and the
   floating back-to-top control stay circular. Round is reserved for
   things that are literally round (icons, dots, pills); everything
   else is cut, not curved.
   ========================================================================= */

:root{
  --orange:      #E8432B;  /* SMD brand red-orange */
  --orange-deep: #C8301C;  /* hover / on-light-bg text state */
  --orange-light:#FF8A63;  /* gradient tint */
  --sky:         #EAF6FD;  /* light blue-white section background */
  --sky-deep:    #BFE4F4;  /* deeper sky-blue for gradients / accents */
  --black:       #1B1B1B;  /* text + the one deliberately dark section */
  --white:       #FFFFFF;
  --line:        #E7EBEE;
  --muted:       #5C6670;
  --charcoal:    #2e2f30;

  --font-display: 'Host Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  /* Diagonal-cut corners (kept as CSS custom properties so any element
     can opt in with one line: clip-path: var(--notch-lg/sm)).
     Top-left and bottom-right stay sharp; the other two corners are
     cut at 45° — which is also exactly where .bracket-frame's corner
     marks live, so the two motifs line up on the same elements. */
  /*--cut-lg: 22px;*/
  /*--cut-sm: 10px;*/
  /*--notch-lg: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));*/
  /*--notch-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));*/

  --cut-lg: 22px;
  --cut-sm: 10px;
  --notch-lg: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  --notch-sm: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));

  --container-max: 1200px;
}

/* ---------- Base ---------------------------------------------------- */

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
}

.text-muted-custom{ color: var(--muted); }

a{ color: var(--orange); text-decoration: none; }
a:hover{ color: var(--orange-deep); }

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 2000;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

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

section{ position: relative; }

.section-pad{ padding: 5.5rem 0; }
@media (max-width: 767.98px){
  .section-pad{ padding: 3.5rem 0; }
}

.bg-mist{ background: var(--sky); }

/* The one intentionally dark section (footer) — used sparingly */
.bg-black{ background: var(--black); color: #d9dcdf; }
.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4{ color: var(--white); }

/* Bright brand gradient — echoes the document's orange-white / sky-blue
   cover pages. Used for hero + banded sections instead of a dark panel. */
.bg-brand-gradient{
  background: linear-gradient(120deg, #FFF3EE 0%, #FFFFFF 42%, var(--sky) 100%);
}

/* Small uppercase label style — replaces the old monospace treatment.
   Plain Inter, bold and tracked out, so it still reads as a "tag"
   without reaching for a monospace font. */
.label-tag{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Buttons --------------------------------------------------- */

.btn{
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 0;
  clip-path: var(--notch-sm);
  padding: 0.75rem 1.7rem;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-amber,
.btn-orange{
  background: var(--orange);
  border: 1px solid var(--orange);
  color: var(--white);
}
.btn-amber:hover,
.btn-orange:hover{
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-light-custom{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.55);
  color: var(--white);
}

.btn-outline-light-custom:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.8);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-charcoal-custom{
  background: transparent;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
}

.btn-outline-charcoal-custom:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.8);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-ink{
  background: transparent;
  border: 1px solid rgba(27,27,27,0.2);
  color: var(--black);
}
.btn-outline-ink:hover{
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-quote{
  background: var(--orange);
  color: var(--white) !important;
  padding: 0.55rem 1.3rem;
  font-size: 0.92rem;
}
.btn-quote:hover{ background: var(--orange-deep); transform: translateY(-1px); }
.btn-quote.is-active{ background: var(--orange-deep); }

/* ---------- Header / Nav ---------------------------------------------- */

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  padding: 0.7rem 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 8px 24px rgba(27, 27, 27, 0.08);
  border-bottom-color: var(--line);
  padding: 0.45rem 0;
}

.navbar-brand{
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.1; }
.brand-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--black);
  letter-spacing: 0.02em;
}
.brand-accent{ color: var(--orange); }
.brand-sub{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.navbar-nav .nav-link{
  color: var(--black);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.5rem 0.9rem !important;
  position: relative;
}
.navbar-nav .nav-link:hover{ color: var(--orange-deep); }
.navbar-nav .nav-link.active{ color: var(--orange-deep); font-weight: 700; }

.navbar-toggler{ border: 0; padding: 0.4rem; }
.navbar-toggler:focus{ box-shadow: none; }
.toggler-bar{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  margin: 4px 0;
}

@media (max-width: 991.98px){
  .site-header{ background: rgba(255,255,255,0.98); }
  .navbar-collapse{ padding-top: 0.75rem; }
}

/* ---------- Flowline divider (signature element) ----------------------- */

.flow-divider{
  width: 100%;
  height: 40px;
  overflow: hidden;
  background: transparent;
}
.flow-divider svg{ width: 100%; height: 100%; display: block; }
.flow-path{
  stroke: var(--orange);
  stroke-width: 2;
  stroke-dasharray: 10 12;
  opacity: 0.5;
  animation: flow-move 4.5s linear infinite;
}
.flow-joints circle{
  fill: var(--white);
  stroke: var(--orange);
  stroke-width: 2;
}

@keyframes flow-move{
  to{ stroke-dashoffset: -220; }
}
@media (prefers-reduced-motion: reduce){
  .flow-path{ animation: none; }
}

/* ---------- Hero -------------------------------------------------------- */

.hero{
  position: relative;
  padding: 9.5rem 0 6rem;
  background: linear-gradient(120deg, #FFF1EA 0%, #FFFFFF 38%, var(--sky) 78%, var(--sky-deep) 100%);
  color: var(--black);
  overflow: hidden;
}
.hero::before{
  content:"";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, rgba(255,241,234,0.86) 0%, rgba(255,255,255,0.9) 40%, rgba(191,228,244,0.55) 100%),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero .container{ position: relative; z-index: 1; }

.hero-title{
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  color: var(--black);
  line-height: 1.12;
  margin-bottom: 1.1rem;
}
.hero-title .accent{ color: var(--orange); }

.hero-lede{
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 46ch;
}

.hero-frame{
  position: relative;
  clip-path: var(--notch-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* corner-bracket schematic framing — sits on the two corners a
   notch-lg shape leaves square (top-left, bottom-right), so the
   bracket marks and the cut corners read as one system. */
.bracket-frame{ position: relative; }
.bracket-frame::before,
.bracket-frame::after{
  content:"";
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--orange);
  opacity: 0.9;
  z-index: 2;
}
.bracket-frame::before{ top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.bracket-frame::after{ bottom: -8px; right: -8px; border-left: 0; border-top: 0; }

.stat-strip{
  border-top: 1px solid var(--line);
  margin-top: 3.2rem;
  padding-top: 1.8rem;
}
.stat-item .stat-num{
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--orange-deep);
}
.stat-item .stat-label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Page banner (interior pages) -------------------------------- */

.page-banner{
  padding: 8.5rem 0 3.2rem;
  background: linear-gradient(120deg, #FFF3EE 0%, #FFFFFF 45%, var(--sky) 100%);
  color: var(--black);
}
.page-banner h1{ color: var(--black); margin-bottom: 0.6rem; }
.breadcrumb-trail{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
}
.breadcrumb-trail a{ color: var(--black); }
.breadcrumb-trail a:hover{ color: var(--orange); }

/* ---------- Section headings -------------------------------------------- */

.section-head{ max-width: 720px; }
.section-head.mx-auto{ text-align: center; }

/* Inline numeral chip — used directly inside a heading ("01  Building,
   Civil Work...") instead of a separate kicker line above it, so a
   section keeps its reference number without an eyebrow row. */
.heading-num{
  display: inline-block;
  color: var(--orange);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* ---------- Cards --------------------------------------------------------*/

.spec-card{
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  clip-path: var(--notch-lg);
  padding: 2rem 1.6rem 1.8rem;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.spec-card:hover{
  transform: translateY(-5px);
  border-color: rgba(232,67,43,0.4);
  background: #FFFCFB;
}
.spec-tag{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-deep);
  display: block;
  margin-bottom: 0.9rem;
}
.spec-icon{
  width: 52px; height: 52px;
  clip-path: var(--notch-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,67,43,0.09);
  color: var(--orange);
  font-size: 1.4rem;
  margin-bottom: 1.1rem;
}
.spec-card h3{ font-size: 1.15rem; margin-bottom: 0.6rem; }
.spec-card p{ color: var(--muted); font-size: 0.95rem; margin-bottom: 0; }
.spec-card ul{ color: var(--muted); font-size: 0.93rem; padding-left: 1.1rem; margin-bottom: 0; }
.spec-card ul li{ margin-bottom: 0.35rem; }

.value-card{
  text-align: center;
  padding: 2.2rem 1.4rem;
}
.value-icon{
  width: 64px; height: 64px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,27,27,0.06);
  color: var(--black);
  font-size: 1.6rem;
}
.value-card:nth-child(2) .value-icon{ background: rgba(232,67,43,0.1); color: var(--orange); }
.value-card:nth-child(3) .value-icon{ background: rgba(191,228,244,0.55); color: #1478A8; }

/* ---------- About preview / split sections ------------------------------ */

.media-frame{
  clip-path: var(--notch-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.media-frame img{ width: 100%; display: block; height: 100%; object-fit: cover; }

.quote-block{ position: relative; }
.quote-block::before{
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.2rem;
}

/* ---------- Mission / Vision band ---------------------------------------*/

.mv-card{
  background: var(--white);
  border: 1px solid var(--line);
  clip-path: var(--notch-lg);
  padding: 2.4rem;
  height: 100%;
}
.mv-card h3{ color: var(--black); }
.mv-card p{ color: var(--muted); margin-bottom: 0; font-size: 1.05rem; }

/* ---------- CTA band ------------------------------------------------------*/

.cta-band{
  background: var(--orange);
  color: var(--white);
  padding: 3.6rem 0;
}
.cta-band h2{ color: var(--white); margin-bottom: 0.3rem; }
.cta-band p{ color: rgba(255,255,255,0.92); margin-bottom: 0; }

/* ---------- HSE numbered list --------------------------------------------*/

.hse-list{ list-style: none; padding: 0; margin: 0; counter-reset: hse; }
.hse-list li{
  counter-increment: hse;
  position: relative;
  padding: 1rem 1.2rem 1rem 3.4rem;
  border: 1px solid var(--line);
  clip-path: var(--notch-sm);
  margin-bottom: 0.9rem;
  background: var(--white);
}
.hse-list li::before{
  content: counter(hse, decimal-leading-zero);
  position: absolute;
  left: 1.1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--orange);
  font-size: 0.95rem;
}

/* ---------- Gallery / projects -------------------------------------------*/

.gallery-item{
  position: relative;
  clip-path: var(--notch-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
}
.gallery-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(27,27,27,0.85));
  color: var(--white);
}
.gallery-caption .cap-tag{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--orange-light);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.15rem;
}
.gallery-caption p{ margin: 0; font-size: 0.92rem; font-weight: 500; }

/* ---------- Contact -------------------------------------------------------*/

.contact-card{
  background: var(--sky);
  clip-path: var(--notch-lg);
  padding: 2rem;
  height: 100%;
}
.contact-item{ display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.contact-item:last-child{ margin-bottom: 0; }
.contact-item .icon{
  width: 44px; height: 44px; flex: 0 0 44px;
  clip-path: var(--notch-sm);
  background: rgba(232,67,43,0.1);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}

.form-control, .form-select{
  border-radius: 0;
  border: 1px solid var(--line);
  padding: 0.75rem 0.95rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--orange);
  box-shadow: 0 0 0 0.2rem rgba(232,67,43,0.14);
}
.form-label{ font-weight: 600; font-size: 0.9rem; color: var(--black); }

.map-frame{
  clip-path: var(--notch-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-frame iframe{ width: 100%; height: 320px; border: 0; display: block; }

#formStatus.alert{ border-radius: 0; }

/* ---------- Footer ---------------------------------------------------------*/

.site-footer{
  background: var(--charcoal);
  color: #a9b0b5;
  padding: 4.5rem 0 1.6rem;
}
.footer-top{ padding-bottom: 2.5rem; }
.footer-brand{
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 1rem;
}
.footer-brand small{
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #8a9096;
}
.footer-about{ font-size: 0.92rem; max-width: 40ch; }
.footer-values li{
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: #cfd3d6;
}
.footer-heading{
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-links li{ margin-bottom: 0.6rem; }
.footer-links a{ color: #a9b0b5; font-size: 0.92rem; }
.footer-links a:hover{ color: var(--orange-light); }
.footer-contact li{ display: flex; gap: 0.6rem; font-size: 0.92rem; margin-bottom: 0.9rem; align-items: flex-start; }
.footer-contact i{ color: var(--orange); margin-top: 0.2rem; }
.footer-contact a{ color: #cfd3d6; }
.footer-contact a:hover{ color: var(--orange-light); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.6rem;
  font-size: 0.85rem;
}
.footer-tag{ font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.03em; color: #8a9096; }

/* Round is kept here deliberately — a floating circular control reads
   as a familiar, tappable "dot", which is exactly where round earns
   its place in an otherwise angular system. */
.back-to-top{
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 1040;
  box-shadow: 0 10px 24px rgba(27,27,27,0.2);
}
.back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--orange-deep); color: var(--white); }

/* ---------- Scroll reveal utility ------------------------------------------*/

[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"]{ transition-delay: 0.08s; }
[data-reveal-delay="2"]{ transition-delay: 0.16s; }
[data-reveal-delay="3"]{ transition-delay: 0.24s; }
[data-reveal-delay="4"]{ transition-delay: 0.32s; }
[data-reveal-delay="5"]{ transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  html{ scroll-behavior: auto; }
}

/* ---------- Misc ------------------------------------------------------------*/

.divider-line{ height: 1px; background: var(--line); border: 0; }

/* Small chip — the one other spot round is kept, for the same reason
   as the back-to-top control: it's a tiny meta tag, not a structural
   element, so a pill shape reads correctly at that size. */
.badge-outline{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}