/* ==========================================================================
   SUNMAT AND SON INSTRUMENT COMPANY — DESIGN SYSTEM
   Built & maintained by Manomite Limited.
   ========================================================================== */

:root{
  /* Brand colors */
  --navy-950:#01173f;   /* deepest text / footer base */
  --navy-900:#012875;   /* primary brand navy (dominant identity color) */
  --navy-700:#013e8e;
  --blue-600:#005bac;   /* interactive blue */
  --blue-500:#0179c7;   /* bright accent blue (gradients, hover) */
  --blue-100:#eaf3fb;   /* pale blue tint for section backgrounds */
  --green-600:#4da81c;  /* brand green — reserved for CTAs / verified / success */
  --green-500:#7fba0a;
  --green-100:#f0f8e6;

  /* Neutrals — the site is built mostly from these */
  --white:#ffffff;
  --paper:#fafbfc;      /* off-white section background, not pure white */
  --line:#e6eaee;       /* hairline borders */
  --ink-900:#0d1520;    /* body text */
  --ink-600:#4a5568;    /* secondary text */
  --ink-400:#8a94a3;    /* tertiary / captions */

  /* Type */
  --font-display:'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Rhythm */
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(1,23,63,.06), 0 1px 1px rgba(1,23,63,.04);
  --shadow-md:0 8px 24px -8px rgba(1,23,63,.14);
  --shadow-lg:0 24px 60px -16px rgba(1,23,63,.22);
  --ease-soft:cubic-bezier(.22,.61,.36,1); /* "soft like butter" easing */
}

/* --------------------------------- 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;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  margin:0;
  letter-spacing:-0.02em;
  line-height:1.08;
}

/* eyebrow / spec-label — mono, tracked out, like a reading on an instrument */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--green-600);
  box-shadow:0 0 0 3px var(--green-100);
}

.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px;}
@media(min-width:768px){.container{padding-inline:40px;}}

section{padding:88px 0;}
@media(max-width:767px){section{padding:56px 0;}}

