/* WordPress Theme Metadata */
/*
Theme Name: Web By Steps
Theme URI: https://webbysteps.com
Author: Web By Steps
Author URI: https://webbysteps.com
Description: Premium liquid-glass design WordPress theme for Web By Steps.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: webbysteps
*/

  :root{

    /* Premium Color Palette */

    --bg: #f8e7c9;       /* Cream background */

    --primary: #064e3b;  /* Emerald Dark Green */

    --primary-light: #0d9488; /* Teal accent */

    --primary-dark: #022c22;  /* Deepest green */

    

    --text: #064e3b;

    --text-dim: rgba(6, 78, 59, 0.7);

    --text-faint: rgba(6, 78, 59, 0.4);

    

    --line: rgba(6, 78, 59, 0.1);

    

    /* Liquid Glass Variables */

    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);

    --glass-border: rgba(255, 255, 255, 0.6);

    --glass-shadow: 0 16px 40px rgba(6, 78, 59, 0.08);

    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.2);

    

    --radius: 24px;

    --maxw: 1460px;

  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{scroll-behavior:smooth;}

  body{

    background:var(--bg);

    color:var(--text);

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

  }

  ::selection{background:var(--primary);color:var(--bg);}

  h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--text);}

  a{color:inherit;text-decoration:none;}

  img{max-width:100%;display:block;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

  .mono{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0.05em;}

  .accent-text{

    background: linear-gradient(135deg, var(--primary), var(--primary-light));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  

  /* Soft Orbs for Liquid Glass Effect */

  .orb {

    position: fixed; border-radius: 50%; filter: blur(100px); z-index: -1; pointer-events: none; opacity: 0.6;

  }

  .orb-1 { top: -10%; left: -5%; width: 50vw; height: 50vw; background: rgba(255, 255, 255, 0.8); animation: floatOrb 12s ease-in-out infinite alternate; }

  .orb-2 { bottom: -10%; right: -10%; width: 45vw; height: 45vw; background: rgba(13, 148, 136, 0.2); animation: floatOrb 15s ease-in-out infinite alternate-reverse; }

  .orb-3 { top: 40%; left: 30%; width: 30vw; height: 30vw; background: rgba(255, 255, 255, 0.6); animation: floatOrb 10s ease-in-out infinite alternate; }

  @keyframes floatOrb {

    0% { transform: translate(0, 0) scale(1); }

    100% { transform: translate(60px, 80px) scale(1.15); }

  }



  .eyebrow{

    font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;

    color:var(--primary);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px; font-weight:600;

  }

  .eyebrow::before{content:"";width:30px;height:2px;background:var(--primary);}



  .btn{

    display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:12px;

    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:16px;cursor:pointer;

    transition:all .4s cubic-bezier(0.2, 0.8, 0.2, 1);

    white-space:nowrap; position:relative; overflow:hidden;

  }

  .btn:active{transform:scale(.95);}

  .btn-primary{

    background: var(--primary); color: var(--bg); border: none;

    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.25);

  }

  .btn-primary:hover{

    background: var(--primary-dark);

    box-shadow: 0 15px 35px rgba(6, 78, 59, 0.35); transform:translateY(-3px);

  }

  .btn-ghost{

    background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);

    border: 1px solid var(--glass-border); color: var(--primary); 

    box-shadow: var(--glass-shadow);

  }

  .btn-ghost:hover{

    background: rgba(255,255,255,0.6); border-color: #fff;

    transform:translateY(-3px); box-shadow: 0 12px 30px rgba(6, 78, 59, 0.1);

  }


