:root{
    --bg:#FFFFFF;
    --panel:#F6FAFD;
    --panel-deep:#EDF5FA;
    --ink:#1A1D21;
    --ink-soft:#5C6670;
    --ink-faint:#98A1A9;
    --teal:#2892C9;
    --teal-deep:#145E8C;
    --teal-pale:#CDEAF9;
    --sky:#A9DCF2;
    --amber:#E7A23C;
    --amber-deep:#C57F22;
    --white:#FFFFFF;
    --line:#E6EAED;
    --shadow: 0 20px 60px -20px rgba(20,25,30,0.14);
    --shadow-lift: 0 28px 56px -18px rgba(20,25,30,0.22);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --radius: 4px;
    font-size: 16px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    word-break:keep-all;
  }
  h1,h2,h3,.serif{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--ink);
    margin:0;
    letter-spacing:-0.02em;
    font-weight:800;
    word-break:keep-all;
  }
  p{ margin:0; word-break:keep-all; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; cursor:pointer; border:none; }
  ul{ margin:0; padding:0; list-style:none; }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.14em;
    color:var(--teal-deep);
    text-transform:uppercase;
  }
  .eyebrow::before{
    content:"";
    width:18px;
    height:1px;
    background:var(--teal-deep);
    display:inline-block;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
  }
  .logo{
    display:flex;
    align-items:baseline;
    flex:0 0 auto;
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:800;
    font-size:21px;
    letter-spacing:-0.03em;
    color:var(--ink);
  }
  .logo-c{ color:var(--teal-deep); }
  nav.main-nav{
    display:flex;
    gap:6px;
    align-items:center;
  }
  .nav-item{
    position:relative;
  }
  .nav-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:inherit;
    font-size:15px;
    font-weight:500;
    color:var(--ink-soft);
    background:none;
    border:none;
    padding:10px 12px;
    border-radius:6px;
    cursor:pointer;
    transition:color .3s var(--ease), background .3s var(--ease);
  }
  .nav-link:hover{ color:var(--teal-deep); background:var(--panel); }

  .header-cta{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .tel-mini{
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 26px;
    border-radius:2px;
    font-weight:600;
    font-size:14.5px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--teal-deep);
    color:var(--white);
  }
  .btn-primary:hover{
    background:var(--teal);
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 14px 24px -12px rgba(28,87,80,0.55);
  }
  .btn-primary:active{ transform:translateY(0) scale(0.98); }
  .btn-amber{
    background:var(--amber);
    color:#2A1B04;
  }
  .btn-amber:hover{
    background:var(--amber-deep);
    color:var(--white);
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 14px 24px -12px rgba(197,127,34,0.55);
  }
  .btn-amber:active{ transform:translateY(0) scale(0.98); }
  .btn-outline{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
  }
  .btn-outline:hover{
    border-color:var(--teal-deep);
    color:var(--teal-deep);
    transform:scale(1.02);
  }
  .btn-outline:active{ transform:scale(0.98); }
  .btn-sm{ padding:10px 18px; font-size:13.5px; }
  .burger{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    padding:104px 0 76px;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:-36px;
    z-index:0;
    opacity:.42;
    background-image:
      radial-gradient(circle at 16% 28%, rgba(40,146,201,.16) 0 2px, transparent 2.5px),
      radial-gradient(circle at 82% 74%, rgba(231,162,60,.13) 0 2px, transparent 2.5px);
    background-size:34px 34px, 42px 42px;
    transform:translate3d(0, var(--bg-shift-y, 0px), 0);
    will-change:transform;
    pointer-events:none;
  }
  .hero .hero-grid{ position:relative; z-index:1; }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  .hero .eyebrow{
    background:var(--teal-pale);
    padding:8px 16px;
    border-radius:20px;
  }
  .hero .eyebrow::before{ display:none; }
  .hero h1{
    font-size:clamp(34px, 4.6vw, 54px);
    line-height:1.28;
    font-weight:700;
    margin:18px 0 22px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--teal-deep);
    position:relative;
  }
  .hero-sub{
    font-size:17px;
    color:var(--ink-soft);
    max-width:480px;
    margin-bottom:34px;
  }
  .hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:38px;
  }
  /* signature brand mark visual */
  .brand-mark{
    position:relative;
    aspect-ratio: 4 / 4.2;
    border-radius:20px;
    background:
      radial-gradient(circle at 88% 92%, rgba(231,162,60,0.16), transparent 45%),
      radial-gradient(circle at 8% 8%, rgba(40,146,201,0.12), transparent 40%),
      var(--white);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px;
  }
  .brand-mark svg{
    width:100%;
    height:100%;
  }
  .clean-illustration{
    --icon-primary:var(--teal-deep);
    --icon-accent:var(--teal);
    --icon-soft:var(--teal-pale);
    --icon-detail:var(--sky);
    overflow:visible;
  }
  .clean-illustration .primary-fill{ fill:var(--icon-primary); }
  .clean-illustration .accent-fill{ fill:var(--icon-accent); }
  .clean-illustration .soft-fill{ fill:var(--icon-soft); }
  .clean-illustration .window-grid{ fill:#fff; opacity:.92; }
  .clean-illustration .primary-stroke,
  .clean-illustration .detail-stroke,
  .clean-illustration .airflow-stroke,
  .clean-illustration .custom-detail{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .clean-illustration .primary-stroke{ stroke:var(--icon-primary); stroke-width:6; }
  .clean-illustration .detail-stroke{ stroke:var(--icon-detail); stroke-width:6; }
  .clean-illustration .airflow-stroke{ stroke:var(--icon-accent); stroke-width:6; }
  .clean-illustration .custom-detail{ stroke:#fff; stroke-width:5; }

  /* ---------- Stat strip ---------- */
  .stat-strip{
    background:var(--ink);
    color:var(--white);
  }
  .stat-strip .wrap{
    display:flex;
    justify-content:center;
    padding:30px 32px;
  }
  .stat{
    text-align:center;
    padding:0 12px;
  }
  .stat-single{
    display:flex;
    align-items:baseline;
    gap:12px;
  }
  .stat b{
    display:block;
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:26px;
    color:var(--sky);
    font-weight:600;
  }
  .stat span{
    font-size:13.5px;
    color:rgba(255,255,255,0.65);
    letter-spacing:0.02em;
  }

  /* ---------- Section shared ---------- */
  section{ padding:96px 0; }
  .section-head{
    max-width:640px;
    margin-bottom:52px;
  }
  .section-head h2{
    font-size:clamp(26px, 3vw, 36px);
    margin-top:14px;
    line-height:1.35;
  }
  .section-head p{
    margin-top:14px;
    color:var(--ink-soft);
    font-size:15.5px;
  }
  .fade-up{
    opacity:0;
    transform:translateY(22px);
    filter:blur(6px);
    transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
    transition-delay:calc(var(--index, 0) * 80ms);
  }
  .fade-up.in-view{ opacity:1; transform:translateY(0); filter:blur(0); }

  /* ---------- Services ---------- */
  .services{ background:var(--panel); }
  .service-layout{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:26px;
  }
  .service-main{
    background:linear-gradient(160deg, var(--panel), var(--panel-deep));
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:6px;
    padding:44px 40px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:420px;
    box-shadow:var(--shadow);
  }
  .service-main::after{
    content:"";
    position:absolute;
    right:-60px; bottom:-60px;
    width:220px; height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(40,146,201,0.14), transparent 70%);
  }
  .service-tag{
    display:inline-block;
    background:var(--amber);
    color:#2A1B04;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.04em;
    padding:5px 12px;
    border-radius:2px;
    margin-bottom:20px;
    width:fit-content;
  }
  .service-main h3{
    font-size:30px;
    margin-bottom:14px;
    color:var(--ink);
  }
  .service-main p{
    color:var(--ink-soft);
    font-size:15px;
    max-width:400px;
    margin-bottom:26px;
  }
  .service-main ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 16px;
    margin-bottom:30px;
  }
  .service-main ul li{
    font-size:13.5px;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .service-main ul li svg{ flex-shrink:0; }

  .sub-services{
    display:flex;
    flex-direction:column;
    gap:26px;
  }
  .sub-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    padding:26px 28px;
    display:flex;
    gap:18px;
    align-items:flex-start;
    flex:1;
    box-shadow:var(--shadow);
    transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .sub-card:hover{
    border-color:var(--teal);
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .sub-icon{
    width:46px; height:46px;
    border-radius:50%;
    background:var(--teal-pale);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--teal-deep);
  }
  .sub-icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .sub-card h4{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:18px;
    margin-bottom:6px;
    color:var(--ink);
  }
  .sub-card p{
    font-size:13.8px;
    color:var(--ink-soft);
  }

  /* ---------- Process ---------- */
  .process-track{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    position:relative;
  }
  .process-track::before{
    content:"";
    position:absolute;
    top:26px; left:0; right:0;
    height:1px;
    background:var(--line);
  }
  .step{
    padding-right:24px;
    position:relative;
  }
  .step-num{
    width:52px; height:52px;
    border-radius:50%;
    background:var(--bg);
    border:1px solid var(--teal);
    color:var(--teal-deep);
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:700;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    position:relative;
    z-index:2;
  }
  .step h4{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:17.5px;
    margin-bottom:10px;
  }
  .step p{
    font-size:13.8px;
    color:var(--ink-soft);
  }

  /* ---------- Why us ---------- */
  .why{ background:var(--panel); }
  .why-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
  }
  .why-card{
    background:var(--white);
    padding:30px 24px;
    border-radius:6px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .why-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .why-icon{
    width:44px; height:44px;
    margin-bottom:20px;
  }
  .why-card h4{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:16.5px;
    margin-bottom:10px;
  }
  .why-card p{
    font-size:13.5px;
    color:var(--ink-soft);
  }

  /* ---------- Testimonials ---------- */
  .quote-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .quote-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    padding:30px 26px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:var(--shadow);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .quote-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .quote-mark{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:40px;
    color:var(--sky);
    line-height:1;
    margin-bottom:6px;
  }
  .quote-card p.qtext{
    font-size:14.5px;
    color:var(--ink);
    line-height:1.7;
    margin-bottom:22px;
  }
  .qauthor{
    display:flex;
    align-items:center;
    gap:10px;
    border-top:1px solid var(--line);
    padding-top:16px;
  }
  .qavatar{
    width:36px; height:36px;
    border-radius:50%;
    background:var(--teal-pale);
    color:var(--teal-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:13px;
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .qauthor b{ display:block; font-size:13.5px; }
  .qauthor span{ display:block; font-size:12px; color:var(--ink-faint); }

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--teal-deep);
    color:var(--white);
    padding:64px 0;
  }
  .cta-banner .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .cta-banner h3{
    font-size:26px;
    color:var(--white);
    max-width:520px;
    line-height:1.4;
  }
  .cta-banner p{
    color:rgba(255,255,255,0.7);
    font-size:14px;
    margin-top:10px;
  }

  /* ---------- Contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:26px;
  }
  .form-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    padding:36px;
    box-shadow:var(--shadow);
  }
  .field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
  }
  .field{ margin-bottom:16px; }
  .field label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  .field input, .field select, .field textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:3px;
    font-family:inherit;
    font-size:14px;
    background:var(--bg);
    color:var(--ink);
    transition:border-color .3s var(--ease);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;
    border-color:var(--teal);
  }
  .field textarea{ resize:vertical; min-height:110px; }
  .form-note{
    font-size:12.5px;
    color:var(--ink-faint);
    margin-top:14px;
  }

  .info-card{
    background:var(--ink);
    color:var(--white);
    border-radius:6px;
    padding:36px 32px;
    display:flex;
    flex-direction:column;
    gap:22px;
    height:100%;
    box-shadow:var(--shadow-lift);
  }
  .info-row{
    display:flex;
    gap:14px;
    align-items:flex-start;
    border-bottom:1px solid rgba(255,255,255,0.12);
    padding-bottom:20px;
  }
  .info-row:last-of-type{ border-bottom:none; padding-bottom:0; }
  .info-row h5{
    font-size:13px;
    color:rgba(255,255,255,0.55);
    margin-bottom:5px;
    font-weight:500;
    letter-spacing:0.03em;
  }
  .info-row p{
    font-size:15px;
    font-weight:600;
  }
  .info-icon{
    width:20px; flex-shrink:0; margin-top:2px;
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--ink);
    color:rgba(255,255,255,0.55);
    padding:48px 0 30px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:24px;
    padding-bottom:28px;
    border-bottom:1px solid rgba(255,255,255,0.12);
    margin-bottom:22px;
  }
  .footer-logo{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:19px;
    color:var(--white);
    font-weight:800;
    letter-spacing:-0.03em;
    margin-bottom:10px;
  }
  .footer-logo .logo-c{ color:var(--sky); }
  .footer-info{ font-size:12.8px; line-height:2; }
  .footer-links{ display:flex; gap:20px; }
  .footer-links a{ font-size:13px; }
  .footer-links a:hover{ color:var(--white); }
  .copyright{ font-size:12px; }

  /* ---------- Scroll top ---------- */
  .totop{
    position:fixed;
    right:26px; bottom:26px;
    width:46px; height:46px;
    border-radius:50%;
    background:var(--teal-deep);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
    z-index:90;
  }
  .totop.show{ opacity:1; pointer-events:auto; }
  .totop:hover{ transform:translateY(-3px) scale(1.05); box-shadow:var(--shadow-lift); }
  .totop:active{ transform:scale(0.96); }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    nav.main-nav{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .brand-mark{ max-width:420px; margin:0 auto; }
    .service-layout{ grid-template-columns:1fr; }
    .stat-strip .wrap{ padding:26px 20px; }
    .process-track{ grid-template-columns:1fr 1fr; row-gap:36px; }
    .process-track::before{ display:none; }
    .why-grid{ grid-template-columns:1fr 1fr; }
    .quote-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .cta-banner .wrap{ flex-direction:column; align-items:flex-start; }
  }
  @media (max-width: 560px){
    .wrap{ padding:0 20px; }
    .why-grid{ grid-template-columns:1fr; }
    .service-main ul{ grid-template-columns:1fr; }
    .header-cta .btn span.long{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    .hero::before,
    .page-hero::before{ transform:none !important; }
  }

  /* ================= Sub-service pages ================= */
  .breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--ink-faint);
    padding:22px 0 0;
  }
  .breadcrumb a{ color:var(--ink-faint); transition:color .3s var(--ease); }
  .breadcrumb a:hover{ color:var(--teal-deep); }
  .breadcrumb span.current{ color:var(--ink-soft); font-weight:600; }

  .page-hero{
    padding:40px 0 70px;
  }
  .page-hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:48px;
    align-items:center;
  }
  .page-hero h1{
    font-size:clamp(30px, 4vw, 44px);
    line-height:1.3;
    margin:16px 0 18px;
  }
  .page-hero h1 em{
    font-style:normal;
    color:var(--teal-deep);
  }
  .page-hero-sub{
    font-size:16px;
    color:var(--ink-soft);
    max-width:460px;
    margin-bottom:28px;
  }
  .page-hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .page-hero-visual{
    background:linear-gradient(160deg, var(--panel), var(--panel-deep));
    border:1px solid var(--line);
    border-radius:20px;
    aspect-ratio:4/3.4;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    box-shadow:var(--shadow);
  }
  .page-hero-visual svg{ width:100%; height:100%; }

  .feature-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px 22px;
    margin-top:8px;
  }
  .feature-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14.5px;
    color:var(--ink);
  }
  .feature-list li svg{ flex-shrink:0; margin-top:2px; }

  /* before / after sample card (illustrative, not real photos) */
  .ba-section{ background:var(--panel); }
  .ba-notice{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:8px 16px;
    font-size:12.5px;
    color:var(--ink-faint);
    margin-bottom:34px;
  }
  .ba-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .ba-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .ba-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .ba-visual{
    position:relative;
    aspect-ratio:4/3;
    display:flex;
  }
  .ba-half{
    width:50%;
    height:100%;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:10px;
  }
  .ba-before{
    background:linear-gradient(160deg, #C7CBCE, #9AA1A6);
    filter:saturate(0.5) brightness(0.92);
  }
  .ba-after{
    background:linear-gradient(160deg, var(--teal-pale), var(--sky));
  }
  .ba-tag{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.04em;
    padding:4px 9px;
    border-radius:3px;
    background:rgba(0,0,0,0.35);
    color:#fff;
  }
  .ba-after .ba-tag{ background:var(--teal-deep); }
  .ba-divider{
    position:absolute;
    left:50%; top:0; bottom:0;
    width:2px;
    background:var(--white);
    transform:translateX(-1px);
  }
  .ba-body{ padding:18px 20px 22px; }
  .ba-body h4{
    font-family:'Pretendard', sans-serif;
    font-weight:700;
    font-size:15.5px;
    margin-bottom:6px;
  }
  .ba-body p{
    font-size:13px;
    color:var(--ink-soft);
  }
  .ba-photo{
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--panel-deep);
  }
  .ba-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ba-soon{
    display:inline-block;
    font-size:10.5px;
    font-weight:600;
    color:var(--ink-faint);
    background:var(--panel);
    border-radius:10px;
    padding:2px 8px;
    margin-left:6px;
    vertical-align:middle;
  }

  @media (max-width: 980px){
    .page-hero-grid{ grid-template-columns:1fr; }
    .page-hero-visual{ max-width:420px; margin:0 auto; }
    .ba-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 560px){
    .feature-list{ grid-template-columns:1fr; }
  }

  /* ================= Page themes ================= */
  .page-hero{ position:relative; overflow:hidden; }
  .page-hero::before{
    content:"";
    position:absolute;
    inset:-36px;
    z-index:0;
    opacity:0.7;
    transform:translate3d(0, var(--bg-shift-y, 0px), 0);
    will-change:transform;
    pointer-events:none;
  }
  .page-hero .page-hero-grid{ position:relative; z-index:1; }

  /* -- Office: navy / grid pattern -- */
  body.theme-office .page-hero::before{
    background-image:radial-gradient(#C7D3E6 1.6px, transparent 1.6px);
    background-size:20px 20px;
  }
  body.theme-office{ --icon-primary:#1D2F4D; --icon-accent:#2F4C7A; --icon-soft:#E4EAF5; --icon-detail:#AEC0DC; }
  body.theme-office .eyebrow,
  body.theme-office .page-hero h1 em,
  body.theme-office .breadcrumb span.current{ color:#2F4C7A; }
  body.theme-office .eyebrow::before{ background:#2F4C7A; }
  body.theme-office .feature-list li svg{ stroke:#2F4C7A; }
  body.theme-office .page-hero-visual{ background:linear-gradient(160deg, #E4EAF5, var(--white)); border-color:#C7D3E6; }
  body.theme-office .ba-after{ background:linear-gradient(160deg, #E4EAF5, #6E86B0); }
  body.theme-office .ba-after .ba-tag{ background:#2F4C7A; }
  body.theme-office .cta-banner{ background:#1D2F4D; }
  body.theme-office .step-num{ border-color:#2F4C7A; color:#2F4C7A; }

  /* -- Aircon: cyan / airflow wave pattern -- */
  body.theme-aircon .page-hero::before{
    background-image:repeating-linear-gradient(100deg, #DCF4F5 0px, #DCF4F5 2px, transparent 2px, transparent 26px);
  }
  body.theme-aircon{ --icon-primary:#0E6570; --icon-accent:#1B9AAA; --icon-soft:#DCF4F5; --icon-detail:#6FC9D2; }
  body.theme-aircon .eyebrow,
  body.theme-aircon .page-hero h1 em,
  body.theme-aircon .breadcrumb span.current{ color:#0E6570; }
  body.theme-aircon .eyebrow::before{ background:#0E6570; }
  body.theme-aircon .feature-list li svg{ stroke:#0E6570; }
  body.theme-aircon .page-hero-visual{ background:linear-gradient(160deg, #DCF4F5, var(--white)); border-color:#B7E6E9; }
  body.theme-aircon .ba-after{ background:linear-gradient(160deg, #DCF4F5, #6FC9D2); }
  body.theme-aircon .ba-after .ba-tag{ background:#0E6570; }
  body.theme-aircon .cta-banner{ background:#0E6570; }
  body.theme-aircon .step-num{ border-color:#1B9AAA; color:#0E6570; }

  /* -- Stairs: graphite / stepped diagonal pattern -- */
  body.theme-stairs .page-hero::before{
    background-image:repeating-linear-gradient(135deg, #E4E7E9 0px, #E4E7E9 10px, transparent 10px, transparent 22px);
  }
  body.theme-stairs{ --icon-primary:#3E4A50; --icon-accent:#5B6B73; --icon-soft:#E4E7E9; --icon-detail:#8FA0A8; }
  body.theme-stairs .eyebrow,
  body.theme-stairs .page-hero h1 em,
  body.theme-stairs .breadcrumb span.current{ color:#3E4A50; }
  body.theme-stairs .eyebrow::before{ background:#3E4A50; }
  body.theme-stairs .feature-list li svg{ stroke:#3E4A50; }
  body.theme-stairs .page-hero-visual{ background:linear-gradient(160deg, #E9ECEE, var(--white)); border-color:#D3D9DC; }
  body.theme-stairs .ba-after{ background:linear-gradient(160deg, #E9ECEE, #8FA0A8); }
  body.theme-stairs .ba-after .ba-tag{ background:#3E4A50; }
  body.theme-stairs .cta-banner{ background:#3E4A50; }
  body.theme-stairs .step-num{ border-color:#5B6B73; color:#3E4A50; }

  /* -- Custom: terracotta / scattered dot pattern -- */
  body.theme-custom .page-hero::before{
    background-image:
      radial-gradient(#F0C1A8 2px, transparent 2px),
      radial-gradient(#F0C1A8 2px, transparent 2px);
    background-size:34px 34px;
    background-position:0 0, 17px 17px;
  }
  body.theme-custom{ --icon-primary:#B85B3C; --icon-accent:#D97757; --icon-soft:#F7E4DB; --icon-detail:#E8A88C; }
  body.theme-custom .eyebrow,
  body.theme-custom .page-hero h1 em,
  body.theme-custom .breadcrumb span.current{ color:#B85B3C; }
  body.theme-custom .eyebrow::before{ background:#B85B3C; }
  body.theme-custom .feature-list li svg{ stroke:#B85B3C; }
  body.theme-custom .page-hero-visual{ background:linear-gradient(160deg, #F7E4DB, var(--white)); border-color:#F0C9B7; }
  body.theme-custom .ba-after{ background:linear-gradient(160deg, #F7E4DB, #E8A88C); }
  body.theme-custom .ba-after .ba-tag{ background:#B85B3C; }
  body.theme-custom .cta-banner{ background:#B85B3C; }
  body.theme-custom .step-num{ border-color:#D97757; color:#B85B3C; }