/* ==========================================================================
   PNR Control & Automation — Stylesheet
   Design language: industrial control-panel / schematic aesthetic.
   Terminal-block tags, blueprint grid, dashed circuit traces.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Colour */
  --ink:            #0E1B26;   /* near-black navy — primary text */
  --ink-soft:       #45566A;   /* secondary text */
  --steel:          #6C7C8C;   /* muted captions */
  --line:           #D7E0E8;   /* hairline borders */
  --line-strong:    #B9C6D2;
  --bg:             #F5F8FA;   /* page background */
  --surface:        #FFFFFF;   /* card / panel background */
  --surface-recessed:#EEF2F5;
  --blue:           #0B4F9E;   /* electric blue — primary */
  --blue-deep:       #063463;
  --blue-pale:      #E7F0FA;
  --orange:         #E35D25;  /* safety-orange accent */
  --orange-deep:    #B94A1B;
  --amber:          #F0A93B;  /* secondary accent, indicator-lamp amber */
  --amber-deep:     #C8871E;
  --amber-pale:     #FCF1DC;
  --success:        #1E8A5C;
  --danger:         #C4392B;
  --focus:          #1E88E5;

  /* Type — Inter (body) and Roboto (display/headings) are the site's primary fonts.
     Noto Sans Devanagari is appended as a fallback so Hindi (हिंदी) text — shown
     when the language toggle is set to हिं — renders correctly wherever it appears. */
  --font-display: 'Roboto', 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Noto Sans Devanagari', 'Courier New', monospace;

  /* Layout */
  --container: 1240px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --header-h: 78px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input, select, textarea{ font:inherit; }
svg{ display:inline-block; width:1em; height:1em; vertical-align:-0.14em; flex-shrink:0; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height:1.6;
}

/* ---------- Homepage full-screen background image (40% visible) ---------- */
body.page-home{ position:relative; }
body.page-home::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/images/site-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .4;
}

/* Readability scrim: guarantees hero text contrast no matter what part of the
   photo sits behind it — the image alone (luminance swings 0–254) can't. */
body.page-home .hero{
  background: linear-gradient(180deg, rgba(247,250,252,.9) 0%, rgba(239,244,248,.9) 100%);
}

/* Visible focus states everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--blue); color:#fff;
  padding:.75rem 1.25rem; z-index:1000; font-family:var(--font-mono); font-size:.85rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Blueprint grid backdrop ---------- */
.blueprint-bg{
  background-image:
    linear-gradient(rgba(11,79,158,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,79,158,.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue-deep);
  letter-spacing: .01em;
  line-height:1.15;
}
h1{ font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); }
h2{ font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); }
h3{ font-size: clamp(1.2rem, 1vw + .9rem, 1.5rem); }
h4{ font-size: 1.05rem; text-transform: uppercase; letter-spacing:.06em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  display:flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: var(--orange);
  display:inline-block;
}