a.logo img {
    width: 160px;
    height: auto;
}
  /* ---------- Header ---------- */

  header{

    position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 0;

    background:transparent; transition:all .5s cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  header.scrolled{

    padding:16px 0;

    background: rgba(248, 231, 201, 0.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);

    border-bottom: 1px solid rgba(255,255,255,0.4); box-shadow:0 10px 40px rgba(6,78,59,0.05);

  }

  nav{display:flex;align-items:center;justify-content:space-between;}

  .logo{ display:flex; align-items:center; text-decoration:none; }

  .logo svg { display:block; height:36px; width:auto; }

  .nav-links{display:flex;align-items:center;gap:40px;}

  .nav-links a:not(.btn){font-size:15px; font-weight:600; color:var(--text-dim);transition:all .3s;position:relative;}

  .nav-links a:not(.btn):hover{color:var(--primary);}

  #burger{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:70;}

  #burger span{width:26px;height:2px;background:var(--primary);display:block;transition:.3s;}

  @media (max-width:900px){

    .nav-links{position:fixed;top:0;right:0;height:100vh;width:80%;max-width:360px;

      background:rgba(248, 231, 201, 0.9); backdrop-filter:blur(30px);

      border-left:1px solid rgba(255,255,255,0.5);flex-direction:column;justify-content:center;

      align-items:flex-start;padding:50px;gap:30px;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);

      box-shadow:-20px 0 50px rgba(6,78,59,0.1);}

    .nav-links.open{transform:translateX(0);}

    .nav-links a{font-size:22px;}

    #burger{display:flex;}

  }



  /* ---------- Hero ---------- */

  #hero{position:relative;padding:220px 0 140px;overflow:visible; perspective: 1000px;}

  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}

  .hero-inner h1{font-size:clamp(46px,5vw,72px);margin-bottom:24px; line-height: 1.05;}

  .hero-inner p{font-size:19px;color:var(--text-dim);max-width:520px;margin-bottom:40px;line-height:1.7;}

  .hero-cta{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:40px;}

  .hero-chips{display:flex;flex-wrap:wrap;gap:12px;}

  .hero-chips span{

    display:inline-flex;align-items:center;gap:6px;

    font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:var(--primary);

    background:var(--glass-bg); backdrop-filter: blur(10px); border:1px solid var(--glass-border);

    padding:8px 16px;border-radius:999px; font-weight:600; box-shadow: 0 4px 12px rgba(6,78,59,0.05);

  }

  .hero-chips span i{width:14px;height:14px;}



  /* hero 3D scene (Liquid Glass adapted) */

  .hero-visual{position:relative;height:500px;perspective:1500px; transform-style: preserve-3d;}

  .mock{

    position:absolute; border-radius:24px;

    background: var(--glass-bg);

    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border);

    box-shadow: var(--glass-shadow), var(--glass-inset);

    transform-style:preserve-3d; transition:transform .2s ease-out;

  }

  .mock-browser{width:400px;height:260px;top:30px;left:-20px;transform:translateZ(0px) rotateY(15deg) rotateX(10deg); animation:float1 8s ease-in-out infinite;}

  .mock-phone{width:150px;height:300px;top:110px;right:-10px;transform:translateZ(80px) rotateY(-15deg) rotateX(5deg); animation:float2 9s ease-in-out infinite;}

  .mock-rank{width:300px;height:200px;bottom:-20px;left:70px;transform:translateZ(120px) rotateY(5deg) rotateX(15deg); animation:float3 7.5s ease-in-out infinite;}

  

  @keyframes float1{0%,100%{transform:translateZ(0px) rotateY(15deg) rotateX(10deg) translateY(0);}50%{transform:translateZ(0px) rotateY(15deg) rotateX(10deg) translateY(-20px);}}

  @keyframes float2{0%,100%{transform:translateZ(80px) rotateY(-15deg) rotateX(5deg) translateY(0);}50%{transform:translateZ(80px) rotateY(-15deg) rotateX(5deg) translateY(-25px);}}

  @keyframes float3{0%,100%{transform:translateZ(120px) rotateY(5deg) rotateX(15deg) translateY(0);}50%{transform:translateZ(120px) rotateY(5deg) rotateX(15deg) translateY(-15px);}}



  .mock > * { transform: translateZ(30px); }



  .mock-browser .bar{display:flex;gap:6px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.4);align-items:center; transform: translateZ(20px);}

  .mock-browser .bar i{width:10px;height:10px;border-radius:50%;background:#e2e8f0;display:block;}

  .mock-browser .bar i:nth-child(1){background:#ef4444;}

  .mock-browser .bar i:nth-child(2){background:#eab308;}

  .mock-browser .bar i:nth-child(3){background:#22c55e;}

  .mock-browser .url{

    margin-left:12px;flex:1;background:rgba(255,255,255,0.5);border-radius:8px;height:24px;

    font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;color:var(--primary); font-weight:600;

    display:flex;align-items:center;padding:0 12px; border:1px solid rgba(255,255,255,0.6);

  }

  .mock-browser .body{padding:24px; transform: translateZ(40px);}

  .mock-browser .hero-block{height:70px;border-radius:12px;background:var(--primary);margin-bottom:14px; box-shadow: 0 10px 20px rgba(6,78,59,0.2);}

  .mock-browser .line{height:8px;border-radius:4px;background:rgba(6,78,59,0.1);margin-bottom:12px;}

  .mock-browser .line.w60{width:60%;} .mock-browser .line.w80{width:80%;} .mock-browser .line.w40{width:40%;}



  .mock-phone{padding:18px 16px;display:flex;flex-direction:column;gap:14px;}

  .mock-phone .notch{width:46px;height:6px;border-radius:4px;background:rgba(6,78,59,0.2);margin:0 auto 10px; transform: translateZ(10px);}

  .mock-phone .row{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.6);border-radius:12px;padding:12px; transform: translateZ(30px); transition: .3s;}

  .mock-phone .row:hover{background:rgba(255,255,255,0.8); transform: translateZ(40px);}

  .mock-phone .row .dot{width:20px;height:20px;border-radius:6px;background:var(--primary-light);flex:none; box-shadow:0 4px 10px rgba(13,148,136,0.3);}

  .mock-phone .row .bars{flex:1;}

  .mock-phone .row .bars i{display:block;height:6px;border-radius:3px;background:rgba(6,78,59,0.15);margin-bottom:6px;}

  .mock-phone .cta{margin-top:auto;height:40px;border-radius:12px;background:var(--primary); transform: translateZ(40px); box-shadow: 0 8px 16px rgba(6,78,59,0.2);}



  .mock-rank{padding:24px 28px;}

  .mock-rank .breadcrumb{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;color:var(--primary-light);font-weight:600;margin-bottom:8px; transform: translateZ(20px);}

  .mock-rank .title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;color:var(--text);margin-bottom:12px; transform: translateZ(40px);}

  .mock-rank .desc{height:6px;border-radius:3px;background:rgba(6,78,59,0.1);margin-bottom:10px; transform: translateZ(30px);}

  .mock-rank .desc.w90{width:90%;} .mock-rank .desc.w70{width:70%;}

  .mock-rank .badge{

    position:absolute;top:24px;right:28px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px; font-weight:600;

    background:var(--primary);color:var(--bg);

    border-radius:999px;padding:6px 14px; transform: translateZ(50px); box-shadow: 0 4px 12px rgba(6,78,59,0.2);

  }



  .tag{

    position:absolute;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.1em; font-weight:700;

    color:var(--primary);

    background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border);

    padding:10px 20px;border-radius:999px;box-shadow:var(--glass-shadow); display:inline-flex;align-items:center;gap:8px;

    transform: translateZ(150px); animation: floatTag 6s ease-in-out infinite alternate;

  }

  .tag-web{top:15%;left:-15%; animation-delay: 0s;}

  .tag-app{top:50%;right:-15%; animation-delay: 1s;}

  .tag-seo{bottom:5%;left:10%; animation-delay: 2s;}

  @keyframes floatTag { 0% { transform: translateZ(150px) translateY(0); } 100% { transform: translateZ(150px) translateY(-15px); } }



  @media (max-width:1024px){ .hero-grid{grid-template-columns:1fr;} .hero-visual{margin-top:60px; height: 400px;} .mock-browser{left:50%; margin-left:-200px;} }

  @media (max-width:520px){ .hero-visual{transform:scale(.7);transform-origin:top center;height:300px;} }



  /* ---------- generic section ---------- */

  section{position:relative;padding:140px 0; z-index:2;}

  .section-head{max-width:680px;margin-bottom:70px;}

  .section-head.center{margin-left:auto;margin-right:auto;text-align:center; display:flex; flex-direction:column; align-items:center;}

  .section-head h2{font-size:clamp(32px,5vw,50px);}

  .section-head p{color:var(--text-dim);font-size:18px;margin-top:20px;line-height:1.7;}

  .reveal{opacity:0;transform:translateY(40px) translateZ(0);transition:opacity 0.8s cubic-bezier(.2,.8,.2,1),transform 0.8s cubic-bezier(.2,.8,.2,1);}

  .reveal.in{opacity:1;transform:translateY(0) translateZ(0);}



  /* ---------- About Section (Redesigned Liquid Glass & Engineering Lab) ---------- */

  #about {

    background: linear-gradient(145deg, #04382a 0%, #022018 100%);

    border-radius: 40px;

    margin: 0 20px;

    padding: 120px 0;

    position: relative;

    overflow: hidden;

    color: #f8e7c9;

    box-shadow: 0 30px 80px rgba(6, 78, 59, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.1);

  }

  #about::before {

    content: '';

    position: absolute;

    top: -40%;

    right: -15%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(13, 148, 136, 0.25) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

  }

  #about::after {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(248, 231, 201, 0.12) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

  }



  .about-head {

    max-width: 820px;

    margin: 0 auto 60px;

    text-align: center;

  }

  #about .eyebrow-pill {

    color: #0d9488;

    background: rgba(13, 148, 136, 0.12);

    padding: 8px 20px;

    border-radius: 999px;

    border: 1px solid rgba(13, 148, 136, 0.3);

    margin-bottom: 24px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

  }

  #about h2 {

    color: #f8e7c9;

    font-size: clamp(34px, 4.5vw, 54px);

    line-height: 1.15;

    letter-spacing: -0.02em;

  }

  .about-accent {

    background: linear-gradient(135deg, #f8e7c9 0%, #2dd4bf 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  #about p.lead {

    font-size: 18px;

    color: rgba(248, 231, 201, 0.8);

    line-height: 1.75;

    margin-top: 20px;

  }



  /* About Layout Grid */

  .about-main-grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 40px;

    align-items: stretch;

    margin-bottom: 50px;

  }



  /* Interactive Code vs Builder Showcase */

  .about-interactive-card {

    background: rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(248, 231, 201, 0.15);

    border-radius: 28px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

    position: relative;

  }

  .about-tab-toggle {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    background: rgba(0, 0, 0, 0.35);

    padding: 6px;

    border-radius: 14px;

    margin-bottom: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);

  }

  .about-tab-btn {

    background: transparent;

    border: none;

    color: rgba(248, 231, 201, 0.6);

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13px;

    font-weight: 600;

    padding: 12px 14px;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

  }

  .about-tab-btn.active {

    background: rgba(13, 148, 136, 0.35);

    color: #fff;

    border: 1px solid rgba(45, 212, 191, 0.5);

    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.25);

  }

  .about-tab-btn:hover:not(.active) {

    color: #f8e7c9;

    background: rgba(255, 255, 255, 0.06);

  }



  /* Tab panels */

  .about-tab-content { display: none; flex-direction: column; gap: 20px; height: 100%; justify-content: space-between; }

  .about-tab-content.active { display: flex; animation: fadeInTab 0.4s ease forwards; }

  @keyframes fadeInTab {

    from { opacity: 0; transform: translateY(8px); }

    to { opacity: 1; transform: translateY(0); }

  }



  .perf-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    padding: 16px 20px;

  }

  .perf-score-badge {

    display: flex;

    align-items: center;

    gap: 14px;

  }

  .score-circle {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 800;

    font-size: 17px;

    flex-shrink: 0;

  }

  .score-circle.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; border: 2px solid #4ade80; box-shadow: 0 0 15px rgba(74, 222, 128, 0.3); }

  .score-circle.red { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 2px solid #f87171; box-shadow: 0 0 15px rgba(248, 113, 113, 0.3); }



  .perf-details { display: flex; flex-direction: column; gap: 2px; }

  .perf-details strong { font-size: 15px; color: #f8e7c9; font-family: 'Plus Jakarta Sans', sans-serif; }

  .perf-details span { font-size: 12px; color: rgba(248, 231, 201, 0.65); font-family: 'Plus Jakarta Sans', sans-serif; }



  /* Metrics mini grid */

  .about-metrics-mini {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }

  .metric-mini-item {

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 14px;

    padding: 14px;

  }

  .metric-mini-item .val {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 4px;

  }

  .val.green-txt { color: #2dd4bf; }

  .val.red-txt { color: #f87171; }

  .metric-mini-item .lbl {

    font-size: 12px;

    color: rgba(248, 231, 201, 0.6);

  }



  /* Code Terminal Box */

  .terminal-box {

    background: #011611;

    border: 1px solid rgba(13, 148, 136, 0.3);

    border-radius: 16px;

    padding: 16px 20px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12.5px;

    line-height: 1.65;

    overflow-x: auto;

    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);

  }

  .terminal-bar {

    display: flex;

    gap: 6px;

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  }

  .terminal-bar span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

  .t-red { background: #ef4444; }

  .t-yellow { background: #eab308; }

  .t-green { background: #22c55e; }

  

  .c-kw { color: #2dd4bf; font-weight: 600; }

  .c-fn { color: #facc15; }

  .c-str { color: #a7f3d0; }

  .c-comment { color: rgba(248, 231, 201, 0.45); font-style: italic; }

  .c-err { color: #f87171; }



  /* Bento 4 Pillars Grid */

  .about-pillars-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

  }

  .pillar-card {

    background: rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(248, 231, 201, 0.12);

    border-radius: 24px;

    padding: 28px 24px;

    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

  }

  .pillar-card:hover {

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(45, 212, 191, 0.4);

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

  }

  .pillar-num {

    position: absolute;

    top: 20px;

    right: 20px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12px;

    font-weight: 700;

    color: rgba(45, 212, 191, 0.6);

    background: rgba(13, 148, 136, 0.12);

    padding: 4px 10px;

    border-radius: 999px;

    border: 1px solid rgba(13, 148, 136, 0.25);

  }

  .pillar-icon {

    width: 52px;

    height: 52px;

    border-radius: 16px;

    background: linear-gradient(135deg, rgba(13, 148, 136, 0.3) 0%, rgba(6, 78, 59, 0.5) 100%);

    border: 1px solid rgba(45, 212, 191, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #2dd4bf;

    margin-bottom: 20px;

    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.2);

  }

  .pillar-card h4 {

    font-size: 18.5px;

    color: #f8e7c9;

    margin-bottom: 10px;

  }

  .pillar-card p {

    font-size: 14px;

    color: rgba(248, 231, 201, 0.7);

    line-height: 1.65;

  }



  /* Bottom Trust Strip inside About */

  .about-bottom-bar {

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid rgba(248, 231, 201, 0.15);

    border-radius: 20px;

    padding: 20px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

  }

  .about-status-pill {

    display: flex;

    align-items: center;

    gap: 12px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13.5px;

    color: #f8e7c9;

  }

  .status-dot-pulse {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);

    animation: pulseDot 2s infinite;

  }

  @keyframes pulseDot {

    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }

    70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }

    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }

  }



  @media (max-width: 1024px) {

    .about-main-grid { grid-template-columns: 1fr; gap: 36px; }

  }

  @media (max-width: 768px) {

    #about { margin: 0; border-radius: 0; padding: 80px 0; }

    .about-pillars-grid { grid-template-columns: 1fr; }

    .about-bottom-bar { flex-direction: column; text-align: center; }

  }



  /* ---------- Services Section Redesign ---------- */

  #services { padding: 120px 0; position: relative; }



  .svc-filter-bar {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 32px;

    margin-bottom: 50px;

  }

  .svc-filter-btn {

    background: rgba(255, 255, 255, 0.4);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid var(--glass-border);

    padding: 10px 22px;

    border-radius: 999px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--text-dim);

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: var(--glass-shadow);

  }

  .svc-filter-btn.active {

    background: var(--primary);

    color: var(--bg);

    border-color: var(--primary);

    box-shadow: 0 6px 20px rgba(6, 78, 59, 0.25);

  }

  .svc-filter-btn:hover:not(.active) {

    background: rgba(255, 255, 255, 0.7);

    color: var(--primary);

  }



  .svc-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

    perspective: 1200px;

  }

  .svc-card {

    background: var(--glass-bg);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border);

    border-radius: 28px;

    padding: 28px;

    box-shadow: var(--glass-shadow), var(--glass-inset);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);

    position: relative;

    overflow: hidden;

  }

  .svc-card:hover {

    background: rgba(255, 255, 255, 0.65);

    border-color: #fff;

    box-shadow: 0 25px 60px rgba(6, 78, 59, 0.12), inset 0 1px 0 #fff;

    transform: translateY(-10px);

  }



  .svc-img-wrap {

    position: relative;

    width: 100%;

    height: 180px;

    border-radius: 18px;

    overflow: hidden;

    margin-bottom: 24px;

    border: 1px solid rgba(255, 255, 255, 0.8);

  }

  .svc-img-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

  }

  .svc-card:hover .svc-img-wrap img {

    transform: scale(1.06);

  }

  .svc-cat-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    background: rgba(6, 78, 59, 0.85);

    backdrop-filter: blur(10px);

    color: var(--bg);

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 11px;

    font-weight: 700;

    padding: 4px 12px;

    border-radius: 999px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

  }



  .svc-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;

  }

  .svc-ic-box {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.8);

    border: 1px solid #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    box-shadow: 0 6px 16px rgba(6, 78, 59, 0.08);

    flex-shrink: 0;

  }

  .svc-card h3 {

    font-size: 21px;

    color: var(--primary);

    line-height: 1.25;

  }

  .svc-card p.svc-desc {

    color: var(--text-dim);

    font-size: 14.5px;

    line-height: 1.65;

    margin-bottom: 20px;

  }



  .svc-features-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 24px;

    padding-top: 14px;

    border-top: 1px solid rgba(6, 78, 59, 0.08);

  }

  .svc-feature-item {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 600;

    color: var(--primary);

  }

  .svc-feature-item i {

    color: var(--primary-light);

    flex-shrink: 0;

  }



  .svc-footer {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: auto;

  }

  .svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }

  .svc-tags span {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 11px;

    font-weight: 600;

    color: var(--primary);

    background: rgba(255, 255, 255, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.9);

    padding: 4px 12px;

    border-radius: 999px;

  }



  .svc-inquire-btn {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 12px 18px;

    border-radius: 12px;

    background: rgba(6, 78, 59, 0.08);

    border: 1px solid rgba(6, 78, 59, 0.15);

    color: var(--primary);

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 600;

    font-size: 13.5px;

    cursor: pointer;

    transition: all 0.3s ease;

  }

  .svc-card:hover .svc-inquire-btn {

    background: var(--primary);

    color: var(--bg);

    border-color: var(--primary);

    box-shadow: 0 6px 18px rgba(6, 78, 59, 0.2);

  }



  @media (max-width: 1024px) {

    .svc-grid { grid-template-columns: repeat(2, 1fr); }

  }

  @media (max-width: 680px) {

    .svc-grid { grid-template-columns: 1fr; }

  }



  /* ---------- Projects (Featured Work) Redesign ---------- */

  #projects { padding: 120px 0; position: relative; }

  

  .projects-header-bar {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 40px;

    flex-wrap: wrap;

    gap: 24px;

  }

  .projects-header-left h2 { font-size: clamp(32px, 4.5vw, 48px); margin-top: 10px; }

  

  /* Filter Tabs */

  .proj-filter-bar {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

    background: rgba(255, 255, 255, 0.4);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid var(--glass-border);

    padding: 6px;

    border-radius: 999px;

    box-shadow: var(--glass-shadow);

  }

  .proj-filter-btn {

    background: transparent;

    border: none;

    padding: 8px 18px;

    border-radius: 999px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--text-dim);

    cursor: pointer;

    transition: all 0.3s ease;

  }

  .proj-filter-btn.active {

    background: var(--primary);

    color: var(--bg);

    box-shadow: 0 4px 14px rgba(6, 78, 59, 0.25);

  }

  .proj-filter-btn:hover:not(.active) {

    color: var(--primary);

    background: rgba(255, 255, 255, 0.6);

  }



  /* Slider Wrapper */

  .proj-slider-wrap { 

    position: relative; width: 100%; border-radius: 36px; 

    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inset);

    overflow: hidden; 

  }

  .proj-slider { display: flex; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); align-items: stretch; }

  

  .proj-slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1.25fr; align-items: stretch; }

  

  /* Slide Left Info Box */

  .proj-slide-left {

    background: rgba(255, 255, 255, 0.35);

    border-right: 1px solid rgba(255, 255, 255, 0.5);

    padding: 56px 48px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 24px;

  }

  .proj-cat-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.1em;

    color: var(--primary-light);

    text-transform: uppercase;

  }

  .proj-slide-left h3 {

    font-size: clamp(26px, 3vw, 36px);

    color: var(--primary);

    line-height: 1.2;

    margin-top: 8px;

    margin-bottom: 12px;

  }

  .proj-desc-text {

    font-size: 15.5px;

    color: var(--text-dim);

    line-height: 1.7;

    margin-bottom: 16px;

  }

  

  /* Highlights Grid inside Slide */

  .proj-highlights {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 20px;

  }

  .proj-highlight-item {

    background: rgba(255, 255, 255, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 12px;

    padding: 10px 12px;

    font-size: 12.5px;

    font-weight: 600;

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: 6px;

  }

  

  /* Tech Stack Pills */

  .proj-tech-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

  .proj-tech-stack span {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 11.5px;

    font-weight: 600;

    color: var(--primary-dark);

    background: rgba(6, 78, 59, 0.08);

    border: 1px solid rgba(6, 78, 59, 0.15);

    padding: 5px 12px;

    border-radius: 999px;

  }

  

  .proj-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

  

  /* Slide Right Image & Watermark */

  .proj-slide-right {

    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 60px 40px; min-height: 520px;

  }

  .proj-name-bg {

    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12vw;

    color: rgba(6,78,59,0.05); line-height: 0.8; text-align: center; white-space: nowrap;

    z-index: 1; user-select: none; pointer-events: none;

  }

  .premium-mockup {

    position: relative; z-index: 2; width: 100%; max-width: 660px;

    filter: drop-shadow(0 30px 50px rgba(6,78,59,0.18)); transform: translateY(20px) scale(0.96); opacity:0; transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);

    border-radius: 20px; overflow: hidden; border: 5px solid #fff;

  }

  .premium-mockup img { width: 100%; height: auto; display: block; border-radius: 14px; }

  .proj-slide.active .premium-mockup { transform: translateY(0) scale(1); opacity:1; transition-delay: 0.15s;}



  /* Floating Live Badge on Image */

  .proj-live-badge {

    position: absolute;

    top: 24px;

    right: 24px;

    z-index: 5;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(12px);

    border: 1px solid #fff;

    padding: 6px 14px;

    border-radius: 999px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12px;

    font-weight: 600;

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 8px 20px rgba(6, 78, 59, 0.1);

  }



  /* Slider Controls Bar at Bottom */

  .slider-controls-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 32px;

    background: rgba(255, 255, 255, 0.4);

    border-top: 1px solid rgba(255, 255, 255, 0.5);

    flex-wrap: wrap;

    gap: 16px;

  }

  .slider-nav-arrows { display: flex; align-items: center; gap: 12px; }

  .slider-arrow-btn {

    width: 44px; height: 44px; border-radius: 50%;

    background: rgba(255, 255, 255, 0.6);

    border: 1px solid var(--glass-border);

    color: var(--primary);

    display: flex; align-items: center; justify-content: center;

    cursor: pointer; transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.08);

  }

  .slider-arrow-btn:hover {

    background: var(--primary); color: var(--bg);

    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 78, 59, 0.2);

  }

  

  .slider-counter {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 14px;

    font-weight: 700;

    color: var(--primary);

  }

  

  .slider-dots-group { display: flex; gap: 10px; align-items: center; }

  .slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(6,78,59,0.25); cursor: pointer; transition: 0.3s; }

  .slider-dot.active { background: var(--primary); transform: scale(1.35); box-shadow: 0 0 10px rgba(6, 78, 59, 0.4); }



  @media (max-width: 960px) {

    .proj-slide { grid-template-columns: 1fr; }

    .proj-slide-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.4); padding: 36px 24px; }

    .proj-slide-right { padding: 40px 20px; min-height: 320px; }

    .proj-highlights { grid-template-columns: 1fr; }

  }



  /* ---------- Process ---------- */

  .steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:start; position:relative;}

  .steps-row::before {

    content:''; position:absolute; top:35px; left:5%; right:5%; height:2px;

    background: linear-gradient(90deg, transparent, rgba(6,78,59,0.2), transparent); z-index: 0;

  }

  .step-card{ position:relative; z-index:1; padding-top:10px; text-align:center; }

  .step-num{

    width:60px;height:60px;border-radius:50%;background:var(--bg);color:var(--primary);

    display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;

    margin:0 auto 24px;border:2px solid var(--primary); box-shadow: 0 10px 20px rgba(6,78,59,0.1);

    position:relative; z-index:2; transition: .4s cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  .step-card:hover .step-num { transform: scale(1.15); box-shadow: 0 15px 30px rgba(6,78,59,0.2); background:var(--primary); color:var(--bg); }

  .step-card h4{font-size:20px;margin-bottom:12px;}

  .step-card p{color:var(--text-dim);font-size:15px;line-height:1.7;}

  @media (max-width:980px){

    .steps-row{grid-template-columns:1fr;gap:40px; padding-left: 50px;}

    .steps-row::before { top:0; bottom:0; left:25px; width:2px; height:100%; right:auto; background: linear-gradient(180deg, transparent, rgba(6,78,59,0.2), transparent); }

    .step-card{text-align:left; padding-top:0;}

    .step-num{margin:0 0 20px 0; position:absolute; left:-75px; top:-10px;}

  }



  /* ---------- Testimonials (Dark Green Background to break layout elegantly) ---------- */

  #testimonials { position: relative; overflow: hidden; background: var(--primary); color: var(--bg); padding: 160px 0; border-radius:40px; margin: 0 20px;}

  .test-bg-text {

    position: absolute; top: 15%; left: 50%; transform: translateX(-50%); white-space: nowrap;

    font-size: 18vw; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;

    color: rgba(248, 231, 201, 0.04); line-height: 1; pointer-events: none; z-index: 0;

    user-select: none; letter-spacing: -0.05em;

  }

  #testimonials h2 { color: var(--bg); }

  #testimonials .eyebrow { color: var(--primary-light); }

  #testimonials .eyebrow::before { background: var(--primary-light); }

  

  .test-masonry { column-count: 3; column-gap: 30px; position: relative; z-index: 2; margin-top: 60px; }

  .test-card {

    background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);

    color: rgba(248, 231, 201, 0.9);

    border-radius: 24px; padding: 40px 32px; margin-bottom: 30px;

    display: inline-block; width: 100%; box-sizing: border-box;

    box-shadow: 0 20px 40px rgba(0,0,0,0.2);

    break-inside: avoid; border: 1px solid rgba(248, 231, 201, 0.15);

    transition: transform 0.4s;

  }

  .test-card:hover { transform: translateY(-8px); border-color: rgba(248, 231, 201, 0.3); }

  .test-card .t-quote { font-family:'Plus Jakarta Sans'; font-size:60px; line-height:0; color:rgba(248,231,201,0.1); text-align:right; margin-bottom:10px; }

  .test-card p.body { font-size: 16px; line-height: 1.8; margin-bottom: 30px; }

  .test-person { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(248,231,201,0.1); padding-bottom: 24px; margin-bottom: 24px; }

  .test-avatar { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid rgba(248,231,201,0.2);}

  .test-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .test-info b { font-size: 18px; color: var(--bg); display: block; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.02em;}

  .test-info span { font-size: 14px; color: var(--primary-light); font-weight:600; }

  .test-footer { display: flex; justify-content: space-between; align-items: center; }

  .test-date { font-size: 13px; opacity:0.6; font-family:'Plus Jakarta Sans', sans-serif;}

  .test-stars { color: #fbbf24; font-size: 14px; letter-spacing: 2px;}

  @media (max-width:1024px) { .test-masonry { column-count: 2; } }

  @media (max-width:680px) { .test-masonry { column-count: 1; } #testimonials{ margin:0; border-radius:0; } }



  /* ---------- Contact (Liquid Glass Form) ---------- */

  #contact .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px; align-items:center;}

  .contact-info h2{font-size:clamp(36px,5vw,56px);margin-bottom:24px;}

  .contact-info p.lead{color:var(--text-dim);font-size:18px;line-height:1.8;margin-bottom:40px;max-width:460px;}

  .contact-line{display:flex;gap:20px;align-items:center;padding:24px 0;border-top:1px solid var(--line);}

  .contact-line:last-child{border-bottom:1px solid var(--line);}

  .contact-line .ic{color:var(--bg); background:var(--primary); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(6,78,59,0.2);}

  .contact-line b{display:block;font-size:16px;color:var(--text);margin-bottom:2px;}

  .contact-line span{font-size:15px;color:var(--text-dim);}



  .form-card{

    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border); border-radius: 32px; padding: 50px;

    box-shadow: var(--glass-shadow), var(--glass-inset);

    position:relative; overflow:hidden;

  }

  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}

  .field{display:flex;flex-direction:column;gap:10px;}

  .field.full{grid-column:1 / -1;}

  .field label{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--primary); font-weight:700;}

  .field input,.field select,.field textarea{

    font-family:'Inter',sans-serif;font-size:16px;color:var(--text);

    background: rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.8);

    border-radius:16px;padding:18px;outline:none;resize:vertical;

    transition:all .3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);

  }

  .field input:focus,.field select:focus,.field textarea:focus{

    border-color:var(--primary); background:#fff;

    box-shadow:0 0 0 4px rgba(6,78,59,0.1);

  }

  .form-note{font-size:14px;color:var(--text-faint);margin-top:24px; line-height:1.6; text-align:center;}

  #form-msg{margin-top:20px;font-size:15px;color:var(--primary);display:none; text-align:center; font-weight:600;}

  @media (max-width:960px){ #contact .contact-grid{grid-template-columns:1fr; gap:60px;} }

  @media (max-width:560px){ .form-row{grid-template-columns:1fr;} .form-card{padding:30px;} }



  /* ---------- Footer ---------- */

  footer{border-top:1px solid var(--line);padding:80px 0 40px;background:transparent; position:relative; z-index:2;}

  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px;}

  .foot-brand p{color:var(--text-dim);font-size:16px;line-height:1.8;margin-top:20px;max-width:320px;}

  .foot-col h5{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);margin-bottom:24px;}

  .foot-col a{display:block;color:var(--text-dim);font-size:15px;margin-bottom:14px;transition:all .3s; font-weight:500;}

  .foot-col a:hover{color:var(--primary); transform:translateX(5px);}

  .foot-bottom{border-top:1px solid var(--line);padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--text-faint);font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;}

  @media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }

  @media (max-width:500px){ .foot-grid{grid-template-columns:1fr;} }



  /* ---------- Trust Strip ---------- */

  #trust { padding: 60px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  .trust-inner { display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap; }

  .trust-stat { text-align: center; }

  .trust-stat .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 42px; color: var(--primary); letter-spacing: -2px; line-height: 1; }

  .trust-stat .label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--text-dim); margin-top: 8px; letter-spacing: .1em; text-transform: uppercase; }

  .trust-divider { width: 1px; height: 60px; background: var(--line); }

  @media (max-width: 640px) { .trust-inner { gap: 32px; } .trust-divider { display: none; } }



  /* ---------- About Image ---------- */

  .about-img-wrap { position: relative; }

  .about-img { width: 100%; aspect-ratio: 4/3; border-radius: 28px; object-fit: cover; display: block;

    box-shadow: 0 30px 60px rgba(6,78,59,0.15); border: 4px solid rgba(255,255,255,0.8);

  }

  .about-badge {

    position: absolute; bottom: -24px; right: -24px;

    background: var(--primary); color: var(--bg); border-radius: 20px;

    padding: 24px 28px; box-shadow: 0 20px 40px rgba(6,78,59,0.25);

    font-family: 'Plus Jakarta Sans', sans-serif; min-width: 160px;

  }

  .about-badge .big { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -2px; }

  .about-badge .small { font-size: 14px; font-weight: 500; opacity: 0.8; margin-top: 4px; }

  @media (max-width: 960px) { .about-img-wrap { margin-bottom: 50px; } .about-badge { bottom: -16px; right: -8px; } }



  /* ---------- Service Card Image ---------- */

  .svc-img { width: 100%; height: 180px; object-fit: cover; border-radius: 16px; margin-bottom: 28px;

    display: block; border: 1px solid rgba(255,255,255,0.6);

    transition: transform 0.5s ease;

  }

  .svc-card:hover .svc-img { transform: scale(1.03); }

  .svc-card { overflow: hidden; }



  /* ---------- Process Visual Banner ---------- */

  .process-visual { position: relative; margin-bottom: 80px; border-radius: 28px; overflow: hidden; height: 320px; }

  .process-visual img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.4) saturate(0.8); }

  .process-visual-overlay {

    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;

    background: linear-gradient(135deg, rgba(6,78,59,0.7) 0%, rgba(2,44,34,0.5) 100%);

  }

  .process-visual-overlay h3 { font-size: clamp(28px, 4vw, 46px); color: var(--bg); text-align: center; margin-bottom: 12px; }

  .process-visual-overlay p { color: rgba(248,231,201,0.8); font-size: 18px; text-align: center; max-width: 500px; }





  /* ========== GMB Button & Rating Bar ========== */

  .test-gmb-bar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    flex-wrap: wrap;

    margin-top: 60px;

    padding: 32px 40px;

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(248, 231, 201, 0.15);

    border-radius: 24px;

  }

  .test-gmb-rating {

    display: flex;

    align-items: center;

    gap: 16px;

  }

  .test-gmb-stars {

    font-size: 22px;

    color: #fbbf24;

    letter-spacing: 2px;

  }

  .test-gmb-text strong {

    display: block;

    font-size: 16px;

    font-weight: 700;

    color: var(--bg);

    font-family: 'Plus Jakarta Sans', sans-serif;

  }

  .test-gmb-text span {

    font-size: 13px;

    color: rgba(248, 231, 201, 0.6);

  }

  .test-gmb-logo { opacity: 0.9; }

  .btn-gmb {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 28px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.95);

    color: #1a1a1a;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 700;

    font-size: 15px;

    border: none;

    cursor: pointer;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 8px 24px rgba(0,0,0,0.2);

  }

  .btn-gmb:hover {

    background: #fff;

    transform: translateY(-3px);

    box-shadow: 0 16px 40px rgba(0,0,0,0.3);

    color: #1a1a1a;

  }

  .btn-gmb i { color: #5f6368; }

  @media (max-width: 680px) {

    .test-gmb-bar { flex-direction: column; gap: 24px; padding: 28px 20px; text-align: center; }

    .test-gmb-rating { flex-wrap: wrap; justify-content: center; }

  }



  /* ========== Services Bottom CTA ========== */

  .svc-bottom-cta {

    text-align: center;

    margin-top: 70px;

    padding: 60px 40px;

    background: var(--glass-bg);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border);

    border-radius: 32px;

    box-shadow: var(--glass-shadow), var(--glass-inset);

  }

  .svc-bottom-cta p {

    font-size: 18px;

    color: var(--text-dim);

    margin-bottom: 28px;

  }

  .svc-cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

  @media (max-width: 480px) { .svc-bottom-cta { padding: 40px 20px; } }



  /* ========== Process Bottom CTA ========== */

  .process-bottom-cta {

    margin-top: 80px;

    text-align: center;

    padding: 70px 40px;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: 32px;

    position: relative;

    overflow: hidden;

  }

  .process-bottom-cta::before {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse at 30% 50%, rgba(13,148,136,0.25) 0%, transparent 60%);

    pointer-events: none;

  }

  .process-bottom-cta h3 {

    font-size: clamp(26px, 4vw, 42px);

    color: var(--bg);

    margin-bottom: 16px;

    position: relative;

  }

  .process-bottom-cta p {

    color: rgba(248, 231, 201, 0.75);

    font-size: 17px;

    max-width: 500px;

    margin: 0 auto 36px;

    line-height: 1.7;

    position: relative;

  }

  .process-cta-btns {

    display: flex;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

    position: relative;

  }

  .process-bottom-cta .btn-ghost {

    border-color: rgba(248, 231, 201, 0.4);

    color: var(--bg);

    background: rgba(255,255,255,0.08);

  }

  .process-bottom-cta .btn-ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(248,231,201,0.7); color: var(--bg); }

  @media (max-width: 480px) { .process-bottom-cta { padding: 50px 20px; } }



  /* ========== COMPREHENSIVE RESPONSIVE SYSTEM ========== */



  /* --- Global wrap padding on small screens --- */

  @media (max-width: 640px) {

    .wrap { padding: 0 16px; }

  }



  /* --- Header / Nav --- */

  @media (max-width: 900px) {

    .nav-links a { font-size: 20px; }

  }

  @media (max-width: 480px) {

    header { padding: 16px 0; }

    .logo svg { height: 28px; }

  }



  /* --- Hero Section --- */

  @media (max-width: 900px) {

    #hero { padding: 160px 0 100px; }

    .hero-grid { grid-template-columns: 1fr; gap: 60px; }

    .hero-inner { text-align: center; }

    .hero-chips { justify-content: center; }

    .hero-cta { justify-content: center; }

    .hero-visual { margin-top: 20px; }

  }

  @media (max-width: 640px) {

    #hero { padding: 130px 0 80px; }

    .hero-cta { flex-direction: column; align-items: stretch; }

    .hero-cta .btn { width: 100%; justify-content: center; }

    .hero-chips { flex-wrap: wrap; gap: 8px; }

    h1 { font-size: clamp(30px, 8vw, 50px) !important; }

  }

  @media (max-width: 520px) {

    .hero-visual { transform: scale(0.75); transform-origin: top center; height: 320px; }

  }



  /* --- Trust Strip --- */

  @media (max-width: 640px) {

    #trust { padding: 50px 0; }

    .trust-inner { gap: 24px; }

    .trust-divider { display: none; }

    .trust-stat .num { font-size: 32px; }

  }



  /* --- About Section --- */

  @media (max-width: 1024px) {

    .about-main-grid { grid-template-columns: 1fr; gap: 40px; }

  }

  @media (max-width: 768px) {

    #about { margin: 0; border-radius: 0; padding: 80px 0; }

    .about-pillars-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

    .about-bottom-bar { flex-direction: column; text-align: center; gap: 16px; }

    .about-bottom-bar .btn { width: 100%; justify-content: center; }

  }

  @media (max-width: 480px) {

    .about-pillars-grid { grid-template-columns: 1fr; }

    .about-tab-toggle { flex-direction: column; }

    .about-tab-btn { width: 100%; }

  }



  /* --- Services Section --- */

  @media (max-width: 1100px) {

    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  }

  @media (max-width: 680px) {

    .svc-grid { grid-template-columns: 1fr; }

    #services { padding: 80px 0; }

    .svc-filter-bar { gap: 8px; }

    .svc-filter-btn { padding: 8px 16px; font-size: 12.5px; }

  }

  @media (max-width: 480px) {

    .svc-card { padding: 20px; }

    .svc-img-wrap { height: 150px; }

  }



  /* --- Projects / Featured Work Section --- */

  @media (max-width: 960px) {

    .proj-slide { grid-template-columns: 1fr; }

    .proj-slide-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.4); padding: 32px 20px; }

    .proj-slide-right { padding: 32px 20px; min-height: 260px; }

    .proj-highlights { grid-template-columns: 1fr 1fr; }

    .projects-header-bar { flex-direction: column; align-items: flex-start; gap: 20px; }

  }

  @media (max-width: 640px) {

    #projects { padding: 80px 0; }

    .proj-filter-bar { gap: 6px; }

    .proj-filter-btn { padding: 7px 14px; font-size: 12px; }

    .proj-slider-ctrl { flex-wrap: wrap; gap: 12px; }

    .proj-slide-right { min-height: 200px; }

    .proj-highlights { grid-template-columns: 1fr; }

  }

  @media (max-width: 480px) {

    .proj-slide-left { padding: 24px 16px; }

    .proj-slider-wrap { border-radius: 20px; }

  }



  /* --- Process Section --- */

  @media (max-width: 980px) {

    .steps-row { grid-template-columns: 1fr; gap: 50px; padding-left: 60px; }

    .step-card { text-align: left; padding-top: 0; position: relative; }

    .step-num { margin: 0 0 20px 0; position: absolute; left: -80px; top: 0px; }

    .steps-row::before { top: 0; bottom: 0; left: 28px; width: 2px; height: 100%; right: auto; background: linear-gradient(180deg, transparent, rgba(6,78,59,0.2), transparent); }

  }

  @media (max-width: 640px) {

    #process { padding: 80px 0; }

    .process-visual { height: 220px; margin-bottom: 50px; }

    .steps-row { padding-left: 50px; gap: 40px; }

    .step-num { left: -64px; width: 50px; height: 50px; font-size: 17px; }

    .steps-row::before { left: 20px; }

  }



  /* --- Testimonials Section --- */

  @media (max-width: 1024px) {

    .test-masonry { column-count: 2; }

  }

  @media (max-width: 680px) {

    .test-masonry { column-count: 1; }

    #testimonials { margin: 0; border-radius: 0; padding: 80px 0; }

    .test-card { padding: 28px 20px; }

  }

  @media (max-width: 480px) {

    .test-card p.body { font-size: 14.5px; }

  }



  /* --- Contact Section --- */

  @media (max-width: 960px) {

    #contact .contact-grid { grid-template-columns: 1fr; gap: 50px; }

    #contact { padding: 80px 0; }

  }

  @media (max-width: 640px) {

    .form-row { grid-template-columns: 1fr; }

    .form-card { padding: 32px 20px; border-radius: 24px; }

    .contact-info h2 { font-size: 32px; }

  }

  @media (max-width: 480px) {

    .contact-line { gap: 14px; }

    .contact-line .ic { width: 40px; height: 40px; }

  }



  /* --- Footer --- */

  @media (max-width: 900px) {

    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

    .foot-brand { grid-column: 1 / -1; }

    footer { padding: 60px 0 30px; }

  }

  @media (max-width: 500px) {

    .foot-grid { grid-template-columns: 1fr; gap: 36px; }

    .foot-bottom { flex-direction: column; text-align: center; gap: 8px; }

    .foot-brand p { max-width: 100%; font-size: 14px; }

  }



  /* --- Section headings responsive --- */

  @media (max-width: 640px) {

    .section-head { margin-bottom: 40px; }

    .section-head h2 { font-size: clamp(26px, 7vw, 40px); }

    .section-head p { font-size: 16px; }

  }



  /* --- Eyebrow on mobile --- */

  @media (max-width: 480px) {

    .eyebrow { font-size: 11px; }

  }



  @media (prefers-reduced-motion: reduce){

    *{animation-duration:.001s !important;transition-duration:.2s !important;}

  }

 /* ---------- 404 Page ---------- */
  #e404-hero{position:relative;padding:190px 0 100px;min-height:70vh;display:flex;align-items:center;overflow:hidden;}
  .e404-inner{max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:1;}

  .e404-numeral{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(90px,16vw,180px);line-height:1;letter-spacing:-0.03em;background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 55%, var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;position:relative;}
  .e404-icon-inline{display:inline-flex;align-items:center;justify-content:center;width:0.62em;height:0.62em;vertical-align:-0.08em;border-radius:50%;background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#f8e7c9;}
  .e404-icon-inline i{width:60%;height:60%;stroke-width:2.4;}

  .e404-inner h1{font-size:clamp(26px,3.6vw,38px);line-height:1.25;margin-bottom:16px;}
  .e404-inner p.e404-sub{font-size:16.5px;color:var(--text-dim);line-height:1.75;margin-bottom:40px;max-width:480px;margin-left:auto;margin-right:auto;}

  .e404-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}

  .e404-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .e404-link-card{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:18px;padding:20px 16px;text-align:center;transition:all .3s ease;}
  .e404-link-card:hover{transform:translateY(-5px);border-color:#fff;box-shadow:0 16px 32px rgba(6,78,59,0.12);}
  .e404-link-card .ic{width:38px;height:38px;border-radius:11px;background:rgba(6,78,59,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);margin:0 auto 12px;}
  .e404-link-card span{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text);}

  @media (max-width:768px){
    #e404-hero{padding:150px 0 60px;}
    .e404-links{grid-template-columns:repeat(2,1fr);}
  }
  /* ---------- About Page: Page Hero ---------- */
  #about-hero{position:relative;padding:200px 0 100px;}
  .about-hero-inner{max-width:780px;}
  .about-hero-inner h1{font-size:clamp(40px,5vw,64px);margin-bottom:24px;line-height:1.08;}
  .about-hero-inner p{font-size:19px;color:var(--text-dim);max-width:620px;margin-bottom:36px;line-height:1.7;}
  .about-hero-inner .hero-chips{margin-bottom:0;}

  /* ---------- Story Section ---------- */
  #story{background:linear-gradient(145deg,#04382a 0%,#022018 100%);border-radius:40px;margin:0 20px;padding:120px 0;position:relative;overflow:hidden;color:#f8e7c9;box-shadow:0 30px 80px rgba(6,78,59,0.25);border:1px solid rgba(255,255,255,0.1);}
  #story::before{content:'';position:absolute;top:-40%;right:-15%;width:600px;height:600px;background:radial-gradient(circle, rgba(13,148,136,0.25) 0%, transparent 70%);border-radius:50%;pointer-events:none;filter:blur(90px);}
  #story::after{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;background:radial-gradient(circle, rgba(248,231,201,0.12) 0%, transparent 70%);border-radius:50%;pointer-events:none;filter:blur(80px);}
  #story .about-head{margin-bottom:60px;}
  #story h2{color:#f8e7c9;font-size:clamp(34px,4.5vw,52px);line-height:1.15;letter-spacing:-0.02em;}

  .story-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:40px;align-items:stretch;margin-bottom:50px;}
  .story-narrative-card{background:rgba(255,255,255,0.04);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(248,231,201,0.15);border-radius:28px;padding:36px 32px;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,0.3);}
  .story-narrative-card .moto-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg, rgba(13,148,136,0.3) 0%, rgba(6,78,59,0.5) 100%);border:1px solid rgba(45,212,191,0.3);display:flex;align-items:center;justify-content:center;color:#2dd4bf;margin-bottom:22px;box-shadow:0 8px 20px rgba(13,148,136,0.2);}
  .story-narrative-card .moto-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#2dd4bf;font-weight:700;margin-bottom:12px;}
  .story-narrative-card .moto-quote{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:700;line-height:1.3;color:#f8e7c9;margin-bottom:18px;}
  .story-narrative-card p{font-size:15px;color:rgba(248,231,201,0.75);line-height:1.75;margin-bottom:0;}
  .story-narrative-card .divider{height:1px;background:rgba(248,231,201,0.12);margin:24px 0;}
  .story-narrative-card .founder-note{font-size:13.5px;color:rgba(248,231,201,0.6);font-style:italic;}

  @media (max-width:1024px){ .story-grid{grid-template-columns:1fr;} }

  /* ---------- Services Snapshot ---------- */
  .snap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .snap-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:20px;padding:26px 22px;box-shadow:var(--glass-shadow);transition:all .35s cubic-bezier(.2,.8,.2,1);}
  .snap-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(6,78,59,0.12);border-color:#fff;}
  .snap-card .snap-icon{width:44px;height:44px;border-radius:12px;background:rgba(6,78,59,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);margin-bottom:16px;}
  .snap-card h4{font-size:16px;margin-bottom:8px;}
  .snap-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;}
  @media (max-width:1024px){ .snap-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .snap-grid{grid-template-columns:1fr;} }

  /* ---------- Process Steps ---------- */
  .process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;}
  .process-row::before{content:'';position:absolute;top:26px;left:5%;right:5%;height:2px;background:var(--line);z-index:0;}
  .process-step{position:relative;z-index:1;text-align:center;}
  .process-step .step-num{width:52px;height:52px;border-radius:50%;background:var(--primary);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;margin:0 auto 18px;box-shadow:0 10px 24px rgba(6,78,59,0.25);}
  .process-step h4{font-size:15.5px;margin-bottom:8px;}
  .process-step p{font-size:13px;color:var(--text-dim);line-height:1.6;}
  @media (max-width:900px){ .process-row{grid-template-columns:1fr 1fr;} .process-row::before{display:none;} }
  @media (max-width:560px){ .process-row{grid-template-columns:1fr;} }

  /* ---------- Future / Vision Band ---------- */
  .vision-band{display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:center;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:32px;padding:60px;box-shadow:var(--glass-shadow);}
  .vision-band .vision-badges{display:flex;flex-wrap:wrap;gap:12px;}
  .vision-band .vision-badges span{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--primary);background:rgba(255,255,255,0.5);border:1px solid var(--glass-border);padding:10px 18px;border-radius:999px;}
  @media (max-width:900px){ .vision-band{grid-template-columns:1fr;padding:40px 28px;} }

  /* ---------- CTA Band ---------- */
  #about-cta{padding-top:0;padding-bottom:160px;}
  .cta-band{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);border-radius:32px;padding:80px 60px;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(6,78,59,0.3);}
  .cta-band::before{content:'';position:absolute;top:-30%;right:-10%;width:400px;height:400px;background:radial-gradient(circle, rgba(45,212,191,0.25) 0%, transparent 70%);border-radius:50%;filter:blur(60px);}
  .cta-band h2{color:#f8e7c9;font-size:clamp(28px,4vw,44px);margin-bottom:18px;position:relative;}
  .cta-band p{color:rgba(248,231,201,0.8);font-size:17px;max-width:520px;margin:0 auto 34px;line-height:1.7;position:relative;}
  .cta-band-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;position:relative;}
  .cta-band .btn-primary{background:#f8e7c9;color:var(--primary-dark);}
  .cta-band .btn-primary:hover{background:#fff;}
  .cta-band .btn-ghost{background:rgba(255,255,255,0.08);border-color:rgba(248,231,201,0.3);color:#f8e7c9;}
  .cta-band .btn-ghost:hover{background:rgba(255,255,255,0.16);border-color:#fff;}

  @media (max-width:768px){
    #about-hero{padding:150px 0 70px;}
    #story{margin:0;border-radius:0;padding:80px 0;}
    .cta-band{padding:56px 28px;}
  }
  /* ---------- Blog Page: Page Hero ---------- */
  #blog-hero{position:relative;padding:200px 0 60px;}
  .blog-hero-inner{max-width:760px;}
  .blog-hero-inner h1{font-size:clamp(38px,5vw,60px);margin-bottom:22px;line-height:1.1;}
  .blog-hero-inner p{font-size:18.5px;color:var(--text-dim);max-width:600px;margin-bottom:0;line-height:1.7;}

  /* ---------- Category Filter ---------- */
  .blog-filter-bar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px;margin-bottom:10px;}
  .blog-filter-btn{background:rgba(255,255,255,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);padding:10px 22px;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all 0.3s ease;box-shadow:var(--glass-shadow);}
  .blog-filter-btn.active{background:var(--primary);color:var(--bg);border-color:var(--primary);box-shadow:0 6px 20px rgba(6,78,59,0.25);}
  .blog-filter-btn:hover:not(.active){background:rgba(255,255,255,0.7);color:var(--primary);}

  /* ---------- Featured Post ---------- */
  #featured-post{padding-top:20px;padding-bottom:20px;}
  .featured-card{display:grid;grid-template-columns:1.05fr 0.95fr;gap:0;background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--glass-shadow);}
  .featured-img{position:relative;min-height:340px;overflow:hidden;}
  .featured-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .featured-badge{position:absolute;top:20px;left:20px;background:rgba(6,78,59,0.9);color:#f8e7c9;font-family:'Plus Jakarta Sans',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;display:flex;align-items:center;gap:6px;}
  .featured-body{padding:48px 46px;display:flex;flex-direction:column;justify-content:center;}
  .featured-meta{display:flex;align-items:center;gap:14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:var(--text-dim);margin-bottom:16px;}
  .featured-meta .cat-tag{color:var(--primary-light);font-weight:700;}
  .featured-body h2{font-size:clamp(24px,3vw,32px);line-height:1.25;margin-bottom:14px;}
  .featured-body p{font-size:15px;color:var(--text-dim);line-height:1.75;margin-bottom:24px;}
  .featured-read-link{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14.5px;color:var(--primary);width:fit-content;}
  .featured-read-link:hover{text-decoration:underline;}

  @media (max-width:900px){
    .featured-card{grid-template-columns:1fr;}
    .featured-img{min-height:220px;}
    .featured-body{padding:34px 28px;}
  }

  /* ---------- Blog Grid ---------- */
  #blog-grid{padding-top:40px;}
  .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .post-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--glass-shadow);transition:all .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;}
  .post-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(6,78,59,0.14);border-color:#fff;}
  .post-img-wrap{position:relative;height:190px;overflow:hidden;}
  .post-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .post-card:hover .post-img-wrap img{transform:scale(1.06);}
  .post-cat-badge{position:absolute;top:14px;left:14px;background:rgba(6,78,59,0.85);color:#f8e7c9;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);}

  .post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
  .post-meta{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--text-dim);margin-bottom:10px;}
  .post-meta .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--text-dim);}
  .post-body h3{font-size:17px;margin-bottom:10px;line-height:1.35;}
  .post-body p.post-desc{font-size:13.5px;color:var(--text-dim);line-height:1.65;margin-bottom:18px;flex:1;}
  .post-body .post-link{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--primary);width:fit-content;}
  .post-body .post-link:hover{text-decoration:underline;}

  @media (max-width:1024px){ .post-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .post-grid{grid-template-columns:1fr;} }

  /* ---------- Newsletter Band ---------- */
  #newsletter{padding-top:20px;}
  .newsletter-band{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);border-radius:32px;padding:64px 60px;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(6,78,59,0.3);}
  .newsletter-band::before{content:'';position:absolute;top:-30%;right:-10%;width:400px;height:400px;background:radial-gradient(circle, rgba(45,212,191,0.25) 0%, transparent 70%);border-radius:50%;filter:blur(60px);}
  .newsletter-band h2{color:#f8e7c9;font-size:clamp(26px,3.6vw,38px);margin-bottom:14px;position:relative;}
  .newsletter-band p{color:rgba(248,231,201,0.8);font-size:16px;max-width:480px;margin:0 auto 30px;line-height:1.7;position:relative;}
  .newsletter-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;max-width:460px;margin:0 auto;}
  .newsletter-form input{flex:1;min-width:220px;padding:14px 20px;border-radius:12px;border:1px solid rgba(248,231,201,0.25);background:rgba(255,255,255,0.08);color:#f8e7c9;font-family:'Inter',sans-serif;font-size:14px;}
  .newsletter-form input::placeholder{color:rgba(248,231,201,0.55);}
  .newsletter-form button{background:#f8e7c9;color:var(--primary-dark);border:none;padding:14px 26px;border-radius:12px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:all .3s ease;}
  .newsletter-form button:hover{background:#fff;}
  .newsletter-note{margin-top:16px;font-size:12.5px;color:rgba(248,231,201,0.6);position:relative;}

  @media (max-width:768px){
    #blog-hero{padding:150px 0 40px;}
    .newsletter-band{padding:48px 26px;}
  }
  /* ---------- Contact Page: Page Hero ---------- */
  #contact-hero{position:relative;padding:200px 0 80px;}
  .contact-hero-inner{max-width:760px;}
  .contact-hero-inner h1{font-size:clamp(38px,5vw,60px);margin-bottom:22px;line-height:1.1;}
  .contact-hero-inner p{font-size:18.5px;color:var(--text-dim);max-width:600px;margin-bottom:0;line-height:1.7;}

  /* ---------- Quick Info Chips ---------- */
  .quick-info-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;}
  .quick-info-chip{display:flex;align-items:center;gap:14px;background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:16px;padding:14px 20px;box-shadow:var(--glass-shadow);}
  .quick-info-chip .ic{width:38px;height:38px;border-radius:10px;background:rgba(6,78,59,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none;}
  .quick-info-chip b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--text);}
  .quick-info-chip span{display:block;font-size:12.5px;color:var(--text-dim);}

  /* ---------- Main Contact Section padding tweak ---------- */
  #contact-main{padding-top:40px;}

  /* ---------- FAQ Section ---------- */
  #faq{padding-top:60px;}
  .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
  .faq-item{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-shadow);overflow:hidden;}
  .faq-item summary{list-style:none;cursor:pointer;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15.5px;color:var(--text);}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary .chev{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(6,78,59,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);transition:transform .3s ease;}
  .faq-item[open] summary .chev{transform:rotate(45deg);}
  .faq-item .faq-answer{padding:0 26px 22px;color:var(--text-dim);font-size:14.5px;line-height:1.75;}

  @media (max-width:768px){
    #contact-hero{padding:150px 0 50px;}
    .quick-info-row{gap:12px;}
  }
  /* ---------- Portfolio Page: Page Hero ---------- */
  #portfolio-hero{position:relative;padding:200px 0 60px;}
  .portfolio-hero-inner{max-width:760px;}
  .portfolio-hero-inner h1{font-size:clamp(38px,5vw,60px);margin-bottom:22px;line-height:1.1;}
  .portfolio-hero-inner p{font-size:18.5px;color:var(--text-dim);max-width:600px;margin-bottom:0;line-height:1.7;}

  /* ---------- Static Project Archive Grid ---------- */
  #project-archive{padding-top:60px;}
  .port-filter-bar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px;margin-bottom:50px;}
  .port-filter-btn{background:rgba(255,255,255,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);padding:10px 22px;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all 0.3s ease;box-shadow:var(--glass-shadow);}
  .port-filter-btn.active{background:var(--primary);color:var(--bg);border-color:var(--primary);box-shadow:0 6px 20px rgba(6,78,59,0.25);}
  .port-filter-btn:hover:not(.active){background:rgba(255,255,255,0.7);color:var(--primary);}

  .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .port-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--glass-shadow);transition:all .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;}
  .port-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(6,78,59,0.14);border-color:#fff;}
  .port-img-wrap{position:relative;height:190px;overflow:hidden;}
  .port-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .port-card:hover .port-img-wrap img{transform:scale(1.06);}
  .port-cat-badge{position:absolute;top:14px;left:14px;background:rgba(6,78,59,0.85);color:#f8e7c9;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);}
  .port-live-tag{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.85);color:var(--primary);font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;}
  .port-live-tag .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,0.6);animation:pulseDot 2s infinite;}

  .port-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
  .port-body h3{font-size:18px;margin-bottom:8px;}
  .port-body p.port-desc{font-size:13.5px;color:var(--text-dim);line-height:1.65;margin-bottom:16px;flex:1;}
  .port-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
  .port-tags span{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;color:var(--primary);background:rgba(6,78,59,0.07);padding:5px 10px;border-radius:999px;}
  .port-body .port-link{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--primary);}
  .port-body .port-link:hover{text-decoration:underline;}

  @media (max-width:1024px){ .port-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .port-grid{grid-template-columns:1fr;} }
  @media (max-width:768px){ #portfolio-hero{padding:150px 0 40px;} }
  /* ---------- Reading Progress Bar ---------- */
  #reading-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg, var(--primary-light), var(--primary));z-index:999;transition:width 0.1s ease-out;}

  /* ---------- Breadcrumb ---------- */
  #breadcrumb{padding:150px 0 0;}
  .breadcrumb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;color:var(--text-dim);}
  .breadcrumb-row a{color:var(--text-dim);}
  .breadcrumb-row a:hover{color:var(--primary);}
  .breadcrumb-row .sep{opacity:.5;}
  .breadcrumb-row .current{color:var(--primary);font-weight:600;}

  /* ---------- Article Header ---------- */
  #post-header{padding:28px 0 40px;}
  .post-header-inner{max-width:760px;margin:0 auto;}
  .post-cat-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(6,78,59,0.08);color:var(--primary);font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:22px;}
  .post-header-inner h1{font-size:clamp(30px,4.4vw,48px);line-height:1.18;letter-spacing:-0.01em;margin-bottom:22px;}
  .post-meta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--text-dim);}
  .post-meta-row .author{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;}
  .post-meta-row .author-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary-light),var(--primary));display:flex;align-items:center;justify-content:center;color:#f8e7c9;font-weight:800;font-size:13px;}
  .post-meta-row .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--text-dim);}

  /* ---------- Featured Image ---------- */
  #post-image{padding-top:0;padding-bottom:0;}
  .post-image-wrap{max-width:960px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(6,78,59,0.15);}
  .post-image-wrap img{width:100%;height:auto;max-height:520px;object-fit:cover;display:block;}

  /* ---------- Article Body (the readability-critical part) ---------- */
  #post-body{padding-top:56px;}
  .post-content{max-width:700px;margin:0 auto;font-family:'Inter',sans-serif;font-size:clamp(17px, 0.6vw + 15px, 19px);line-height:1.85;color:var(--text);display: block !important;}
  .post-content p{margin-bottom:1.65em;}
  .post-content h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(24px,3vw,32px);line-height:1.3;font-weight:800;letter-spacing:-0.01em;margin:1.8em 0 0.7em;color:var(--primary-dark);}
  .post-content h2:first-child{margin-top:0;}
  .post-content h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(19px,2.2vw,23px);line-height:1.35;font-weight:700;margin:1.6em 0 0.6em;color:var(--primary-dark);}
  .post-content ul, .post-content ol{margin:0 0 1.65em;padding-left:0;list-style:none;}
  .post-content ul li, .post-content ol li{position:relative;padding-left:32px;margin-bottom:0.8em;line-height:1.75;}
  .post-content ul li::before{content:'';position:absolute;left:6px;top:0.65em;width:7px;height:7px;border-radius:50%;background:var(--primary-light);}
  .post-content ol{counter-reset:post-ol;}
  .post-content ol li{counter-increment:post-ol;}
  .post-content ol li::before{content:counter(post-ol);position:absolute;left:0;top:-0.05em;width:24px;height:24px;border-radius:50%;background:rgba(6,78,59,0.1);color:var(--primary);font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .post-content strong{color:var(--primary-dark);font-weight:700;}
  .post-content a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(6,78,59,0.3);text-underline-offset:3px;}
  .post-content a:hover{text-decoration-color:var(--primary);}

  .post-content blockquote{margin:2em 0;padding:28px 32px;background:rgba(6,78,59,0.05);border-left:4px solid var(--primary);border-radius:0 16px 16px 0;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(18px,2vw,21px);font-weight:600;line-height:1.6;color:var(--primary-dark);font-style:italic;}

  .post-content code{font-family:'SF Mono', 'Consolas', monospace;background:rgba(6,78,59,0.08);color:var(--primary-dark);padding:3px 8px;border-radius:6px;font-size:0.88em;}

  .post-content .inline-callout{display:flex;gap:14px;align-items:flex-start;background:rgba(13,148,136,0.07);border:1px solid rgba(13,148,136,0.18);border-radius:16px;padding:22px 24px;margin:2em 0;font-size:0.95em;line-height:1.7;}
  .post-content .inline-callout i{flex:none;color:var(--primary-light);margin-top:3px;}

  hr.post-divider{border:none;height:1px;background:var(--line);margin:3em 0;}

  /* ---------- Share Row ---------- */
  .post-share-row{max-width:700px;margin:3em auto 0;padding-top:32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
  .post-share-row .share-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--text-dim);}
  .share-icons{display:flex;gap:10px;}
  .share-icons a{width:38px;height:38px;border-radius:50%;background:rgba(6,78,59,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);transition:all .3s ease;}
  .share-icons a:hover{background:var(--primary);color:#f8e7c9;transform:translateY(-3px);}

  /* ---------- Author Box ---------- */
  #author-box{padding-top:50px;}
  .author-card{max-width:700px;margin:0 auto;display:flex;gap:22px;align-items:center;background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:24px;padding:30px 32px;box-shadow:var(--glass-shadow);}
  .author-card .avatar-lg{flex:none;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary-light),var(--primary));display:flex;align-items:center;justify-content:center;color:#f8e7c9;font-weight:800;font-size:20px;}
  .author-card h4{font-size:16.5px;margin-bottom:6px;}
  .author-card p{font-size:14px;color:var(--text-dim);line-height:1.65;margin:0;}

  @media (max-width:640px){
    .author-card{flex-direction:column;text-align:center;padding:26px 24px;}
  }

  /* ---------- Related Posts ---------- */
  #related-posts{padding-top:70px;}

  /* ---------- Related Posts Grid ---------- */
  .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .post-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--glass-shadow);transition:all .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;}
  .post-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(6,78,59,0.14);border-color:#fff;}
  .post-img-wrap{position:relative;height:190px;overflow:hidden;}
  .post-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .post-card:hover .post-img-wrap img{transform:scale(1.06);}
  .post-cat-badge{position:absolute;top:14px;left:14px;background:rgba(6,78,59,0.85);color:#f8e7c9;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);}

  .post-card .post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
  .post-card .post-meta{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--text-dim);margin-bottom:10px;}
  .post-card .post-meta .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--text-dim);}
  .post-card .post-body h3{font-size:17px;margin-bottom:10px;line-height:1.35;}
  .post-card .post-body p.post-desc{font-size:13.5px;color:var(--text-dim);line-height:1.65;margin-bottom:18px;flex:1;}
  .post-card .post-body .post-link{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--primary);width:fit-content;}
  .post-card .post-body .post-link:hover{text-decoration:underline;}

  @media (max-width:1024px){ .post-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .post-grid{grid-template-columns:1fr;} }

  /* ---------- Table of Contents ---------- */
  .post-body-grid{display:grid;grid-template-columns:230px minmax(0,700px);gap:56px;justify-content:center;align-items:start;}
  .post-toc{position:sticky;top:110px;}
  .toc-inner{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:20px;padding:22px 20px;box-shadow:var(--glass-shadow);}
  .toc-label{display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px;}
  .toc-inner nav{display:flex;flex-direction:column;gap:2px;}
  .toc-link{display:block;padding:9px 12px;border-radius:10px;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text-dim);line-height:1.4;border-left:2px solid transparent;transition:all .25s ease;}
  .toc-link:hover{color:var(--primary);background:rgba(6,78,59,0.05);}
  .toc-link.active{color:var(--primary);font-weight:600;border-left-color:var(--primary);background:rgba(6,78,59,0.06);}

  @media (max-width:1100px){
    .post-body-grid{grid-template-columns:1fr;max-width:700px;margin:0 auto;}
    .post-toc{position:static;margin-bottom:28px;}
  }

  /* ---------- Post Contact Form ---------- */
  #post-contact{padding-top:20px;}
  .post-contact-inner{display:grid;grid-template-columns:0.85fr 1.15fr;gap:54px;align-items:center;background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:56px;box-shadow:var(--glass-shadow);}
  .post-contact-text h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:16px;line-height:1.25;}
  .post-contact-text p{color:var(--text-dim);font-size:15.5px;line-height:1.75;}
  .post-contact-inner .form-card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none;padding:0;}

  @media (max-width:900px){
    .post-contact-inner{grid-template-columns:1fr;padding:36px 26px;gap:32px;}
  }

  @media (max-width:768px){
    #breadcrumb{padding:130px 0 0;}
    .post-image-wrap{border-radius:16px;}
    #post-body{padding-top:36px;}
  }
  /* ---------- Services Page: Split Hero with Jump Index ---------- */
  #services-hero{position:relative;padding:200px 0 80px;}
  .services-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:start;}
  .services-hero-text h1{font-size:clamp(36px,4.6vw,56px);margin-bottom:20px;line-height:1.12;}
  .services-hero-text p{font-size:17.5px;color:var(--text-dim);max-width:520px;margin-bottom:0;line-height:1.75;}

  .hero-index{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;padding:14px;box-shadow:var(--glass-shadow);}
  .hero-index a{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:600;color:var(--text);transition:all .25s ease;}
  .hero-index a:hover{background:rgba(6,78,59,0.07);color:var(--primary);transform:translateX(4px);}
  .hero-index a .idx-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;color:var(--primary-light);width:22px;flex:none;}
  .hero-index a .idx-ic{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(6,78,59,0.07);display:flex;align-items:center;justify-content:center;color:var(--primary);}

  @media (max-width:900px){
    .services-hero-grid{grid-template-columns:1fr;}
    #services-hero{padding:150px 0 50px;}
  }

  /* ---------- Editorial Service Rows (replaces card grid) ---------- */
  #service-list{padding-top:20px;padding-bottom:20px;}
  .service-row{display:flex;flex-wrap:wrap;gap:70px;align-items:center;padding:80px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px;}
  .service-row:first-child{padding-top:20px;}
  .service-row:last-child{border-bottom:none;padding-bottom:40px;}

  .service-row-media{flex:1 1 420px;order:1;}
  .service-row-content{flex:1 1 420px;order:2;}
  .service-row.reverse .service-row-media{order:2;}
  .service-row.reverse .service-row-content{order:1;}

  .service-row-media{position:relative;}
  .service-row-media .media-frame{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px rgba(6,78,59,0.16);border:1px solid rgba(255,255,255,0.5);}
  .service-row-media img{width:100%;height:340px;object-fit:cover;display:block;}
  .service-row-media .media-num{position:absolute;bottom:-26px;right:26px;width:64px;height:64px;border-radius:18px;background:var(--primary);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:20px;box-shadow:0 14px 30px rgba(6,78,59,0.3);border:4px solid var(--bg);}
  .service-row-media .media-blob{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(13,148,136,0.18) 0%, transparent 70%);filter:blur(30px);z-index:-1;top:-40px;left:-40px;}

  .service-row-content .row-cat{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-light);margin-bottom:16px;}
  .service-row-content h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:16px;line-height:1.25;}
  .service-row-content p.row-desc{font-size:15.5px;color:var(--text-dim);line-height:1.75;margin-bottom:24px;}

  .row-feature-list{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
  .row-feature-list div{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:500;color:var(--text);}
  .row-feature-list i{color:var(--primary-light);flex:none;}

  .row-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
  .row-tags span{font-family:'Plus Jakarta Sans',sans-serif;font-size:11.5px;font-weight:600;color:var(--primary);background:rgba(6,78,59,0.07);padding:6px 12px;border-radius:999px;}

  .row-cta{display:inline-flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14.5px;color:var(--primary);padding:14px 26px;border-radius:14px;background:rgba(6,78,59,0.07);border:1px solid rgba(6,78,59,0.12);transition:all .3s ease;}
  .row-cta:hover{background:var(--primary);color:var(--bg);transform:translateX(4px);}

  @media (max-width:900px){
    .service-row{gap:32px;padding:56px 0;}
    .service-row-media, .service-row.reverse .service-row-media{order:1 !important;}
    .service-row-content, .service-row.reverse .service-row-content{order:2 !important;}
    .service-row-media{flex-basis:100%;}
    .service-row-content{flex-basis:100%;}
    .service-row-media img{height:240px;}
  }

  /* ---------- Bottom CTA ---------- */
  #services-bottom-cta{padding-top:10px;}

  /* ---------- Why Us (dark wrapper, reusing pillar-card look) ---------- */
  #why-us{background:linear-gradient(145deg,#04382a 0%,#022018 100%);border-radius:40px;margin:0 20px;padding:110px 0;position:relative;overflow:hidden;color:#f8e7c9;box-shadow:0 30px 80px rgba(6,78,59,0.25);border:1px solid rgba(255,255,255,0.1);}
  #why-us::before{content:'';position:absolute;top:-40%;right:-15%;width:600px;height:600px;background:radial-gradient(circle, rgba(13,148,136,0.25) 0%, transparent 70%);border-radius:50%;pointer-events:none;filter:blur(90px);}
  #why-us::after{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;background:radial-gradient(circle, rgba(248,231,201,0.12) 0%, transparent 70%);border-radius:50%;pointer-events:none;filter:blur(80px);}
  #why-us .about-head{margin-bottom:60px;}
  #why-us .eyebrow-pill{color:#0d9488;background:rgba(13,148,136,0.12);padding:8px 20px;border-radius:999px;border:1px solid rgba(13,148,136,0.3);margin-bottom:24px;display:inline-flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;}
  #why-us h2{color:#f8e7c9;font-size:clamp(32px,4.5vw,50px);line-height:1.15;letter-spacing:-0.02em;}
  #why-us p.lead{font-size:18px;color:rgba(248,231,201,0.8);line-height:1.75;margin-top:20px;}

  @media (max-width:768px){
    #why-us{margin:0;border-radius:0;padding:80px 0;}
  }
  /* ---------- Thank You Page ---------- */
  #ty-hero{position:relative;padding:210px 0 100px;min-height:70vh;display:flex;align-items:center;}
  .ty-inner{max-width:640px;margin:0 auto;text-align:center;}

  .ty-icon{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);display:flex;align-items:center;justify-content:center;color:#f8e7c9;margin:0 auto 32px;box-shadow:0 20px 46px rgba(6,78,59,0.3);animation:tyPop .6s cubic-bezier(.34,1.56,.64,1) both;}
  @keyframes tyPop{0%{transform:scale(0.4);opacity:0;}100%{transform:scale(1);opacity:1;}}

  .ty-inner h1{font-size:clamp(32px,4.6vw,48px);line-height:1.15;margin-bottom:18px;}
  .ty-inner p.ty-sub{font-size:17px;color:var(--text-dim);line-height:1.75;margin-bottom:44px;max-width:520px;margin-left:auto;margin-right:auto;}

  .ty-steps{display:flex;flex-direction:column;gap:14px;text-align:left;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;padding:28px 30px;box-shadow:var(--glass-shadow);margin-bottom:40px;}
  .ty-step{display:flex;align-items:flex-start;gap:16px;}
  .ty-step .step-badge{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(6,78,59,0.08);color:var(--primary);display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;}
  .ty-step h4{font-size:14.5px;margin-bottom:4px;}
  .ty-step p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0;}

  .ty-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}

  .ty-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .ty-link-card{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:18px;padding:20px 16px;text-align:center;transition:all .3s ease;}
  .ty-link-card:hover{transform:translateY(-5px);border-color:#fff;box-shadow:0 16px 32px rgba(6,78,59,0.12);}
  .ty-link-card .ic{width:38px;height:38px;border-radius:11px;background:rgba(6,78,59,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);margin:0 auto 12px;}
  .ty-link-card span{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text);}

  @media (max-width:768px){
    #ty-hero{padding:160px 0 60px;}
    .ty-links{grid-template-columns:repeat(2,1fr);}
  }