/* -------------------------------- Buttons -------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:var(--navy-900);
  color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{background:var(--navy-700);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-accent{
  background:linear-gradient(135deg,var(--green-600),var(--green-500));
  color:var(--white);
  box-shadow:0 8px 20px -8px rgba(77,168,28,.55);
}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(77,168,28,.6);}
.btn-ghost{
  background:transparent;
  color:var(--navy-900);
  border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--navy-900);background:var(--paper);}
.btn-sm{padding:10px 18px;font-size:.85rem;}

/* --------------------------------- Navbar --------------------------------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled{border-color:var(--line);box-shadow:0 4px 24px -12px rgba(1,23,63,.12);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;color:var(--navy-900);font-size:1.05rem;}
.nav-logo img{height:38px;width:auto;}
.nav-links{display:none;align-items:center;gap:2px;}
.nav-links a{
  padding:10px 16px;border-radius:var(--radius-pill);
  font-size:.92rem;font-weight:600;color:var(--ink-600);
  transition:background .25s ease, color .25s ease;
}
.nav-links a:hover, .nav-links a.active{background:var(--blue-100);color:var(--navy-900);}
@media(min-width:960px){.nav-links{display:flex;}}
.nav-cta{display:none;align-items:center;gap:10px;}
@media(min-width:960px){.nav-cta{display:flex;}}
.nav-burger{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--white);}
@media(min-width:960px){.nav-burger{display:none;}}

.mobile-menu{
  position:fixed;inset:76px 0 0 0;z-index:99;
  background:var(--white);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
  overflow-y:auto;
}
.mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.mobile-menu a{display:block;padding:18px 24px;font-size:1.1rem;font-weight:700;color:var(--navy-900);border-bottom:1px solid var(--line);font-family:var(--font-display);}

/* --------------------------------- Footer --------------------------------- */
.site-footer{background:var(--navy-950);color:#c9d3e0;padding:72px 0 28px;}
.site-footer h4{color:var(--white);font-size:.95rem;letter-spacing:.02em;margin-bottom:18px;}
.site-footer a{color:#a9b6c9;transition:color .2s ease;font-size:.92rem;}
.site-footer a:hover{color:var(--white);}
.footer-grid{display:grid;gap:40px;grid-template-columns:1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-links{display:flex;flex-direction:column;gap:12px;}
.footer-bottom{
  margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:.82rem;color:#8493ab;
}

.footer-social{display:flex;gap:10px;margin-top:6px;}
.footer-social a{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:#c9d3e0;font-size:15px;transition:all .25s ease;
}
.footer-social a:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}

/* Zionmatrix verified badge */
.verified-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 8px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.verified-badge .dot{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--green-500),var(--green-600));
  color:var(--white);flex-shrink:0;
}
.verified-badge .dot i{font-size:14px;}
.verified-badge .txt{font-size:.78rem;line-height:1.25;color:#c9d3e0;}
.verified-badge .txt b{color:var(--white);font-weight:700;}

/* ------------------------------ Scroll reveal ------------------------------ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

.calib{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:460px;
  margin-inline:auto;
  perspective:1400px;
}
.calib-stage{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  animation:calib-drift 22s ease-in-out infinite;
}
@keyframes calib-drift{
  0%,100%{transform:rotateX(58deg) rotateZ(0deg);}
  50%{transform:rotateX(52deg) rotateZ(360deg);}
}
.calib-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(1,40,117,.16);
  transform-style:preserve-3d;
}
.calib-ring.r1{inset:0;   border-color:rgba(1,91,172,.28); border-width:1.5px;}
.calib-ring.r2{inset:11%; border-color:rgba(1,121,199,.35); border-style:dashed;}
.calib-ring.r3{inset:22%; border-color:rgba(77,168,28,.4); border-width:1.5px;}
.calib-ring.r4{inset:33%; border-color:rgba(1,40,117,.5); background:rgba(234,243,251,.5);}
.calib-tick{
  position:absolute; top:-3px; left:50%; width:2px; height:10px;
  background:var(--blue-600); transform-origin:1px 232px;
}
.calib-core{
  position:absolute;inset:38%;
  border-radius:50%;
  background:linear-gradient(145deg,var(--navy-900),var(--blue-600));
  box-shadow:0 20px 46px -12px rgba(1,40,117,.55), inset 0 2px 6px rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  transform:translateZ(40px);
}
.calib-core i{color:#fff;font-size:34px;}
.calib-node{
  position:absolute;
  width:auto;
  padding:8px 12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--navy-900);
  display:flex;align-items:center;gap:6px;
  transform:translateZ(60px);
  animation:calib-float 6s ease-in-out infinite;
}
.calib-node b{font-size:.86rem;}
.calib-node.n1{top:2%;left:-6%;animation-delay:0s;}
.calib-node.n2{bottom:8%;right:-8%;animation-delay:1.4s;}
.calib-node.n3{bottom:-4%;left:14%;animation-delay:2.8s;}
@keyframes calib-float{
  0%,100%{transform:translateZ(60px) translateY(0);}
  50%{transform:translateZ(60px) translateY(-10px);}
}
.calib-node .dot-live{width:7px;height:7px;border-radius:50%;background:var(--green-600);box-shadow:0 0 0 3px var(--green-100);flex-shrink:0;animation:pulse-live 1.8s ease-in-out infinite;}
@keyframes pulse-live{0%,100%{opacity:1;}50%{opacity:.35;}}

@media(max-width:767px){
  .calib{max-width:300px;}
  .calib-node{font-size:.64rem;padding:6px 9px;}
}

/* -------------------------------- Hero -------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:64px;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--blue-100) 0%, rgba(255,255,255,0) 55%);
}
.hero-grid{display:grid;gap:56px;align-items:center;grid-template-columns:1fr;}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:40px;}}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);}
.hero p.lead{font-size:1.15rem;color:var(--ink-600);line-height:1.65;max-width:52ch;margin-top:20px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-stats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap;}
.hero-stat b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--navy-900);}
.hero-stat span{font-size:.82rem;color:var(--ink-400);}

/* ------------------------------ Category cards ------------------------------ */
.cat-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:640px){.cat-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.cat-grid{grid-template-columns:repeat(5,1fr);}}
.cat-card{
  position:relative;
  padding:28px 22px;
  border-radius:var(--radius-md);
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background .5s var(--ease-soft);
  overflow:hidden;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);background:var(--white);}