.lede{ color: var(--ink-soft); font-size:1.08rem; max-width: 62ch; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: 1.5rem; }
.section{ padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-head{ max-width: 720px; margin-bottom: 2.75rem; display:flex; flex-direction:column; gap:.85rem; }
.section-head.center{ margin-inline:auto; text-align:center; align-items:center; }
.section--recessed{ background: var(--surface-recessed); }
.section--dark{ background: var(--blue-deep); color:#EAF1FA; }
.section--dark h2, .section--dark h3{ color:#fff; }
.section--dark .lede{ color:#BFD3E8; }

.grid{ display:grid; gap: 1.75rem; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding: .85rem 1.6rem;
  font-family: var(--font-display);
  font-weight:600; font-size:1rem; letter-spacing:.02em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--orange); color:#fff; box-shadow: 0 2px 0 var(--orange-deep); }
.btn-primary:hover{ background: var(--orange-deep); }
.btn-outline{ background: transparent; color: var(--blue-deep); border-color: var(--blue-deep); }
.btn-outline:hover{ background: var(--blue-deep); color:#fff; }
.btn-ghost-invert{ background: transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-invert:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-sm{ padding:.55rem 1.1rem; font-size:.88rem; }

/* ---------- Terminal-block tag chips (signature element) ---------- */
.tag-rail{ display:flex; flex-wrap:wrap; gap:.55rem; }
.tchip{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing:.03em;
  color: var(--blue-deep);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-top: 3px solid var(--blue);
  padding: .4rem .7rem;
  border-radius: 2px;
}
.tchip--amber{ border-top-color: var(--amber); }
.tchip--orange{ border-top-color: var(--orange); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:900;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  height: var(--header-h);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 6px 18px rgba(10,30,50,.08); }
.site-header .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:2.5rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand img{ height:46px; width:auto; border-radius:4px; flex-shrink:0; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; color:var(--blue-deep); white-space:nowrap; }

.nav-desktop{ display:flex; align-items:center; gap:1.4rem; }
.nav-desktop ul{ display:flex; gap:1.15rem; }
.nav-desktop a{
  font-family: var(--font-display); font-weight:600; font-size:.88rem;
  color: var(--ink); position:relative; padding:.3rem 0; white-space:nowrap;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background: var(--orange); transition: width .2s var(--ease);
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ width:100%; }
.nav-desktop a[aria-current="page"]{ color: var(--blue-deep); }

/* ---------- Search widget ---------- */
.search-widget{ position:relative; }
.search-panel{
  position:absolute; top: calc(100% + 12px); right:0; width:320px;
  background:#fff; border:1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -16px rgba(10,40,70,.3); padding:.9rem; z-index:30;
}
.search-panel[hidden]{ display:none; }
.search-panel__row{
  display:flex; align-items:center; gap:.6rem; border:1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding:.6rem .8rem;
}
.search-panel__icon{ width:17px; height:17px; color: var(--steel); flex-shrink:0; display:flex; }
.search-panel__icon svg{ width:17px; height:17px; }
.search-panel__row input{ border:none; outline:none; font-size:.92rem; width:100%; font-family: var(--font-body); }
.search-results{ margin-top:.5rem; max-height:280px; overflow-y:auto; }
.search-results li a{
  display:block; padding:.6rem .7rem; border-radius: var(--radius-sm); font-size:.88rem; color: var(--ink);
}
.search-results li a:hover, .search-results li a.is-active{ background: var(--blue-pale); color: var(--blue-deep); }
.search-results .search-no-results{ padding:.6rem .7rem; font-size:.85rem; color: var(--steel); font-family: var(--font-mono); }
.search-panel--mobile{ position:static; box-shadow:none; border:none; border-bottom:1px solid var(--line); border-radius:0; padding:1.2rem 1.5rem; }

/* ---------- Language toggle ---------- */
.lang-toggle{
  display:flex; align-items:center; border:1.5px solid var(--line-strong); border-radius: 999px; overflow:hidden;
}
.lang-btn{
  background:none; border:none; padding:.45rem .8rem; font-family: var(--font-display); font-weight:600; font-size:.78rem;
  color: var(--ink-soft); transition: background .18s var(--ease), color .18s var(--ease); white-space:nowrap;
}
.lang-btn.is-active{ background: var(--blue-deep); color:#fff; }
.lang-toggle--mobile{ margin: 0 1.5rem 1.2rem; align-self:flex-start; }
.lang-toggle--mobile .lang-btn{ padding:.6rem 1.1rem; font-size:.85rem; }
.mobile-nav-top{ padding-top:1.2rem; display:flex; flex-direction:column; }

@media (max-width: 1499px){ .search-widget, .header-actions .lang-toggle{ display:none; } }

.header-actions{ display:flex; align-items:center; gap:.6rem; }
.header-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-strong);
  color: var(--blue-deep); background:#fff; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.header-icon-btn svg{ width:17px; height:17px; }
.header-icon-btn:hover{ background: var(--blue-deep); border-color: var(--blue-deep); color:#fff; }
@media (max-width: 1499px){ .header-icon-btn{ display:none; } }
.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:4px; background:#fff; gap:5px;
}
.hamburger span{ width:20px; height:2px; background:var(--blue-deep); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: var(--header-h) 0 0 0; background:#fff; z-index:850;
  transform: translateX(100%); transition: transform .3s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav a{
  display:block; padding:1.15rem 1.5rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  border-bottom:1px solid var(--line);
}
.mobile-nav-contacts{ display:flex; flex-direction:column; gap:.8rem; padding: 1.5rem 1.5rem 0; }
.mobile-nav-contacts .btn{ justify-content:flex-start; gap:.7rem; }
.mobile-nav .btn-primary.btn-block{ margin: 1.2rem 1.5rem 1.5rem; }

@media (max-width: 1499px){
  .nav-desktop{ display:none; }
  .hamburger{ display:inline-flex; }
  .header-actions .btn-primary{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: linear-gradient(180deg, #F7FAFC 0%, #EFF4F8 100%);
  border-bottom: 1px solid var(--line);
}
.hero .container{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items:center;
}
body.page-home .hero .container{ grid-template-columns: 1.1fr .9fr; max-width: none; }
.hero-copy .eyebrow{ margin-bottom:1.1rem; }
.hero-copy h1{ margin-bottom:1.15rem; }
.hero-copy .lede{ margin-bottom:1.9rem; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.hero-meta{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.hero-meta li{ display:flex; align-items:center; gap:.5rem; font-family:Arial, Helvetica, sans-serif; font-size:.82rem; font-weight:600; letter-spacing:0; color: var(--ink-soft); }
.hero-meta li svg{ width:16px; height:16px; color: var(--success); flex-shrink:0; }
.google-rating{ padding:.3rem .7rem; border-radius: var(--radius-sm); background: var(--surface-recessed); border: 1px solid var(--line); }
.google-rating__link{ display:flex; align-items:center; gap:.4rem; color: var(--ink); }
.google-rating__link:hover{ color: var(--blue-deep); }
.google-rating__count{ color: var(--ink-soft); font-weight:500; }

.hero-visual{ display:flex; flex-direction:column; align-items:center; }
.hero-visual__card{
  width:100%; max-width:420px; background:#fff; border-radius: var(--radius-md);
  border:1px solid var(--line); padding:1.1rem;
  box-shadow: 0 30px 60px -24px rgba(10,30,50,.28);
}
.hero-visual__card img{ width:100%; height:auto; display:block; border-radius: var(--radius-sm); }

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  body.page-home .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ margin-top:.5rem; }
}

/* ---------- Quick services strip ---------- */
.quick-strip{ background: var(--blue-deep); }
.quick-strip ul{ display:flex; flex-wrap:wrap; }
.quick-strip li{
  flex:1 1 160px; text-align:center; padding: 1.3rem .8rem;
  border-right: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.02em; color:#EAF1FA;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
}
.quick-strip li:last-child{ border-right:none; }
.quick-strip svg{ width:26px; height:26px; color: var(--amber); }

/* ---------- Cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(10,40,70,.25); border-color: var(--line-strong); }
.card-icon{
  width:52px; height:52px; border-radius: var(--radius-sm);
  background: var(--blue-pale); color: var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
}
.card-icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.6rem; }
.card p{ color: var(--ink-soft); font-size:.96rem; }
.spec-list{ margin-top:1rem; display:flex; flex-direction:column; gap:.45rem; }
.spec-list li{
  font-family: var(--font-mono); font-size:.82rem; color: var(--ink-soft);
  display:flex; gap:.55rem; align-items:flex-start;
}
.spec-list li::before{ content:"—"; color: var(--orange); flex-shrink:0; }
.card-link{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; color:var(--blue); font-size:.92rem; }
.card-link svg{ width:16px; height:16px; transition: transform .2s var(--ease); }
.card-link:hover svg{ transform: translateX(3px); }

/* ---------- Products We Deal In ---------- */
.products-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; align-items:stretch;
}
@media (max-width: 900px){ .products-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .products-grid{ grid-template-columns: 1fr; } }

.product-card{
  display:flex; flex-direction:column; height:100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -20px rgba(10,40,70,.3), 0 0 0 1px var(--blue) inset;
  border-color: var(--blue);
}
.product-card__media{
  position:relative; aspect-ratio: 3/4; overflow:hidden;
  background: linear-gradient(180deg, #EEF2F5 0%, #E4EAEF 100%);
  display:flex; align-items:center; justify-content:center;
}
.product-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__media img{ transform: scale(1.08); }
.product-card__media--packshot img{ object-fit:contain; padding:1.6rem; }
.product-card__media--packshot{ background: radial-gradient(circle at 50% 40%, #F4F7F9 0%, #E4EAEF 100%); }
.product-card__body{ display:flex; flex-direction:column; flex:1; padding: 1.5rem 1.6rem 1.7rem; }
.product-card__body h3{
  margin-bottom:.55rem; line-height:1.25; min-height:2.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card__body p{
  color: var(--ink-soft); font-size:.94rem; flex:1; line-height:1.5;
}
.product-card__actions{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; padding-top:0;
}
.product-card__cta{
  flex:1 1 auto; justify-content:center; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family: var(--font-display); font-weight:600; font-size:.9rem;
  color: var(--ink);
  padding: .6rem .9rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--amber);
  background: var(--amber);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.product-card__cta svg{ width:15px; height:15px; flex-shrink:0; transition: transform .2s var(--ease); }
.product-card__cta:hover{ background: var(--amber-deep); border-color: var(--amber-deep); color:#fff; }
.product-card__cta:hover svg{ transform: translateX(3px); }
.product-card__cta--order{
  background: var(--orange); color:#fff; border-color: var(--orange);
  cursor:pointer; font-family: var(--font-display);
}
.product-card__cta--order:hover{ background: var(--orange-deep); border-color: var(--orange-deep); color:#fff; }
.product-card__cta--order:hover svg{ transform: translateX(3px); }
@media (max-width:380px){
  .product-card__actions{ flex-direction:column; }
  .product-card__cta{ width:100%; }
}

.products-more{
  margin-top: 3rem; padding: 2.5rem 1.5rem 0; border-top: 1px dashed var(--line-strong);
  text-align:center;
}
.products-more__label{
  font-family: var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:0; text-transform:none;
  color: var(--blue-deep); margin-bottom:1.5rem;
}
.products-more__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; max-width: 920px; margin-inline:auto; }
.products-more__links a{
  font-family: var(--font-display); font-weight:600; font-size:.94rem;
  color: var(--blue-deep); background: var(--blue-pale);
  border: 1.5px solid var(--blue-pale);
  padding:.75rem 1.35rem; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10,40,70,.05);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.products-more__links a:hover{
  background: var(--blue-deep); border-color: var(--blue-deep); color:#fff;
  transform: translateY(-3px); box-shadow: 0 14px 24px -10px rgba(6,52,99,.4);
}

/* ---------- Why-choose list ---------- */
.reason{
  display:flex; gap:1rem; padding: 1.3rem 0; border-bottom:1px solid var(--line);
}
.reason:last-child{ border-bottom:none; }
.reason-icon{ width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--amber-pale); color:var(--orange-deep); display:flex; align-items:center; justify-content:center; }
.reason-icon svg{ width:20px; height:20px; }
.reason h4{ color: var(--blue-deep); margin-bottom:.3rem; text-transform:none; letter-spacing:0; font-size:1.02rem; }
.reason p{ color: var(--ink-soft); font-size:.93rem; }

/* ---------- Panel/spec block ---------- */
.spec-block{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-md);
  overflow:hidden;
}
.spec-block__head{
  background: var(--blue-deep); color:#fff; padding: 1rem 1.4rem;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between;
}
.spec-block__body{ padding: 1.4rem; }
.spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom: 1px dashed var(--line); font-size:.93rem; }
.spec-row:last-child{ border-bottom:none; }
.spec-row dt{ color: var(--steel); font-family: var(--font-mono); font-size:.8rem; }
.spec-row dd{ margin:0; color: var(--ink); font-weight:600; text-align:right; }

/* ---------- Timeline / process (only where order is real) ---------- */
.process{ display:flex; flex-direction:column; }
.process-step{ display:flex; gap:1.4rem; position:relative; padding-bottom:2.2rem; }
.process-step:last-child{ padding-bottom:0; }
.process-step::before{
  content:""; position:absolute; left:19px; top:44px; bottom:0; width:1px;
  background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.process-step:last-child::before{ display:none; }
.process-num{
  width:40px; height:40px; border-radius:50%; background:var(--blue-deep); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; flex-shrink:0; z-index:1;
}
.process-copy h4{ text-transform:none; letter-spacing:0; color:var(--blue-deep); font-size:1.05rem; margin-bottom:.35rem; }
.process-copy p{ color:var(--ink-soft); font-size:.93rem; }

/* ---------- Industries ---------- */
.industry-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.6rem; display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;
}
.industry-card .card-icon{ margin-bottom:0; }

/* ---------- Gallery / projects ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.filter-btn{
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.03em;
  padding:.5rem 1rem; border:1.5px solid var(--line-strong); border-radius: 999px; background:#fff; color:var(--ink-soft);
  transition: all .18s var(--ease);
}
.filter-btn:hover{ border-color: var(--blue); color: var(--blue-deep); }
.filter-btn[aria-pressed="true"]{ background: var(--blue-deep); border-color: var(--blue-deep); color:#fff; }

.project-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.project-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(10,40,70,.3); }
.project-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:#0E1B26; }
.project-media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s var(--ease); }
.project-card:hover .project-media img{ transform: scale(1.05); }
.project-badge{
  position:absolute; top:.8rem; left:.8rem; background: rgba(227,93,37,.94); color:#fff;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:2px;
}
.project-body{ padding:1.3rem 1.4rem 1.5rem; }
.project-body h3{ margin-bottom:.4rem; font-size:1.1rem; }
.project-body .lede{ font-size:.88rem; margin-bottom:.9rem; }
.project-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.project-tags span{
  font-family:var(--font-mono); font-size:.68rem; color:var(--blue-deep); background:var(--blue-pale);
  padding:.22rem .55rem; border-radius:2px;
}
.project-grid[hidden]{ display:none; }
.no-results{ text-align:center; color:var(--steel); font-family:var(--font-mono); padding:3rem 0; display:none; }
.no-results.is-visible{ display:block; }

/* ---------- FAQ Accordion ---------- */
.accordion{ border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; text-align:left; padding:1.25rem .2rem;
  font-family: var(--font-display); font-weight:600; font-size:1.02rem; color: var(--ink);
}
.accordion-trigger svg{ width:20px; height:20px; flex-shrink:0; transition: transform .25s var(--ease); color:var(--blue); }
.accordion-trigger[aria-expanded="true"] svg{ transform: rotate(45deg); }
.accordion-panel{
  max-height:0; overflow:hidden; transition: max-height .3s var(--ease);
}
.accordion-panel-inner{ padding: 0 .2rem 1.4rem; color: var(--ink-soft); font-size:.95rem; max-width:70ch; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-grid .field-full{ grid-column: 1 / -1; }
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-family: var(--font-display); font-weight:600; font-size:.9rem; color: var(--blue-deep); }
.field label .req{ color: var(--orange); }
.field input, .field select, .field textarea{
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: .78rem .9rem;
  background:#fff; color: var(--ink); font-size:.96rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,79,158,.15); outline:none;
}
.field textarea{ resize: vertical; min-height:120px; }
.field small{ font-family: var(--font-mono); font-size:.74rem; color: var(--steel); display:flex; align-items:center; gap:.4rem; }
.field small svg{ width:14px; height:14px; flex-shrink:0; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--danger); }
.field-error{ display:none; color: var(--danger); font-size:.8rem; font-family: var(--font-mono); }
.field.has-error .field-error{ display:block; }
.field .opt{ font-family: var(--font-mono); font-size:.72rem; color: var(--steel); font-weight:400; text-transform:uppercase; letter-spacing:.04em; margin-left:.3rem; }

.form-panel{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.6rem);
}
.form-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.8rem; }
.form-status{ font-family: var(--font-mono); font-size:.85rem; }
.form-status[data-state="success"]{ color: var(--success); }
.form-status[data-state="error"]{ color: var(--danger); }

.btn .spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation: spin .7s linear infinite; display:none;
}
.btn.is-loading .spinner{ display:inline-block; }
.btn.is-loading .btn-label{ opacity:.85; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.success-panel{
  display:none; text-align:center; padding: 2.5rem 1.5rem;
  border: 1.5px dashed var(--success); border-radius: var(--radius-md); background: #F1FAF5;
}
.success-panel.is-visible{ display:block; }
.success-panel svg{ width:44px; height:44px; color: var(--success); margin-inline:auto; margin-bottom:1rem; }

/* ---------- Contact page tiles ---------- */
.contact-tile{
  display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-md); padding: 1.4rem; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-tile:hover{ border-color: var(--blue); transform: translateY(-2px); }
.contact-tile .card-icon{ margin-bottom:0; }
.contact-tile h4{ text-transform:none; letter-spacing:0; font-size:1rem; color:var(--blue-deep); margin-bottom:.3rem; }
.contact-tile p, .contact-tile a{ color: var(--ink-soft); font-size:.93rem; }
.contact-tile a:hover{ color: var(--blue); }

.map-embed{
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
  aspect-ratio: 16/9; background: var(--surface-recessed);
  display:flex; align-items:center; justify-content:center;
}
.map-embed iframe{ width:100%; height:100%; border:0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--blue-deep); color:#CFDCEA; }
.footer-top{ padding-block: 3.5rem; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.footer-brand img{ height:40px; border-radius:4px; }
.footer-brand strong{ font-family: var(--font-display); color:#fff; font-size:1.05rem; }
.footer-col h4{ color:#fff; font-size:.82rem; margin-bottom:1.1rem; letter-spacing:.08em; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:.9rem; color:#BFD3E8; display:inline-flex; align-items:flex-start; gap:.5rem; }
.footer-col li p{ display:flex; align-items:flex-start; gap:.5rem; }
.footer-col svg{ width:15px; height:15px; margin-top:.15em; color:#7FA5CE; }
.footer-col a:hover{ color:#fff; }
.footer-col p{ font-size:.9rem; color:#BFD3E8; }
.footer-social{ display:flex; gap:.7rem; margin-top:1rem; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-social a:hover{ transform: translateY(-2px); }
.footer-social svg{ width:17px; height:17px; }
/* Recognizable brand colors per platform, consistent size/spacing/hover otherwise */
.footer-social a.social-whatsapp{ background:#25D366; border-color:#25D366; }
.footer-social a.social-whatsapp:hover{ background:#1FAE55; border-color:#1FAE55; }
.footer-social a.social-facebook{ background:#1877F2; border-color:#1877F2; }
.footer-social a.social-facebook:hover{ background:#125FC9; border-color:#125FC9; }
.footer-social a.social-email{ background: var(--orange); border-color: var(--orange); }
.footer-social a.social-email:hover{ background: var(--orange-deep); border-color: var(--orange-deep); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:#9FB4CB;
}
.footer-bottom ul{ display:flex; gap:1.4rem; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Floating contact stack (WhatsApp + Call, sticky, all pages) ---------- */
.float-stack{
  position: fixed; right: 1.25rem; bottom: 1.6rem; z-index: 950;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
}
.whatsapp-float, .call-float{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: box-shadow .25s var(--ease);
}
.whatsapp-float{ background:#25D366; box-shadow: 0 10px 24px rgba(20,60,30,.35); }
.call-float{ background: var(--blue-deep); box-shadow: 0 10px 24px rgba(6,52,99,.4); width:48px; height:48px; }
.whatsapp-float:hover, .whatsapp-float:focus-visible,
.call-float:hover, .call-float:focus-visible{ box-shadow: 0 14px 30px rgba(20,60,30,.45); }
.whatsapp-float svg{ width:30px; height:30px; color:#fff; }
.call-float svg{ width:22px; height:22px; color:#fff; }

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed; left: 1.25rem; bottom: 1.6rem; z-index: 940;
  width:44px; height:44px; border-radius:50%; background: var(--blue-deep); color:#fff;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25);
  opacity:0; pointer-events:none; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top svg{ width:20px; height:20px; }

/* ---------- Cookie consent ---------- */
.cookie-bar{
  position: fixed; left:1rem; right:1rem; bottom:1rem; z-index:980;
  max-width: 620px; margin-inline:auto; background:#fff; border:1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: 0 18px 40px -14px rgba(10,30,50,.35);
  padding: 1.2rem 1.4rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.cookie-bar.is-visible{ transform:none; }
.cookie-bar p{ font-size:.85rem; color: var(--ink-soft); flex:1 1 280px; }
.cookie-actions{ display:flex; gap:.6rem; }

/* ---------- Lead-generation popup (appears once per session, ~5s) ---------- */
.lead-popup{
  position: fixed; inset:0; z-index:990;
  background: rgba(10,25,40,.55);
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
}
.lead-popup.is-visible{ opacity:1; pointer-events:auto; }
.lead-popup__panel{
  position:relative; background:#fff; border-radius: var(--radius-md); max-width:440px; width:100%;
  padding: 2.2rem 2rem 2rem; box-shadow: 0 30px 60px -20px rgba(6,20,35,.5);
  transform: translateY(16px) scale(.98); transition: transform .3s var(--ease);
  border-top: 4px solid var(--orange);
}
.lead-popup.is-visible .lead-popup__panel{ transform:none; }
.lead-popup__close{
  position:absolute; top:.8rem; right:.9rem; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong); background:#fff; font-size:1.3rem; line-height:1;
  color: var(--steel); display:flex; align-items:center; justify-content:center;
}
.lead-popup__close:hover{ background: var(--surface-recessed); color: var(--ink); }
.lead-popup h3{ margin:.5rem 0 .8rem; font-size:1.35rem; }
.lead-popup__actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
@media (prefers-reduced-motion: reduce){ .lead-popup, .lead-popup__panel{ transition:none; } }

/* ---------- Order-now popup (quantity + contact details + email) ---------- */
.order-popup{
  position: fixed; inset:0; z-index:990;
  background: rgba(8,18,30,.6);
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
}
.order-popup.is-visible{ opacity:1; pointer-events:auto; }
.order-popup__panel{
  position:relative; background:#fff; border-radius: var(--radius-md); max-width:400px; width:100%;
  max-height: 92vh; overflow-y:auto;
  padding: 2rem 2.1rem 1.9rem; box-shadow: 0 40px 80px -24px rgba(6,20,35,.55);
  transform: translateY(18px) scale(.98); transition: transform .3s var(--ease);
  border-top: 4px solid var(--blue);
}
.order-popup.is-visible .order-popup__panel{ transform:none; }
.order-popup__close{
  position:absolute; top:.85rem; right:.9rem; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background: var(--surface-recessed); font-size:1.2rem; line-height:1;
  color: var(--steel); display:flex; align-items:center; justify-content:center;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.order-popup__close:hover{ background: var(--line-strong); color: var(--ink); }

.order-popup__head{ display:flex; align-items:flex-start; gap:.85rem; padding-right:1.6rem; }
.order-popup__icon{
  flex:none; width:44px; height:44px; border-radius:50%;
  background: linear-gradient(155deg, var(--blue) 0%, var(--blue-deep) 100%);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 6px 16px -6px rgba(11,79,158,.55);
}
.order-popup__icon svg{ width:22px; height:22px; }
.order-popup__head .eyebrow{ margin-bottom:.15rem; }
.order-popup h3{
  margin:0; font-size:1.22rem; line-height:1.3;
}
.order-popup h3 [data-order-product-name]{ color: var(--blue-deep); }
.order-popup__intro{
  color: var(--ink-soft); font-size:.9rem; line-height:1.55;
  margin: .9rem 0 0; padding-bottom:1.1rem; border-bottom:1px solid var(--line);
}

.order-popup form{ margin-top:1.3rem; }
.order-popup__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem;
}
.order-popup__grid .field:nth-child(3),
.order-popup__grid .field:nth-child(4){ grid-column: 1 / -1; }
.order-popup__grid--single{ grid-template-columns: 1fr; max-width: 220px; margin-inline:auto; }
.order-popup .field label{ font-size:.82rem; letter-spacing:.01em; }
.order-popup .field input{ font-size:.95rem; }

.qty-stepper{
  display:flex; align-items:stretch; border:1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  overflow:hidden; background:#fff;
}
.qty-stepper__btn{
  flex:none; width:38px; display:flex; align-items:center; justify-content:center;
  background: var(--surface-recessed); color: var(--blue-deep); font-size:1.1rem; font-weight:700;
  border:none; transition: background-color .15s var(--ease);
}
.qty-stepper__btn:hover{ background: var(--line); }
.qty-stepper input{
  border:none; border-left:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong);
  text-align:center; -moz-appearance:textfield; width:100%; padding:.6rem .4rem;
  font-family: var(--font-display); font-weight:600;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-stepper input:focus{ outline:none; box-shadow:none; }

.qty-stepper:focus-within{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,79,158,.14); }

.order-popup__actions{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top:1.5rem; }
.order-popup__actions .btn-block{ width:100%; }
.order-popup__cancel{
  background:none; border:none; color: var(--steel); font-family: var(--font-display);
  font-size:.85rem; font-weight:600; padding:.3rem .5rem; cursor:pointer;
}
.order-popup__cancel:hover{ color: var(--ink); text-decoration:underline; }

.order-popup__status{ font-size:.85rem; margin-top:.9rem; font-family: var(--font-mono); text-align:center; }
.order-popup__status[data-state="error"]{ color: var(--danger); }
.order-popup__status[data-state="success"]{ color: var(--success); font-weight:600; }
.order-popup__note{
  display:flex; align-items:flex-start; gap:.4rem; margin-top:1.1rem; padding-top:1rem;
  border-top:1px solid var(--line); color: var(--steel); font-size:.76rem; line-height:1.5;
}
.order-popup__note svg{ flex:none; width:15px; height:15px; margin-top:.1rem; }

@media (max-width: 560px){
  .order-popup__grid{ grid-template-columns: 1fr; }
  .order-popup__grid .field:nth-child(3),
  .order-popup__grid .field:nth-child(4){ grid-column: auto; }
  .order-popup__panel{ padding: 1.6rem 1.4rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce){ .order-popup, .order-popup__panel{ transition:none; } }

/* ---------- Call-now fallback toast (Enquire Now / Order Now) ---------- */
.call-fallback-toast{
  position: fixed; left:0; right:0; bottom:1.1rem; z-index:1000;
  display:flex; justify-content:center; padding:0 1rem;
  pointer-events:none;
}
.call-fallback-toast__panel{
  pointer-events:auto;
  position:relative; width:100%; max-width:400px; background:#fff;
  border:1px solid var(--line-strong); border-left:4px solid var(--orange);
  border-radius: var(--radius-md); padding:1.1rem 1.3rem 1.2rem;
  box-shadow: 0 24px 48px -18px rgba(10,30,50,.4);
  opacity:0; transform: translateY(14px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.call-fallback-toast.is-visible .call-fallback-toast__panel{ opacity:1; transform:none; }
.call-fallback-toast__close{
  position:absolute; top:.5rem; right:.6rem; width:26px; height:26px; border-radius:50%;
  border:none; background: var(--surface-recessed); color: var(--steel); font-size:1.05rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.call-fallback-toast__close:hover{ background: var(--line); color: var(--ink); }
.call-fallback-toast__panel p{
  margin:0 1.4rem .8rem 0; font-size:.88rem; color: var(--ink); line-height:1.5;
}
.call-fallback-toast__panel .btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.call-fallback-toast__panel .btn svg{ width:16px; height:16px; }
@media (prefers-reduced-motion: reduce){ .call-fallback-toast__panel{ transition:none; } }

/* ---------- Honeypot (spam trap, hidden from real visitors) ---------- */
.hp-field{ position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }

/* ---------- Hero headline accent (stable text, no animation) ---------- */
.hero-rotator{
  display:inline-block; position:relative; color: var(--orange); min-height:1.2em;
}
.hero-rotator__word{
  display:inline-block; white-space:normal;
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Breadcrumb / page header ---------- */
.page-header{
  background: var(--blue-deep); color:#fff; padding-block: clamp(2.6rem, 5vw, 3.6rem);
  position:relative; overflow:hidden;
}
.page-header .container{ position:relative; z-index:1; }
.page-header .eyebrow{ color: var(--amber); }
.page-header .eyebrow::before{ background: var(--amber); }
.page-header h1{ color:#fff; margin-top:.6rem; }
.page-header .lede{ color:#BFD3E8; margin-top:.9rem; }
.breadcrumb{ font-family: var(--font-mono); font-size:.78rem; color:#9FB4CB; display:flex; gap:.5rem; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Table (industries / comparisons) ---------- */
.data-table{ width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
.data-table th, .data-table td{ padding: .9rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; }
.data-table th{ background: var(--surface-recessed); font-family: var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--steel); }
.data-table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--blue-deep), #0A3F73);
  color:#fff; border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3rem); display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:space-between; align-items:center;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(240,169,59,.25), transparent 70%);
}
.cta-band h2{ color:#fff; margin-bottom:.5rem; }
.cta-band p{ color:#BFD3E8; max-width:46ch; }
.cta-band-actions{ display:flex; gap:1rem; flex-wrap:wrap; position:relative; z-index:1; }

/* ---------- Utility ---------- */
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mb-2{ margin-bottom:2rem; }
.text-center{ text-align:center; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.placeholder-note{
  font-family: var(--font-mono); font-size:.78rem; color: var(--orange-deep); background: var(--amber-pale);
  border:1px dashed var(--orange); border-radius: var(--radius-sm); padding:.6rem .9rem; display:inline-block;
}