/* ---------- Reading Progress Bar ---------- */
#reading-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--primary-light),var(--primary));
  z-index:999;
  transition:width .1s ease-out;
}


/* ---------- Breadcrumb ---------- */
#breadcrumb{
  padding:150px 0 0;
}

.breadcrumb-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px;
  color:var(--text-dim);
}

.breadcrumb-row a{
  color:var(--text-dim);
}

.breadcrumb-row a:hover{
  color:var(--primary);
}

.breadcrumb-row .sep{
  opacity:.5;
}

.breadcrumb-row .current{
  color:var(--primary);
  font-weight:600;
}


/* ---------- Article Header ---------- */
#post-header{
  padding:28px 0 0px;
}

.post-header-inner{
  max-width:1280px;
  margin:38px auto;
}

.post-cat-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(6,78,59,0.08);
  color:var(--primary);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:22px;
}

.post-header-inner h1{
  font-size:clamp(30px,4.4vw,48px);
  line-height:1.18;
  letter-spacing:-0.01em;
  margin-bottom:22px;
}

.post-meta-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  color:var(--text-dim);
}

.post-meta-row .author{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:600;
}

.post-meta-row .author-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    var(--primary-light),
    var(--primary)
  );
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f8e7c9;
  font-weight:800;
  font-size:13px;
}

