/* ============ FIXED HEADER — Ch.4.2 ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--header-h-desktop);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:var(--sp-6); }
.brand-lockup{ display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
.brand-lockup img{ height:28px; width:auto; }
.brand-lockup span{ font-weight:650; font-size:15px; letter-spacing:-.01em; color:var(--text); white-space:nowrap; }

.main-nav{ display:flex; align-items:center; gap:var(--sp-5); }
.main-nav a{
  font-size:13.5px; font-weight:550; color:var(--muted);
  position:relative; padding:6px 0; white-space:nowrap;
}
.main-nav a:hover{ color:var(--text); }
.main-nav a.active{ color:var(--text); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-19px; height:2px;
  background:var(--accent, var(--ompl-teal));
}
.header-right{ display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
.search-trigger{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted);
}
.search-trigger:hover{ color:var(--text); border-color:var(--muted); }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.menu-toggle svg{ width:22px; height:22px; }

@media (max-width:1180px){
  .site-header{ height:var(--header-h-tablet); }
  .main-nav{ gap:var(--sp-3); }
  .main-nav a{ font-size:12.5px; }
  .brand-lockup span{ display:none; }
}
@media (max-width:900px){
  .site-header{ height:var(--header-h-mobile); }
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .brand-lockup span{ display:inline; }
}

/* Mobile nav drawer */
.nav-drawer{
  position:fixed; top:0;right:0;bottom:0;left:0; z-index:300; background:var(--surface);
  transform:translateX(100%); transition:transform .26s var(--ease-out);
  display:flex; flex-direction:column;
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer-top{ display:flex; align-items:center; justify-content:space-between; padding:0 18px; height:var(--header-h-mobile); border-bottom:1px solid var(--border); }
.nav-drawer-links{ display:flex; flex-direction:column; padding:var(--sp-5) 18px; gap:var(--sp-2); overflow-y:auto; }
.nav-drawer-links a{ font-size:20px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--border); }
.drawer-close{ background:none;border:none;cursor:pointer;padding:8px; }
.drawer-close svg{ width:22px;height:22px; }

/* page content offset for fixed header */
.page-shell{ padding-top:var(--header-h-desktop); }
@media (max-width:1180px){ .page-shell{ padding-top:var(--header-h-tablet); } }
@media (max-width:900px){ .page-shell{ padding-top:var(--header-h-mobile); } }

/* ============ COMPACT FOOTER — Ch.4.3 ============ */
.site-footer{ background:var(--page-bg); border-top:1px solid var(--border); padding:var(--sp-8) 0 var(--sp-6); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr; gap:var(--sp-6);
}
.footer-col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:var(--sp-3); font-weight:650; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:var(--text); margin-bottom:8px; }
.footer-col a:hover{ color:var(--teal-dark); }
.footer-identity img{ height:26px; margin-bottom:var(--sp-2); }
.footer-identity .footer-brand{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.footer-identity .footer-brand img{ height:26px; margin-bottom:0; }
.footer-identity .footer-brand span{ font-weight:650; font-size:15px; color:var(--text); white-space:nowrap; }
.footer-identity p{ color:var(--muted); font-size:13.5px; max-width:220px; }
.footer-bottom{
  margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
  font-size:12.5px; color:var(--muted);
}
.footer-social{ display:flex; gap:var(--sp-4); }
@media (max-width:1023px){
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; row-gap:var(--sp-6); }
  .footer-identity{ grid-column:1 / -1; }
}
@media (max-width:767px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  details.footer-col > summary{ list-style:none; cursor:pointer; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:650; padding:10px 0; border-bottom:1px solid var(--border); }
}

/* ============ BUTTONS — Ch.4.6 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600;
  cursor:pointer; border:1px solid transparent; transition:all .16s var(--ease-out);
  white-space:nowrap;
}
.btn-primary{ background:var(--accent,var(--ompl-teal)); color:#fff; }
.btn-primary:hover{ filter:brightness(0.92); }
.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--text); }
.btn-text{ padding:0; border-radius:0; background:none; color:var(--teal-dark); font-weight:600; }
.btn-text:hover{ text-decoration:underline; }

/* ============ PAGE HERO BAND ============ */
.page-hero{ padding:var(--sp-6) 0 var(--sp-5); }
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent,var(--ompl-teal)); margin-bottom:10px; }
.page-hero h1{ font-size:32px; line-height:1.15; max-width:760px; }
.page-hero .lede{ margin-top:10px; font-size:15.5px; color:var(--muted); max-width:600px; line-height:1.55; }
@media (max-width:767px){ .page-hero h1{ font-size:25px; } }

