/* === components.css — Shared UI: buttons, cards, tabs, forms, badges === */
/* Any component used on more than one page lives here. After base, before layout. */

/* ============================================================
   BUTTONS — ICOM flat style (thin borders, near-square)
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.9rem; font-size:.9rem; font-weight:500; border-radius:var(--r); transition:all var(--t); border:1.5px solid transparent; }
.btn .ar{ transition:transform var(--t); }
.btn:hover .ar{ transform:translateX(3px); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-dark); box-shadow:var(--sh-2); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; box-shadow:var(--sh-2); }
.btn--outline{ border-color:var(--ink); color:var(--ink); background:#fff; }
.btn--outline:hover{ background:var(--ink); color:#fff; }
.btn--outline-red{ border-color:var(--red); color:var(--red); background:#fff; }
.btn--outline-red:hover{ background:var(--red); color:#fff; box-shadow:var(--sh-2); }
.btn--ghost{ border-color:#fff; color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--ink); }

/* ============================================================
   PAGE HERO BANNER (inner pages) + BREADCRUMB
   ============================================================ */
.page-hero{ position:relative; margin-top:var(--header-h); background:var(--ink); color:#fff; overflow:hidden; padding:3.5rem 0; }
.page-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:20px 20px; }
.page-hero::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--red); }
.page-hero__in{ position:relative; z-index:2; max-width:46rem; }
.page-hero h1{ color:#fff; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:900; letter-spacing:-.02em; }
.page-hero p{ color:#cfcfcf; margin-top:.8rem; font-size:1.05rem; max-width:38rem; }
.breadcrumb{ margin-bottom:1.1rem; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.8rem; }
.breadcrumb a{ color:#bdbdbd; transition:color var(--t); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb li[aria-current]{ color:var(--red); font-weight:700; }
.breadcrumb .sep{ color:rgba(255,255,255,.35); }

/* ============================================================
   ANIMATED FEATURED BANNER (ICOM kv_slider — shared: products + projects)
   ============================================================ */
/* ICOM "bg_gray" band holding a centred white slide card (~1096×418). */
.pbanner{ position:relative; overflow:hidden; background:var(--gray); padding:2.25rem 0 3rem; }
.pbanner:first-child{ margin-top:calc(var(--header-h) + 2.25rem); padding-top:0; }  /* offset only when first element */
.pbanner__track{ display:flex; transition:transform .5s ease; }
.pbanner__slide{ flex:0 0 100%; display:flex; justify-content:center; padding-inline:1rem; }
/* The whole slide is a clickable card (mirrors ICOM's <a>-wrapped banner) */
.pbanner__inner{ width:100%; max-width:1096px; height:clamp(300px,40vw,418px); background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:1.5rem; padding:2.5rem 3rem; text-align:left; cursor:pointer; transition:box-shadow var(--t); }
.pbanner__inner:hover{ box-shadow:var(--sh-2); }
.pbanner__eyebrow{ font-size:.8rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.9rem; }
.pbanner__model{ font-family:var(--font); font-weight:900; font-size:clamp(2rem,5.2vw,3.6rem); color:var(--ink); letter-spacing:-.02em; line-height:1; }
.pbanner__tag{ font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:clamp(1.05rem,2.4vw,1.6rem); color:var(--ink); margin:1rem 0 1.4rem; }
.pbanner__cta{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:700; color:var(--red); }
.pbanner__inner:hover .pbanner__cta .ar{ transform:translateX(3px); }
.pbanner__cta .ar{ transition:transform var(--t); }
.pbanner__media{ height:100%; display:flex; align-items:center; justify-content:center; }
.pbanner__media img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }
/* Full-image banner slides (editable images from pages/img/banner/) */
.pbanner__imgwrap{ display:block; width:100%; max-width:1096px; border-radius:6px; overflow:hidden; background:#fff; }
.pbanner__img{ display:block; width:100%; height:auto; }
@media (max-width:760px){
  .pbanner__inner{ grid-template-columns:1fr; align-content:center; gap:.5rem; padding:1.8rem; height:auto; min-height:240px; text-align:center; }
  .pbanner__cta{ justify-content:center; }
  .pbanner__media{ display:none; }
}
.pbanner__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:48px; border-radius:4px; background:rgba(40,40,40,.4); color:#fff; display:flex; align-items:center; justify-content:center; transition:background var(--t); }
.pbanner__arrow:hover{ background:var(--red); }
.pbanner__arrow.prev{ left:1.5rem; } .pbanner__arrow.next{ right:1.5rem; }
.pbanner__dots{ position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem; }
.pbanner__dots button{ width:10px; height:10px; border-radius:50%; background:rgba(40,40,40,.28); transition:all var(--t); }
.pbanner__dots button.active{ background:var(--red); width:26px; border-radius:6px; }

/* ============================================================
   AUTOFILL GRID HELPERS
   ============================================================ */
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.5rem; }
.grid-3{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   PRODUCT TABS
   ============================================================ */
.tabs{ display:flex; justify-content:center; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:2.5rem; }
.tab{ position:relative; padding:.9rem 1.7rem; font-size:.92rem; font-weight:500; color:var(--ink-soft); transition:color var(--t); }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--red); }
.tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--red); transform:scaleX(0); transition:transform var(--t); }
.tab.active::after{ transform:scaleX(1); }