.post-meta-row .dot-sep{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--text-dim);
}


/* ---------- Featured Image ---------- */
#post-image{
  padding-top:0;
  padding-bottom:0;
}

.post-image-wrap{
  max-width:960px;
  margin:0 auto;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(6,78,59,0.15);
}

.post-image-wrap img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:cover;
  display:block;
}


/* =========================================================
   ARTICLE BODY
   TOC LEFT + ARTICLE CENTER + RELATED BLOGS RIGHT
   ========================================================= */

#post-body{
  padding-top:56px;
  padding-bottom:20px;
}


/* ---------- Main 3 Column Layout ---------- */

.post-body-grid{
  display:grid;

  /*
   * Left  = TOC
   * Center = Article
   * Right = Related Blogs
   */
  grid-template-columns:
    220px
    minmax(0,800px)
    280px;

  gap:42px;

  /*
   * Keeps the entire layout centered.
   */
  max-width:1284px;
  margin:0 auto;

  align-items:start;
}


/* ---------- Article Column ---------- */

.post-body-grid > div{
  min-width:0;
}

.post-content{
  width:100%;
  max-width:700px;
  margin:0 auto;

  font-family:'Inter',sans-serif;
  font-size:clamp(17px,0.6vw + 15px,19px);
  line-height:1.85;
  color:var(--text);

  /*
   * Important:
   * Content should remain visible even if reveal JS
   * does not execute.
   */
  opacity:1;
  visibility:visible;
  transform:none;
}