/* ============ SEARCH FIELD — Ch.6.2 / 19 ============ */
.search-field-wrap{ position:relative; max-width:640px; margin:var(--sp-5) 0 var(--sp-6); }
.search-field{
  width:100%; padding:15px 20px 15px 46px; border-radius:999px; border:1px solid var(--border);
  font-size:15px; background:var(--surface); color:var(--text);
}
.search-field:focus{ border-color:var(--accent,var(--ompl-teal)); }
.search-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
.search-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:0 16px 40px rgba(20,30,40,.12);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .15s var(--ease-out);
  max-height:400px; overflow-y:auto; z-index:50;
}
.search-dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); }
.search-group{ padding:var(--sp-3) var(--sp-4); }
.search-group + .search-group{ border-top:1px solid var(--border); }
.search-group-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:650; margin-bottom:6px; }
.search-result{ display:flex; align-items:center; justify-content:space-between; padding:9px 6px; border-radius:8px; cursor:pointer; font-size:14.5px; }
.search-result:hover, .search-result.active{ background:var(--page-bg); }
.search-result .r-tag{ font-size:12px; color:var(--muted); }
.search-empty{ padding:var(--sp-5) var(--sp-4); text-align:center; }
.search-empty p{ color:var(--muted); font-size:14px; margin-bottom:var(--sp-3); }

/* ============ TILE GRID + MEDIUM TILE — Ch.4.4 ============ */
.tile-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.tile-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.tile-row{ display:contents; }
@media (max-width:1439px){
  .tile-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1199px){
  .tile-grid, .tile-grid.cols-3{ grid-template-columns:repeat(3,1fr); gap:16px; }
}
@media (max-width:767px){
  .tile-grid, .tile-grid.cols-3{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

.tile{
  position:relative; display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:var(--sp-5) var(--sp-4) var(--sp-4);
  min-height:142px; cursor:pointer; text-align:left; width:100%;
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.tile::before{
  content:""; position:absolute; top:0; left:var(--sp-4); right:var(--sp-4); height:var(--tile-accent);
  background:var(--accent,var(--ompl-teal)); border-radius:0 0 4px 4px;
}
.tile:hover, .tile:focus-visible, .tile.is-active{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,30,40,.08); border-color:#cfd8e0;
}
.tile-symbol{ font-size:22px; font-weight:700; color:var(--accent,var(--ompl-teal)); margin-bottom:var(--sp-3); letter-spacing:-.02em; }
.tile-symbol.icon{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.tile-symbol.icon svg{ width:26px; height:26px; }
.tile-label{ font-size:15.5px; font-weight:650; color:var(--text); line-height:1.3; }
.tile-sub{ font-size:12.5px; color:var(--muted); margin-top:4px; }

/* Full-width row preview strip — Ch.4.5 */
.preview-strip{
  grid-column:1 / -1; overflow:hidden; max-height:0; opacity:0;
  transition:max-height .22s var(--ease-out), opacity .2s var(--ease-out);
}
.preview-strip.open{ max-height:260px; opacity:1; }
.preview-inner{
  background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:var(--sp-5); margin-top:var(--sp-4); display:flex; gap:var(--sp-6); align-items:flex-start; flex-wrap:wrap;
}
.preview-inner .p-main{ flex:1; min-width:260px; }
.preview-inner .p-tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent,var(--ompl-teal)); margin-bottom:6px; }
.preview-inner h4{ font-size:17px; margin-bottom:8px; }
.preview-inner p{ font-size:14px; color:var(--muted); max-width:56ch; }
.preview-inner .p-cta{ flex-shrink:0; align-self:center; }

/* ============ SHARED DETAIL PAGE — compact spec-sheet layout ============ */
.detail-body{ max-width:920px; }
.detail-row{
  display:grid; grid-template-columns:200px 1fr; gap:var(--sp-6);
  padding:var(--sp-5) 0; border-top:1px solid var(--border);
}
.detail-row:first-child{ border-top:none; }
.detail-label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent,var(--ompl-teal)); padding-top:2px;
}
.detail-row .body h3{ font-size:15px; font-weight:650; color:var(--text); margin-bottom:6px; }
.detail-row .body p, .detail-row .body li{ font-size:14.5px; color:var(--muted); line-height:1.6; }
.detail-row .body ul{ padding-left:18px; margin:0; }
.detail-row .body li{ margin-bottom:6px; }
.detail-row .body p + p{ margin-top:8px; }
.detail-row.split .body{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width:900px){ .detail-row.split .body{ grid-template-columns:1fr; gap:var(--sp-3); } }