/* ============================================================
   PRODUCT CARD — ICOM image-on-white, sharp, hover = red border
   ============================================================ */
.pcard{ position:relative; display:flex; flex-direction:column; width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-align:left; transition:border-color var(--t),box-shadow var(--t),transform var(--t); }
.pcard:hover{ border-color:var(--red); box-shadow:var(--sh-2); transform:translateY(-3px); }
.pcard__media{ position:relative; aspect-ratio:4/3; background:#fff; display:flex; align-items:center; justify-content:center; padding:1.4rem; border-bottom:1px solid var(--line); }
.pcard__media img{ width:100%; height:100%; object-fit:contain; transition:transform var(--t); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__new{ position:absolute; top:0; left:0; background:var(--red); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.25rem .7rem; }
.pcard__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.pcard__cat{ font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.pcard__model{ font-family:var(--mono); font-weight:700; font-size:1.1rem; color:var(--ink); margin:.35rem 0 .15rem; letter-spacing:-.01em; line-height:1.25; overflow-wrap:anywhere; }
.pcard__name{ font-size:.85rem; font-weight:400; color:var(--ink-soft); line-height:1.35; min-height:2.3em; }
/* Foot pinned to the card bottom (equal alignment across the grid) and stacked
   vertically so the long mono frequency never collides with the "View Details" link. */
.pcard__foot{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; margin-top:auto; padding-top:.85rem; border-top:1px solid var(--line); }
.pcard__freq{ order:-1; width:100%; font-family:var(--mono); font-size:.68rem; line-height:1.35; color:var(--ink-faint); }
.pcard__more{ font-size:.82rem; font-weight:700; color:var(--red); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.pcard:hover .pcard__more .ar{ transform:translateX(3px); }

/* ============================================================
   CATEGORY CARD
   ============================================================ */
.catcard{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; transition:all var(--t); }
.catcard:hover{ border-color:var(--red); box-shadow:var(--sh-2); transform:translateY(-3px); }
.catcard__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; }
.catcard__top h3{ font-size:1.2rem; font-weight:700; }
.catcard__count{ font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); border:1px solid var(--line); padding:.15rem .5rem; border-radius:var(--r); white-space:nowrap; }
.catcard p{ font-size:.88rem; color:var(--ink-soft); margin-bottom:1rem; }
.catcard__link{ font-size:.85rem; font-weight:700; color:var(--red); }

/* ============================================================
   PRODUCT DETAIL MODAL — ICOM product-page style
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:300; display:none; }
.modal.open{ display:block; }
.modal__overlay{ position:absolute; inset:0; background:rgba(40,40,40,.6); animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } }
.modal__dialog{ position:absolute; inset:0; margin:auto; width:min(960px,94vw); max-height:92vh; background:#fff; border-radius:var(--r-lg); overflow:auto; box-shadow:var(--sh-3); animation:pop .3s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(20px); } }
.modal__close{ position:absolute; top:1rem; right:1rem; z-index:2; width:40px; height:40px; border-radius:50%; background:var(--gray); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.modal__close:hover{ background:var(--red); color:#fff; }
.modal__crumb{ font-size:.78rem; color:var(--ink-faint); padding:1.2rem 1.6rem 0; }
.modal__crumb b{ color:var(--red); }
.modal__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:760px){ .modal__grid{ grid-template-columns:1fr 1fr; } }
.modal__media{ background:var(--gray); display:flex; align-items:center; justify-content:center; padding:2.5rem; min-height:280px; }
.modal__media img{ max-height:340px; width:auto; object-fit:contain; }
.modal__info{ padding:1.6rem; }
.modal__cat{ font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.modal__model{ font-family:var(--mono); font-weight:700; font-size:1.8rem; margin:.3rem 0 .15rem; }
.modal__name{ font-size:1.05rem; font-weight:400; color:var(--ink-soft); margin-bottom:1rem; }
.modal__meta{ display:grid; gap:.6rem; padding:1rem; background:var(--gray); border-radius:var(--r); margin-bottom:1.2rem; }
.modal__meta div{ display:flex; gap:.6rem; font-size:.82rem; }
.modal__meta .k{ color:var(--ink-faint); min-width:90px; font-weight:500; }
.modal__meta .v{ color:var(--ink); font-family:var(--mono); }
.modal__desc{ font-size:.92rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.modal__specs h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); margin-bottom:.7rem; }
.modal__specs li{ display:flex; gap:.55rem; font-size:.85rem; color:var(--ink-soft); padding:.3rem 0; border-bottom:1px solid var(--line); }
.modal__specs li .ico{ color:var(--red); flex-shrink:0; }
.modal__cta{ margin-top:1.4rem; }

/* Compatible accessories (full-width, bottom of the modal) */
.modal__acc{ padding:1.6rem; border-top:1px solid var(--line); animation:accIn .35s ease both; }
@keyframes accIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.modal__acc-title{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:1rem; }
.modal__acc-title svg{ color:var(--red); }
.modal__acc-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:560px){ .modal__acc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .modal__acc-grid{ grid-template-columns:repeat(3,1fr); } }
.acc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1rem; transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
.acc-card:hover{ border-color:var(--red); box-shadow:var(--sh-1); transform:translateY(-2px); }
.acc-card__ico{ display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:var(--r); background:var(--red-tint); color:var(--red); margin-bottom:.6rem; }
.acc-card__model{ font-family:var(--mono); font-weight:700; font-size:.92rem; color:var(--ink); }
.acc-card__name{ font-size:.84rem; font-weight:500; color:var(--ink); margin-top:.1rem; }
.acc-card__desc{ font-size:.78rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.45; }

/* ============================================================
   SOLUTION CARD
   ============================================================ */
.scard{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--r); padding:2rem; transition:all var(--t); }
.scard:hover{ box-shadow:var(--sh-2); transform:translateY(-4px); }
.scard__icon{ width:56px; height:56px; border-radius:var(--r); background:var(--red-tint); color:var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; transition:all var(--t); }
.scard:hover .scard__icon{ background:var(--red); color:#fff; }
.scard h3{ font-size:1.2rem; font-weight:700; margin-bottom:.7rem; }
.scard__desc{ font-size:.9rem; color:var(--ink-soft); margin-bottom:1.1rem; }
.scard__feat li{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--ink); padding:.2rem 0; }
.scard__feat .ico{ color:var(--red); flex-shrink:0; }
.scard__link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1.1rem; font-size:.85rem; font-weight:700; color:var(--red); }