.post-content p{
  margin-bottom:1.65em;
}

.post-content h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(24px,3vw,32px);
  line-height:1.3;
  font-weight:800;
  letter-spacing:-0.01em;
  margin:1.8em 0 0.7em;
  color:var(--primary-dark);
}

.post-content h2:first-child{
  margin-top:0;
}

.post-content h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(19px,2.2vw,23px);
  line-height:1.35;
  font-weight:700;
  margin:1.6em 0 0.6em;
  color:var(--primary-dark);
}

.post-content ul,
.post-content ol{
  margin:0 0 1.65em;
  padding-left:0;
  list-style:none;
}

.post-content ul li,
.post-content ol li{
  position:relative;
  padding-left:32px;
  margin-bottom:.8em;
  line-height:1.75;
}

.post-content ul li::before{
  content:'';
  position:absolute;
  left:6px;
  top:.65em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary-light);
}

.post-content ol{
  counter-reset:post-ol;
}

.post-content ol li{
  counter-increment:post-ol;
}

.post-content ol li::before{
  content:counter(post-ol);
  position:absolute;
  left:0;
  top:-.05em;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(6,78,59,0.1);
  color:var(--primary);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}

.post-content strong{
  color:var(--primary-dark);
  font-weight:700;
}

.post-content a{
  color:var(--primary);
  text-decoration:underline;
  text-decoration-color:rgba(6,78,59,0.3);
  text-underline-offset:3px;
}