.cat-card .ic{
  width:52px;height:52px;border-radius:14px;
  background:var(--blue-100);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:background .4s ease, color .4s ease;
}
.cat-card:hover .ic{background:var(--navy-900);color:#fff;}
.cat-card .ic i{font-size:24px;}
.cat-card h3{font-size:1.02rem;margin-bottom:6px;}
.cat-card p{font-size:.85rem;color:var(--ink-600);line-height:1.5;margin:0;}
.cat-card .go{position:absolute;top:22px;right:22px;color:var(--ink-400);transition:transform .35s var(--ease-soft), color .35s ease;}
.cat-card:hover .go{transform:translate(3px,-3px);color:var(--blue-600);}

/* ------------------------------ Feature rows ------------------------------ */
.feat-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media(min-width:768px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
.feat{display:flex;gap:18px;}
.feat .ic{
  flex-shrink:0;width:48px;height:48px;border-radius:13px;
  background:var(--white);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);box-shadow:var(--shadow-sm);
}
.feat h4{font-size:1.05rem;margin-bottom:6px;}
.feat p{color:var(--ink-600);font-size:.92rem;line-height:1.6;margin:0;}

/* ------------------------------ Section headers ------------------------------ */
.sec-head{max-width:640px;margin-bottom:48px;}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:14px;}
.sec-head p{color:var(--ink-600);font-size:1.02rem;margin-top:14px;line-height:1.6;}
.sec-head.center{margin-inline:auto;text-align:center;}

/* ------------------------------ Media placeholder ------------------------------
   Honest, styled placeholders for real photography/video the client will
   add. Never fake stock photography — this signals exactly what goes here. */
.media-slot{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    linear-gradient(135deg, var(--navy-900) 0%, var(--blue-600) 55%, var(--blue-500) 100%);
  min-height:260px;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}
.media-slot::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(127,186,10,.22) 0, transparent 45%);
  z-index:0;
}
.media-slot .grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:34px 34px;
  z-index:0;
}
.media-slot .label{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.92);text-align:center;padding:24px;
}
.media-slot .label i{font-size:38px;}
.media-slot .label b{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85;}
.media-slot .label span{font-size:.8rem;opacity:.7;max-width:26ch;}

/* ------------------------------ CTA banner ------------------------------ */
.cta-banner{
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--navy-900) 0%, var(--navy-700) 60%, var(--blue-600) 100%);
  padding:60px 44px;
  position:relative;overflow:hidden;
  color:#fff;
}
.cta-banner::after{
  content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(127,186,10,.35), transparent 70%);
}
.cta-banner h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);}
.cta-banner p{color:rgba(255,255,255,.78);margin-top:12px;max-width:48ch;}

/* ------------------------------ Modal (Request form) ------------------------------ */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(1,20,50,.55);
  backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-soft);
}
@media(min-width:640px){.modal-overlay{align-items:center;}}
.modal-overlay.is-open{opacity:1;pointer-events:auto;}
.modal-box{
  width:100%;max-width:520px;
  background:#fff;border-radius:24px 24px 0 0;
  padding:32px 28px 28px;
  transform:translateY(40px);transition:transform .45s var(--ease-soft);
  max-height:92vh;overflow-y:auto;
}
@media(min-width:640px){.modal-box{border-radius:24px;}}
.modal-overlay.is-open .modal-box{transform:translateY(0);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-900);margin-bottom:6px;}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);font:inherit;color:var(--ink-900);background:var(--paper);
  transition:border-color .25s ease, background .25s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-500);background:#fff;outline:none;}
.field .hint{font-size:.74rem;color:var(--ink-400);margin-top:5px;}

/* ------------------------------ Utility ------------------------------ */
.text-accent-green{color:var(--green-600);}
.text-muted{color:var(--ink-600);}
.badge-soft{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--green-100);color:var(--green-600);
  font-size:.76rem;font-weight:700;
}
.hairline{border:none;border-top:1px solid var(--line);}

/* =========================================================================
   INSTRUMENT LIST + DETAIL PAGE COMPONENTS
   ========================================================================= */

/* Category filter pills */
.pill{
  padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:#fff;
  font-size:.85rem;font-weight:600;color:var(--ink-600);
  transition:all .3s var(--ease-soft); white-space:nowrap;
}
.pill:hover{border-color:var(--blue-500);color:var(--navy-900);}
.pill.is-active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}

