/* ==========================================================================
   Sentra Mitra Energi Lampung — theme
   Sliced from "WEB SME.psd" (1440x1100). Colours, sizes and spacings below
   were measured off the composite, so the home page above the fold is a
   1:1 rebuild. The footer and the About / Product / Contact pages are not
   in the PSD — they extend the same tokens rather than invent a second look.
   Everything not covered here is stock Bootstrap 5.3.
   ========================================================================== */

:root{
  --navy:#133D65;         /* hero ground, headings, brand word */
  --navy-deep:#0E2F4F;    /* footer — one step below the hero */
  --red:#E6373A;          /* CTA, active nav, top rule, first card accent */
  --blue:#1C679C;         /* secondary card accent */
  --bar:#205C83;          /* hero chart bars */
  --stroke:#608AA3;       /* hero chart trend lines */
  --mist:#F2F6F8;         /* card / panel ground */
  --ink:#1C2730;          /* body headings on white */
  --ink-soft:#707E87;     /* body copy */
  --on-navy:#D4E0E8;      /* body copy on the hero */
  --on-navy-soft:#B4CAD8; /* eyebrow on the hero */
  --line:#DDE4E9;

  --ff:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* The mock puts content between x=90 and x=1340 on a 1440 canvas. */
  --shell:1308px;
}