.post-content a:hover{
  text-decoration-color:var(--primary);
}

.post-content blockquote{
  margin:2em 0;
  padding:28px 32px;
  background:rgba(6,78,59,0.05);
  border-left:4px solid var(--primary);
  border-radius:0 16px 16px 0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(18px,2vw,21px);
  font-weight:600;
  line-height:1.6;
  color:var(--primary-dark);
  font-style:italic;
}

.post-content code{
  font-family:'SF Mono','Consolas',monospace;
  background:rgba(6,78,59,0.08);
  color:var(--primary-dark);
  padding:3px 8px;
  border-radius:6px;
  font-size:.88em;
}

.post-content .inline-callout{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:rgba(13,148,136,0.07);
  border:1px solid rgba(13,148,136,0.18);
  border-radius:16px;
  padding:22px 24px;
  margin:2em 0;
  font-size:.95em;
  line-height:1.7;
}

.post-content .inline-callout i{
  flex:none;
  color:var(--primary-light);
  margin-top:3px;
}

hr.post-divider{
  border:none;
  height:1px;
  background:var(--line);
  margin:3em 0;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.post-toc{
  position:sticky;
  top:110px;

  /*
   * Prevent TOC from becoming invisible because of
   * reveal animation.
   */
  opacity:1;
  visibility:visible;
  transform:none;
}

.toc-inner{
  background:var(--glass-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:22px 20px;
  box-shadow:var(--glass-shadow);
}

.toc-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:14px;
}

.toc-inner nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.toc-link{
  display:block;
  padding:9px 12px;
  border-radius:10px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:var(--text-dim);
  line-height:1.4;
  border-left:2px solid transparent;
  transition:all .25s ease;
}

.toc-link:hover{
  color:var(--primary);
  background:rgba(6,78,59,0.05);
}

.toc-link.active{
  color:var(--primary);
  font-weight:600;
  border-left-color:var(--primary);
  background:rgba(6,78,59,0.06);
}



/* =========================================================
   RELATED BLOGS - RIGHT SIDEBAR
   ========================================================= */

.related-sidebar{
  position:sticky;
  top:110px;
}

.related-sidebar-inner{
  background:var(--glass-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--glass-shadow);
}

.related-sidebar-label{
  display:flex;
  align-items:center;
  gap:8px;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--text-dim);

  margin-bottom:16px;
}