/* ============================================================
   PROJECT CARD
   ============================================================ */
.projcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:all var(--t); }
.projcard:hover{ box-shadow:var(--sh-2); transform:translateY(-4px); }
.projcard__media{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.projcard__media .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform var(--t-slow); }
.projcard:hover .projcard__media .bg{ transform:scale(1.08); }
.projcard__cat{ position:absolute; top:.85rem; left:.85rem; z-index:2; background:var(--red); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.28rem .7rem; border-radius:var(--r); }
.projcard__body{ padding:1.4rem; }
.projcard__body h3{ font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.projcard__body p{ font-size:.86rem; color:var(--ink-soft); }

/* ============================================================
   BRANCH CARD (shared: home + branches)
   ============================================================ */
.brgrid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .brgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .brgrid{ grid-template-columns:repeat(3,1fr); } }
.bcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; transition:all var(--t); }
.bcard:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); }
.bcard--hq{ border-top:3px solid var(--red); }
@media (min-width:768px){ .bcard--hq{ grid-column:span 2; } }
.bcard__badge{ display:inline-block; background:var(--red); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.25rem .7rem; border-radius:var(--r); margin-bottom:.9rem; }
.bcard h3{ font-size:1.15rem; font-weight:700; margin-bottom:1rem; }
.bcard__rows{ display:grid; gap:.7rem; margin-bottom:1.2rem; }
.bcard__rows li{ display:flex; gap:.7rem; font-size:.85rem; color:var(--ink-soft); }
.bcard__rows .ico{ color:var(--red); flex-shrink:0; margin-top:2px; }
.bcard__dir{ display:inline-flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:700; color:var(--ink); border:1.5px solid var(--ink); padding:.55rem 1.2rem; border-radius:var(--r); transition:all var(--t); }
.bcard__dir:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   CERTIFICATION CARD
   ============================================================ */