/* ------------------------------ base ------------------------------ */
html{ scroll-behavior:smooth; }
body{
  background:#fff;
  color:var(--ink-soft);
  font-family:var(--ff);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.container-xl{ max-width:var(--shell); padding-left:1.5rem; padding-right:1.5rem; }

h1,h2,h3,h4{ font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.25; }

a{ color:var(--navy); text-underline-offset:.2em; }
a:hover{ color:var(--red); }

.skip-link{ position:absolute; top:.5rem; left:.5rem; background:var(--navy); color:#fff; padding:.5rem .9rem; z-index:1080; }
.skip-link:not(:focus){ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* The section signature: small, tracked, all caps. Red on white, pale blue
   on the hero. */
.eyebrow{
  display:block;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.105em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 1.1rem;
}
.eyebrow--hero{ color:var(--on-navy-soft); font-size:.9375rem; letter-spacing:.13em; margin-bottom:1.6rem; }

.lead-muted{ font-size:1.0625rem; color:var(--ink-soft); margin:0; }

/* ------------------------------ buttons ------------------------------ */
.btn-sme{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  padding:1.375rem 2.375rem;
  border:0;
  border-radius:0;
  text-decoration:none;
  transition:background .15s ease;
}
.btn-sme:hover,.btn-sme:focus{ background:#c92c2f; color:#fff; }

.btn-sme--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.btn-sme--ghost:hover,.btn-sme--ghost:focus{ background:#fff; color:var(--navy); box-shadow:none; }

/* ------------------------------ header ------------------------------ */
.site-header{
  background:#fff;
  border-bottom:4px solid var(--red);
}
.site-header .container-xl{ min-height:100px; display:flex; align-items:center; }

.brand{ display:flex; align-items:center; gap:2.4375rem; text-decoration:none; }
/* ponytail: this mark is cropped out of the 1440px PSD composite, so it is
   only 56px wide and will look soft on a 2x screen. Swap in the client's
   vector logo when it arrives — nothing else needs to change. */
.brand__mark{ width:47px; height:auto; flex:none; }
.brand__word{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  text-transform:uppercase;
  color:var(--navy);
  line-height:1.1;
  letter-spacing:.005em;
}
.brand__sub{
  display:block;
  font-size:.9375rem;
  font-weight:700;
  text-transform:uppercase;
  color:var(--red);
  letter-spacing:.02em;
  margin-top:.2rem;
}

.site-nav .nav-link{
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
  padding:.5rem 0;
}
.site-nav .nav-item + .nav-item{ margin-left:2.75rem; }
.site-nav .nav-link:hover,
.site-nav .nav-link.active{ color:var(--red); }

.navbar-toggler{ border:0; padding:.4rem; }
.navbar-toggler:focus{ box-shadow:none; }
.toggler-bars{ display:block; width:26px; }
.toggler-bars i{ display:block; height:2px; background:var(--navy); }
.toggler-bars i + i{ margin-top:6px; }

/* ------------------------------ hero ------------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  padding:4.625rem 0 5.75rem;
}
.hero__inner{ position:relative; z-index:2; max-width:640px; }
.hero h1{
  color:#fff;
  font-size:clamp(1.75rem,4.75vw,3.375rem);
  line-height:1.463;
  letter-spacing:-.015em;
  margin:0 0 .5rem;
}
.hero__sub{
  color:var(--on-navy);
  font-size:1.25rem;
  line-height:1.6;
  margin:0 0 2.5rem;
  max-width:33rem;
}

/* The chart sits at its measured place on the right of a 1440px canvas and
   simply scales with the viewport. Below lg it would collide with the copy,
   so it drops out — it carries no information. */
.hero__chart{
  position:absolute;
  right:0; bottom:0;
  width:43.06%;      /* 620 / 1440 */
  height:100%;
  z-index:1;
  display:none;
}
@media (min-width:992px){ .hero__chart{ display:block; } }

/* ------------------------------ section heads ------------------------------ */
.section{ padding:2.6875rem 0 5.5rem; }
.section__head{ max-width:70ch; margin-bottom:3.75rem; }
.section__head h2{
  font-size:clamp(1.5rem,2.6vw,2.125rem);
  margin:0 0 .85rem;
}

/* ------------------------------ accent cards ------------------------------ */
/* The PSD card: 390x170, #F2F6F8 ground, 8px accent rail on the left. */
.accent-card{
  display:flex;
  min-height:170px;
  background:var(--mist);
}
.accent-card::before{
  content:"";
  flex:none;
  width:8px;
  background:var(--blue);
}
.accent-card--red::before{ background:var(--red); }
.accent-card__body{ padding:2rem 1.75rem 2rem 1.375rem; }
/* The mock's three cards sit on a 40px gutter, not Bootstrap's 24px. */
.card-row{ --bs-gutter-x:2.5rem; --bs-gutter-y:2.5rem; }
.accent-card h3{
  font-size:1.25rem;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 .9rem;
}
.accent-card p{ font-size:.875rem; line-height:1.6; margin:0; }

/* ------------------------------ catalogue ------------------------------ */
.product-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:1.25rem;
  padding-bottom:2.5rem;
  margin-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.product-filters__group{ min-width:220px; }
.product-filters .form-label{
  font-size:.75rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy); margin-bottom:.35rem;
}
.product-filters .form-select{
  border:1px solid var(--line); border-radius:0; background-color:var(--mist);
  color:var(--ink); font-size:.9375rem; padding:.7rem .9rem;
}
.product-filters .form-select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(28,103,156,.18); }
.product-filters__actions{ display:flex; align-items:center; gap:1rem; }
.product-filters__clear{ font-size:.875rem; }

.product-card{
  display:flex;
  flex-direction:column;
  background:var(--mist);
  border-top:4px solid var(--blue);
}
.product-card__media{
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#E3EAEF;
}
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No image yet — a flat panel keeps the grid even instead of collapsing a card. */
.product-card__media-empty{
  display:block; width:100%; height:100%;
  background:repeating-linear-gradient(135deg,#E3EAEF 0 12px,#DCE4EA 12px 24px);
}
.product-card__body{ display:flex; flex-direction:column; flex:1; padding:1.5rem 1.5rem 1.25rem; }
.product-card__category{
  font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red); margin-bottom:.5rem;
}
.product-card__name{ font-size:1.125rem; margin:0 0 .6rem; }
.product-card__name a{ color:var(--navy); text-decoration:none; }
.product-card__name a:hover{ color:var(--red); }
.product-card__lede{ font-size:.875rem; line-height:1.6; margin:0 0 1rem; }
/* Pushes the availability row to the bottom so cards of unequal length still
   line their footers up. */
.product-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:auto; padding-top:1rem;
}
.product-card__more{ font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }

/* Availability is editorial, so the colours carry no promise beyond the label
   sitting next to them. */
.badge-availability{
  display:inline-block; font-size:.6875rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.35rem .65rem; color:#fff; background:var(--navy);
}
.badge-availability--available{ background:#1F7A4C; }
.badge-availability--limited{ background:#B7791F; }
.badge-availability--on_request{ background:var(--blue); }
.badge-availability--unavailable{ background:#6B7C88; }

.spec-list{ margin:0 0 1.5rem; }
.spec-list dt{
  font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.spec-list dd{ margin:0 0 .6rem; color:var(--navy); font-weight:600; }
/* On the card the pairs read as one compact block rather than a table. */
.spec-list--compact{ margin-bottom:0; }
.spec-list--compact dt{ font-size:.6875rem; letter-spacing:.05em; }
.spec-list--compact dd{ font-size:.875rem; margin-bottom:.45rem; }
@media (min-width:576px){
  .spec-list:not(.spec-list--compact){ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.5rem; }
  .spec-list:not(.spec-list--compact) dd{ margin-bottom:0; }
}

.empty-state{
  background:var(--mist); border-left:4px solid var(--blue);
  padding:1.5rem 1.75rem; margin:0; color:var(--ink);
}

/* ------------------------------ product detail ------------------------------ */
.page-head--slim{ padding:2.5rem 0; }
.crumbs{ font-size:.8125rem; color:var(--on-navy-soft); margin-bottom:.75rem; }
.crumbs a{ color:var(--on-navy-soft); }
.crumbs a:hover{ color:#fff; }
.crumbs span{ margin:0 .4rem; }

.product-gallery__main{ width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; background:#E3EAEF; }
.product-gallery__main--empty{ background:repeating-linear-gradient(135deg,#E3EAEF 0 12px,#DCE4EA 12px 24px); }
.product-gallery__thumbs{
  list-style:none; padding:0; margin:.75rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.75rem;
}
.product-gallery__thumbs a{ display:block; border:2px solid transparent; }
.product-gallery__thumbs a.is-active{ border-color:var(--blue); }
.product-gallery__thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }

.product-detail__status{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.product-detail__code{ font-size:.8125rem; color:var(--ink-soft); }
.product-detail__heading{ font-size:1.125rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); margin:0 0 1rem; }
.product-detail__cta{ margin-top:.5rem; }
.product-detail__unavailable{ background:var(--mist); border-left:4px solid #6B7C88; padding:1rem 1.25rem; margin-top:.5rem; }
.product-detail__description{ margin-top:4rem; max-width:70ch; }
.product-detail__description :where(h2,h3,h4){ margin-top:2rem; }

/* ------------------------------ plain list + facts ------------------------------ */
.tick-list{ list-style:none; padding:0; margin:0; }
.tick-list li{ position:relative; padding-left:1.6rem; margin-bottom:.65rem; }
.tick-list li::before{
  content:"";
  position:absolute; left:0; top:.75em;
  width:8px; height:8px;
  background:var(--red);
}

.fact{ border-top:3px solid var(--red); padding-top:1.1rem; }
.fact__num{ display:block; font-size:2.25rem; font-weight:700; color:var(--navy); line-height:1.1; }
.fact__label{ font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

/* ------------------------------ form ------------------------------ */
/* Square, flat and navy-ruled, to match the cards and the CTA. Bootstrap's
   form classes carry the layout; only the skin is ours. */
.sme-form .form-label{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:.4rem;
}
.sme-form .form-control{
  border:1px solid var(--line);
  border-radius:0;
  background:var(--mist);
  color:var(--ink);
  font-size:.9375rem;
  padding:.75rem .9rem;
}
.sme-form .form-control:focus{
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 3px rgba(28,103,156,.18);
}
.sme-form .form-control::placeholder{ color:#9AA6AE; }
.sme-form textarea.form-control{ resize:vertical; }

/* Visually gone, still submitted — a bot filling it is the whole point, so it
   must not be display:none, which many skip. */
.honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.form-note{ border-left:4px solid var(--blue); background:var(--mist); padding:1rem 1.25rem; margin-bottom:1.75rem; }
.form-note--ok{ border-left-color:var(--blue); color:var(--navy); }
.form-note--bad{ border-left-color:var(--red); color:var(--ink); }
.form-note ul{ list-style:none; padding:0; }

/* ------------------------------ inquiry ------------------------------ */
.inquiry-product{ background:var(--mist); border-left:4px solid var(--red); padding:1.5rem 1.5rem 1.75rem; }
.inquiry-product__img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; margin-bottom:1.25rem; }
.inquiry-product__name{ font-size:1.25rem; color:var(--navy); margin:0 0 .35rem; }
.inquiry-product__meta{ font-size:.8125rem; color:var(--ink-soft); margin:0 0 .9rem; }

.form-divider{ border:0; border-top:1px solid var(--line); margin:2rem 0; }

/* The consent box is a decision, not a field, so it gets its own weight. */
.form-consent{
  display:flex; gap:.75rem; align-items:flex-start;
  background:var(--mist); border-left:4px solid var(--blue);
  padding:1rem 1.25rem; margin-top:1.75rem;
}
.form-consent input{ margin-top:.25rem; flex:none; }
.form-consent label{ font-size:.9375rem; line-height:1.5; margin:0; }

.form-footnote{ font-size:.8125rem; color:var(--ink-soft); margin:1rem 0 0; }

.reference{
  background:var(--mist); border-left:4px solid var(--blue);
  padding:1.25rem 1.5rem; margin:1.5rem 0;
}
.reference__label{
  display:block; font-size:.75rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.35rem;
}
.reference__value{ font-size:1.5rem; color:var(--navy); letter-spacing:.02em; }

/* ------------------------------ navy call to action ------------------------------ */
.cta-band{ background:var(--navy); color:var(--on-navy); padding:4rem 0; }
.cta-band h2{ color:#fff; font-size:clamp(1.5rem,2.6vw,1.875rem); margin:0 0 .75rem; }

/* ------------------------------ footer ------------------------------ */
.site-footer{ background:var(--navy-deep); color:#93A9BC; padding:4rem 0 0; font-size:.9375rem; }
.site-footer h4{ color:#fff; font-size:1.0625rem; letter-spacing:.02em; margin:0 0 1rem; }
.site-footer .eyebrow{ color:#fff; opacity:.75; }
.site-footer a{ color:#93A9BC; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.footer-nav{ list-style:none; padding:0; margin:0; }
.footer-nav li{ margin-bottom:.5rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:3rem;
  padding:1.25rem 0;
  font-size:.875rem;
}

/* ------------------------------ page banner ------------------------------ */
/* About / Product / Contact reuse the hero ground at a shorter height. */
.page-head{ background:var(--navy); padding:3.5rem 0; }
.page-head h1{ color:#fff; font-size:clamp(1.875rem,3.6vw,2.5rem); margin:0; }

/* Banner variant: the same band carrying a full-width image. The page sets the
   image inline, so a second page only needs the class and its own file.
   The scrim is what keeps the eyebrow and title legible over an arbitrary
   photo — keep it if the image is swapped. */
.page-head--banner{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(220px,26vw,380px);
  padding:2.5rem 0;
  background:var(--navy) center/cover no-repeat;
}
.page-head--banner::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(19,61,101,.85) 0%, rgba(19,61,101,.5) 55%, rgba(19,61,101,.2) 100%);
}
.page-head--banner > .container-xl{ position:relative; z-index:1; width:100%; }

@media (max-width:991.98px){
  .site-header .container-xl{ min-height:0; padding-top:1rem; padding-bottom:1rem; display:block; }
  /* The lockup is sized for a 1440px canvas; it has to give way to the
     toggler on a phone. */
  .brand{ gap:1rem; }
  .brand__mark{ width:40px; }
  .brand__word{ font-size:1.125rem; }
  .brand__sub{ font-size:.8125rem; }
  .site-nav .nav-item + .nav-item{ margin-left:0; }
  .hero{ padding:3.5rem 0; }
  .section{ padding:3rem 0 3.5rem; }
  .section__head{ margin-bottom:2.5rem; }
}