.related-sidebar-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}


/* ---------- Compact Related Card ---------- */

.related-mini-card{
  display:block;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.related-mini-card:last-child{
  padding-bottom:0;
  border-bottom:none;
}

.related-mini-image{
  width:100%;
  height:115px;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:11px;
  background:rgba(6,78,59,0.05);
}

.related-mini-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.related-mini-card:hover .related-mini-image img{
  transform:scale(1.05);
}

.related-mini-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;
  color:var(--text-dim);

  margin-bottom:6px;
}

.related-mini-cat{
  color:var(--primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.related-mini-title{
  display:block;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.4;

  color:var(--primary-dark);

  transition:color .25s ease;
}

.related-mini-card:hover .related-mini-title{
  color:var(--primary);
}


/* =========================================================
   SHARE ROW
   ========================================================= */

.post-share-row{
  max-width:700px;
  margin:3em auto 0;
  padding-top:32px;
  border-top:1px solid var(--line);

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.post-share-row .share-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-dim);
}

.share-icons{
  display:flex;
  gap:10px;
}

.share-icons a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(6,78,59,0.08);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--primary);

  transition:all .3s ease;
}

.share-icons a:hover{
  background:var(--primary);
  color:#f8e7c9;
  transform:translateY(-3px);
}


/* =========================================================
   AUTHOR BOX
   ========================================================= */