/* Compact technical snapshot as a real spec table, not prose */
.snapshot-table{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.snapshot-cell{ background:var(--surface); padding:11px 14px; }
.snapshot-cell .k{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.snapshot-cell .v{ font-size:14px; font-weight:600; color:var(--text); }
@media (max-width:600px){ .snapshot-table{ grid-template-columns:1fr; } }

@media (max-width:767px){
  .detail-row{ grid-template-columns:1fr; gap:6px; padding:var(--sp-4) 0; }
}

.status-badge{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.03em; }
.status-ready{ background:#DFF5F2; color:var(--teal-dark); }
.status-dev{ background:#E4EBFC; color:#1C46B0; }
.status-active{ background:#EFEAFC; color:#5B3FC7; }
.status-hold{ background:#FBF1DC; color:#9C7412; }
.status-done{ background:#EAECEF; color:var(--slate); }

.download-card{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:13px 14px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px;
}
.download-card strong{ font-size:14px; font-weight:600; }
.download-card .d-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
@media (max-width:600px){
  .download-card{ flex-direction:column; align-items:flex-start; gap:10px; }
  .download-card .btn{ align-self:flex-start; }
}
.faq-item{ border-top:1px solid var(--border); padding:14px 0; }
.faq-item:first-child{ border-top:none; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq-item p{ margin-top:10px; font-size:14px; color:var(--muted); line-height:1.6; }

/* ============ ENQUIRY CTA BAND ============ */
.enquiry-cta-band{
  background:var(--page-bg); border-radius:10px; padding:var(--sp-5) var(--sp-6); margin:var(--sp-5) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
}
.enquiry-cta-band h3{ font-size:17px; margin-bottom:4px; }
.enquiry-cta-band p{ color:var(--muted); font-size:13.5px; }

/* ============ FORMS — Ch.10.5 / 18.2 ============ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:600; }
.field .hint{ font-size:12.5px; color:var(--muted); }
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-input);
  font-size:14.5px; font-family:inherit; background:var(--surface); color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent,var(--ompl-teal)); }
.field textarea{ resize:vertical; min-height:96px; }
.consent-row{ display:flex; align-items:flex-start; gap:10px; grid-column:1/-1; }
.consent-row input{ margin-top:4px; }
.consent-row label{ font-size:13.5px; color:var(--muted); font-weight:400; }
@media (max-width:767px){ .form-grid{ grid-template-columns:1fr; } }

.form-success{ display:none; text-align:center; padding:var(--sp-7) 0; }
.form-success.show{ display:block; }
.form-success .check{ width:52px;height:52px; border-radius:50%; background:var(--ompl-teal); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-4); }

/* Section band background variants */
.band-bg{ background:var(--page-bg); }

.chips{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.chip{ padding:8px 16px; border-radius:999px; border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.chip.active{ background:var(--accent,var(--ompl-teal)); color:#fff; border-color:transparent; }

.breadcrumb{ font-size:13px; color:var(--muted); margin-bottom:var(--sp-4); }
.breadcrumb a:hover{ color:var(--teal-dark); }

/* ============ INLINE ENQUIRY FORM (embedded on every detail page) ============ */
.enquiry-inline{ max-width:560px; }
.context-line{ font-size:13px; color:var(--muted); margin-bottom:var(--sp-3); }
.context-line strong{ color:var(--text); }
.mini-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-form .field{ display:flex; flex-direction:column; gap:5px; }
.mini-form .field.full{ grid-column:1 / -1; }
.mini-form label{ font-size:12.5px; font-weight:600; color:var(--text); }
.mini-form .hint{ font-weight:400; color:var(--muted); }
.mini-form input, .mini-form textarea{
  padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; background:var(--surface); color:var(--text);
}
.mini-form input:focus, .mini-form textarea:focus{ border-color:var(--accent,var(--ompl-teal)); }
.mini-form textarea{ min-height:64px; resize:vertical; }
@media (max-width:600px){ .mini-form{ grid-template-columns:1fr; } }

.mini-success{
  display:none; align-items:center; gap:10px; padding:14px 16px;
  background:#EAF7F5; border-radius:10px; font-size:13.5px; color:var(--teal-dark); max-width:560px;
}
.mini-success.show{ display:flex; }
.mini-success .check{ width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--ompl-teal); display:flex; align-items:center; justify-content:center; }

/* ============ SIMPLE CONTACT PAGE ============ */
.contact-simple{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); padding:var(--sp-4) 0 var(--sp-7); align-items:start; }
.contact-details{ display:flex; flex-direction:column; gap:2px; }
.contact-line{
  display:flex; align-items:flex-start; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border);
  font-size:14px; color:var(--text); line-height:1.5;
}
.contact-line:last-child{ border-bottom:none; }
.contact-line .ci{ width:20px; height:20px; flex-shrink:0; color:var(--ompl-teal); margin-top:2px; }
.contact-line .ci svg{ width:100%; height:100%; }
.contact-line strong{ font-weight:650; }
.contact-line .hint{ color:var(--muted); font-size:12px; font-weight:400; }
@media (max-width:767px){ .contact-simple{ grid-template-columns:1fr; gap:var(--sp-6); } }