/* Search bar */
.search-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:#fff;
  max-width:360px;width:100%;
}
.search-bar input{border:none;outline:none;background:transparent;width:100%;font:inherit;}
.search-bar i{color:var(--ink-400);font-size:18px;}

/* Slider — soft, buttery motion */
.slider{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--paper);
  border:1px solid var(--line);
  touch-action:pan-y;
}
.slider-track{
  display:flex;height:100%;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.slide{min-width:100%;height:100%;}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy-900);transition:transform .3s var(--ease-soft), background .3s ease;
  z-index:2;
}
.slider-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.slider-arrow.left{left:14px;}
.slider-arrow.right{right:14px;}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.slider-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);border:none;padding:0;
  transition:all .35s var(--ease-soft);
}
.slider-dot.is-active{background:var(--navy-900);width:22px;border-radius:5px;}

/* Specs box */
.specs-box{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
.spec-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:13px 18px;font-size:.88rem;
  border-bottom:1px solid var(--line);
}
.spec-row:last-child{border-bottom:none;}
.spec-row span{color:var(--ink-600);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
.spec-row b{color:var(--navy-900);text-align:right;}

/* Sub-page hero (for About / Instruments / Service / Contact / Blog) */
.page-hero{
  padding:56px 0 40px;
  background:linear-gradient(180deg, var(--blue-100) 0%, rgba(255,255,255,0) 100%);
}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);margin-top:12px;}
.page-hero p{color:var(--ink-600);margin-top:14px;max-width:60ch;font-size:1.05rem;line-height:1.65;}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-400);}
.crumbs a{color:var(--ink-600);}
.crumbs a:hover{color:var(--blue-600);}

/* Timeline (About page) */
.timeline{position:relative;padding-left:32px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);}
.timeline-item{position:relative;padding-bottom:36px;}
.timeline-item::before{
  content:"";position:absolute;left:-32px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--white);border:3px solid var(--blue-600);
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item .yr{font-family:var(--font-mono);font-size:.78rem;color:var(--blue-600);font-weight:600;letter-spacing:.06em;}
.timeline-item h4{margin-top:6px;font-size:1.02rem;}
.timeline-item p{color:var(--ink-600);font-size:.9rem;margin-top:4px;line-height:1.6;}

/* Value cards (About) */
.value-card{padding:26px 22px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--white);}
.value-card .ic{width:46px;height:46px;border-radius:12px;background:var(--green-100);color:var(--green-600);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}

/* Process steps (Service page) */
.step-row{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);}
.step-row:last-child{border-bottom:none;}
.step-num{
  font-family:var(--font-mono);font-weight:600;font-size:.95rem;color:var(--white);
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--navy-900);display:flex;align-items:center;justify-content:center;
}
.step-row h4{font-size:1.03rem;margin-bottom:6px;}
.step-row p{color:var(--ink-600);font-size:.9rem;line-height:1.6;margin:0;}

/* Service cards */
.svc-card{
  border:1px solid var(--line);border-radius:var(--radius-md);padding:28px;
  transition:box-shadow .4s var(--ease-soft), transform .4s var(--ease-soft);
  background:#fff;
}
.svc-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.svc-card .ic{width:52px;height:52px;border-radius:14px;background:var(--blue-100);color:var(--navy-900);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.svc-card h3{font-size:1.08rem;margin-bottom:8px;}
.svc-card p{color:var(--ink-600);font-size:.9rem;line-height:1.6;margin-bottom:16px;}
.svc-card ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.svc-card ul li{display:flex;align-items:flex-start;gap:8px;font-size:.86rem;color:var(--ink-600);}
.svc-card ul li i{color:var(--green-600);margin-top:3px;flex-shrink:0;}

/* Contact page */
.contact-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;background:var(--paper);}
.contact-card .ic{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue-600);margin-bottom:14px;}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);}
.map-frame iframe{width:100%;height:100%;min-height:380px;border:0;display:block;}

/* Blog page */
.blog-hero-card{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}

@media(max-width:767px){
  .step-row{gap:14px;}
  .cta-banner{padding:40px 26px;}
}