#author-box{
  padding-top:50px;
}

.author-card{
  max-width:700px;
  margin:0 auto;

  display:flex;
  gap:22px;
  align-items:center;

  background:var(--glass-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:1px solid var(--glass-border);
  border-radius:24px;

  padding:30px 32px;

  box-shadow:var(--glass-shadow);
}

.author-card .avatar-lg{
  flex:none;
  width:64px;
  height:64px;
  border-radius:50%;

  background:linear-gradient(
    135deg,
    var(--primary-light),
    var(--primary)
  );

  display:flex;
  align-items:center;
  justify-content:center;

  color:#f8e7c9;
  font-weight:800;
  font-size:20px;
}

.author-card h4{
  font-size:16.5px;
  margin-bottom:6px;
}

.author-card p{
  font-size:14px;
  color:var(--text-dim);
  line-height:1.65;
  margin:0;
}


/* =========================================================
   OLD / BOTTOM RELATED POSTS
   ========================================================= */

/*
 * These styles are kept so the existing PHP does not break.
 * If we move related blogs into the right sidebar in PHP,
 * this bottom section can be removed from the template.
 */

#related-posts{
  padding-top:70px;
}

#related-posts .section-head{
  margin-bottom:32px;
}

.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.post-card{
  background:var(--glass-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:1px solid var(--glass-border);
  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:var(--glass-shadow);

  transition:
    all .4s cubic-bezier(.2,.8,.2,1);

  display:flex;
  flex-direction:column;
}

.post-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 48px rgba(6,78,59,0.14);
  border-color:#fff;
}

.post-img-wrap{
  position:relative;
  height:190px;
  overflow:hidden;
}

.post-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.post-card:hover .post-img-wrap img{
  transform:scale(1.06);
}

.post-cat-badge{
  position:absolute;
  top:14px;
  left:14px;

  background:rgba(6,78,59,0.85);
  color:#f8e7c9;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;

  padding:6px 12px;
  border-radius:999px;

  backdrop-filter:blur(6px);
}

.post-card .post-body{
  padding:22px 22px 24px;

  display:flex;
  flex-direction:column;
  flex:1;
}

.post-card .post-meta{
  display:flex;
  align-items:center;
  gap:10px;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  color:var(--text-dim);

  margin-bottom:10px;
}

.post-card .post-meta .dot-sep{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--text-dim);
}

.post-card .post-body h3{
  font-size:17px;
  margin-bottom:10px;
  line-height:1.35;
}

.post-card .post-body p.post-desc{
  font-size:13.5px;
  color:var(--text-dim);
  line-height:1.65;
  margin-bottom:18px;
  flex:1;
}

.post-card .post-body .post-link{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;
  font-weight:600;

  color:var(--primary);
  width:fit-content;
}

.post-card .post-body .post-link:hover{
  text-decoration:underline;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

#post-contact{
  padding-top:20px;
}

.post-contact-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:54px;
  align-items:center;

  background:var(--glass-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid var(--glass-border);
  border-radius:var(--radius);

  padding:56px;

  box-shadow:var(--glass-shadow);
}

.post-contact-text h2{
  font-size:clamp(26px,3.4vw,36px);
  margin-bottom:16px;
  line-height:1.25;
}

.post-contact-text p{
  color:var(--text-dim);
  font-size:15.5px;
  line-height:1.75;
}

.post-contact-inner .form-card{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  box-shadow:none;
  padding:0;
}


/* =========================================================
   REVEAL SAFETY
   ========================================================= */

/*
 * If your global reveal animation depends on JavaScript,
 * article content should not become permanently invisible.
 *
 * This makes the article readable even if animation JS
 * fails or loads late.
 */

.post-content.reveal,
.post-toc.reveal,
.post-share-row.reveal,
.author-card.reveal,
.post-contact-inner.reveal,
.post-card.reveal{
  visibility:visible;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width:1400px){

  .post-body-grid{
    grid-template-columns:
      230px
      minmax(0,720px)
      300px;

    gap:50px;
    max-width:1340px;
  }

  .related-sidebar-inner{
    padding:22px;
  }

  .related-mini-image{
    height:125px;
  }
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1200px){

  .post-body-grid{
    grid-template-columns:
      190px
      minmax(0,680px);

    gap:36px;

    max-width:950px;
  }

  /*
   * Hide right related sidebar temporarily at this width.
   * It will move below article.
   */
  .related-sidebar{
    position:static;
    grid-column:1 / -1;
    width:100%;
  }

  .related-sidebar-inner{
    max-width:680px;
    margin:0 auto;
  }

  .related-sidebar-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

  .related-mini-card{
    border-bottom:none;
    padding-bottom:0;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

  .post-body-grid{
    grid-template-columns:1fr;
    max-width:700px;
    margin:0 auto;
    gap:30px;
  }

  /*
   * TOC becomes normal block above article.
   */
  .post-toc{
    position:static;
    margin-bottom:0;
  }

  .post-content{
    max-width:700px;
  }

  /*
   * Related blogs below article.
   */
  .related-sidebar{
    grid-column:auto;
    position:static;
  }

  .related-sidebar-inner{
    max-width:none;
  }

  .related-sidebar-list{
    grid-template-columns:repeat(3,1fr);
  }

  .post-contact-inner{
    grid-template-columns:1fr;
    padding:36px 26px;
    gap:32px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  #breadcrumb{
    padding:130px 0 0;
  }

  #post-header{
    padding:24px 0 32px;
  }

  .post-header-inner h1{
    font-size:clamp(28px,8vw,38px);
  }

  .post-image-wrap{
    border-radius:16px;
  }

  #post-body{
    padding-top:36px;
  }

  .post-body-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  /*
   * TOC stays compact on mobile.
   */
  .toc-inner{
    padding:18px 16px;
  }

  .toc-link{
    font-size:13px;
    padding:8px 10px;
  }

  /*
   * Article typography.
   */
  .post-content{
    font-size:17px;
    line-height:1.8;
  }

  .post-content h2{
    font-size:25px;
  }

  .post-content h3{
    font-size:20px;
  }

  .post-content blockquote{
    padding:22px 20px;
  }

  /*
   * Related blogs become one-column.
   */
  .related-sidebar-list{
    grid-template-columns:1fr;
    gap:16px;
  }

  .related-mini-card{
    display:grid;
    grid-template-columns:105px minmax(0,1fr);
    gap:12px;

    padding-bottom:16px;
    border-bottom:1px solid var(--line);
  }

  .related-mini-card:last-child{
    border-bottom:none;
    padding-bottom:0;
  }

  .related-mini-image{
    width:105px;
    height:80px;
    margin:0;
  }

  .related-mini-meta{
    margin-top:1px;
    margin-bottom:5px;
  }

  .related-mini-title{
    font-size:13.5px;
  }

  /*
   * Existing bottom related section.
   */
  .post-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .post-img-wrap{
    height:200px;
  }

  .author-card{
    flex-direction:column;
    text-align:center;
    padding:26px 24px;
  }

  .post-share-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .post-contact-inner{
    padding:30px 20px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:400px){

  .related-mini-card{
    grid-template-columns:90px minmax(0,1fr);
  }

  .related-mini-image{
    width:90px;
    height:72px;
  }

  .related-mini-title{
    font-size:13px;
  }

  .post-content{
    font-size:16.5px;
  }
}