.certgrid{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:34rem; margin-inline:auto; }
@media (min-width:768px){ .certgrid{ grid-template-columns:repeat(2,1fr); max-width:54rem; } }
@media (min-width:1024px){ .certgrid{ grid-template-columns:repeat(3,1fr); max-width:none; } }
.certcard{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--r); padding:1.8rem; transition:box-shadow var(--t); }
.certcard:hover{ box-shadow:var(--sh-2); }
.certcard__icon{ color:var(--red); margin-bottom:1rem; }
.certcard h3{ font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.certcard__sub{ font-size:.86rem; color:var(--ink-soft); margin-bottom:.4rem; }
.certcard__ar{ font-size:.9rem; color:var(--ink); font-weight:500; margin-bottom:.6rem; }
.certcard__issuer{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line); }
.certcard__issuer .k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.certcard__issuer .v{ font-size:.86rem; font-weight:700; }

/* Certificate-document card (gold top bar, seal) — shared home + about */
.cert-doc{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.8rem 1.8rem; box-shadow:var(--sh-1); transition:box-shadow var(--t), transform var(--t); }
.cert-doc::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:#C8A84B; }
.cert-doc:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); }
/* Header row: issuer logo (left) + small gold seal (confirmation badge) */
.cert-doc__head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.cert-doc__logo{ display:flex; align-items:center; justify-content:center; height:56px; min-width:56px; padding:.4rem .5rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.cert-doc__logo img{ max-height:48px; max-width:88px; width:auto; height:auto; object-fit:contain; display:block; }
.cert-doc__seal{ display:inline-flex; color:#C8A84B; }
.cert-doc__seal svg{ width:24px; height:24px; }
.cert-doc__title{ font-size:1.25rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.cert-doc__sub{ font-size:.88rem; color:var(--ink-soft); margin-bottom:.4rem; }
.cert-doc__ar{ font-size:.9rem; color:var(--ink); font-weight:500; margin-bottom:.4rem; }
.cert-doc__issuer{ margin-top:.7rem; padding-top:.8rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.1rem; }
.cert-doc__issuer .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.cert-doc__issuer .v{ font-size:.85rem; font-weight:700; color:var(--ink); }
.cert-doc__date{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); margin-top:.5rem; }
.cert-doc__btn{ margin-top:1.2rem; display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.3rem; border:1px solid #C8A84B; color:#9a7d2e; background:transparent; border-radius:var(--r); font-size:.85rem; font-weight:600; transition:all var(--t); }
.cert-doc__btn .ar{ transition:transform var(--t); }
.cert-doc__btn:hover{ background:#C8A84B; color:#fff; }
.cert-doc__btn:hover .ar{ transform:translateX(3px); }

/* Certificate lightbox */
.cert-lb{ position:fixed; inset:0; z-index:400; display:none; }
.cert-lb.open{ display:block; }
.cert-lb__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.88); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:fade .25s ease; }
.cert-lb__panel{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; padding:1.5rem; }
.cert-lb__close{ position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.cert-lb__close:hover{ background:var(--red); transform:scale(1.06); }
/* The certificate document/image — gold framed, scales in on open */
.cert-lb__doc{ display:inline-flex; transform:scale(.85); opacity:0; }
.cert-lb.open .cert-lb__doc{ animation:certIn .3s ease forwards; }
@keyframes certIn{ to{ transform:scale(1); opacity:1; } }
.cert-lb__img{ display:block; max-width:80vw; max-height:85vh; object-fit:contain; border:3px solid #C8A84B; border-radius:4px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.cert-lb__doc svg{ display:block; width:min(760px,90vw); height:auto; border:3px solid #C8A84B; border-radius:4px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.cert-lb__actions{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }
/* Gold download button (matches the certificate-card accent) */
.cert-lb__dl{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.5rem; border:1px solid #C8A84B; border-radius:var(--r); font-size:.88rem; font-weight:600; color:#C8A84B; background:transparent; transition:all var(--t); }
.cert-lb__dl:hover{ background:#C8A84B; color:#fff; }
.cert-lb__closebtn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; border:1px solid rgba(255,255,255,.4); border-radius:var(--r); font-size:.88rem; font-weight:600; color:#fff; background:transparent; transition:all var(--t); }
.cert-lb__closebtn:hover{ background:#fff; color:var(--ink); }

/* ============================================================
   ICOM WORDMARK (the "O" is red, inside one connected word)
   ============================================================ */
.icom-word{ display:inline-block; font-weight:900; font-size:1.25rem; letter-spacing:.02em; line-height:1; color:var(--ink); }
.icom-word .o{ color:var(--red); }

/* ============================================================
   PARTNERS MARQUEE
   ============================================================ */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); }
.marquee__track{ display:flex; gap:1.5rem; width:max-content; animation:scroll 24s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.pchip{ flex-shrink:0; width:11rem; height:5.5rem; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:all var(--t); }
.pchip--feat{ background:var(--ink); border-color:var(--ink); }
.pchip--feat .icom-word{ color:#fff; }
.pchip:hover{ box-shadow:var(--sh-2); }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.statcard{ background:#fff; padding:2.2rem 1rem; text-align:center; }
.statcard .num{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:900; color:var(--ink); }
.statcard .num b{ color:var(--red); }
.statcard .lbl{ font-size:.82rem; color:var(--ink-faint); margin-top:.4rem; }

/* ============================================================
   QUICK INFO CARDS (home)
   ============================================================ */
.quick{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:600px){ .quick{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .quick{ grid-template-columns:repeat(4,1fr); } }
.qcard{ display:flex; align-items:center; gap:1rem; padding:1.5rem; background:#fff; transition:background var(--t); }
a.qcard:hover{ background:var(--gray); }
.qcard .ico{ color:var(--red); flex-shrink:0; }
.qcard b{ display:block; font-size:.95rem; font-weight:700; color:var(--ink); }
.qcard span{ font-size:.8rem; color:var(--ink-faint); }

/* ============================================================
   FORM + CONTACT INFO CARDS (shared: home + contact)
   ============================================================ */
.form{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2rem; display:grid; gap:1.2rem; }
.form__row{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media (min-width:560px){ .form__row{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; }
.field label{ font-size:.82rem; font-weight:500; margin-bottom:.4rem; }
.field input,.field textarea{ padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--r); font-size:.9rem; transition:all var(--t); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint); }
.field textarea{ resize:vertical; min-height:7rem; }
.form button[type=submit]{ background:var(--red); color:#fff; padding:.95rem; border-radius:var(--r); font-weight:500; font-size:.95rem; transition:all var(--t); }
.form button[type=submit]:hover{ background:var(--red-dark); box-shadow:var(--sh-2); }
.form__note{ font-size:.85rem; text-align:center; min-height:1.2rem; }
.form__note.ok{ color:#15803d; } .form__note.err{ color:var(--red); }
.igrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.icard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; transition:all var(--t); }
.icard:hover{ box-shadow:var(--sh-1); border-color:var(--red); }
.icard .ico{ width:40px; height:40px; background:var(--red-tint); color:var(--red); border-radius:var(--r); display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; }
.icard .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:.2rem; }
.icard .v{ font-size:.85rem; font-weight:700; color:var(--ink); }
.icard a.v:hover{ color:var(--red); }
.map{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; height:16rem; }
.map iframe{ width:100%; height:100%; border:0; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.totop{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:90; width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); opacity:0; visibility:hidden; transform:translateY(10px); transition:all var(--t); }
.totop.vis{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--red); }