@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap');

*{box-sizing:border-box} html,body{margin:0;background:#050b18;color:#fff;font-family:Arial,'Noto Sans KR',sans-serif} a{color:inherit;text-decoration:none}
.hero{min-height:100vh;position:relative;overflow:hidden;background:
 radial-gradient(ellipse at 72% 72%,rgba(38,106,190,.38),transparent 29%),
 radial-gradient(ellipse at 85% 90%,rgba(89,136,205,.22),transparent 30%),
 linear-gradient(135deg,#071326 0%,#06101e 45%,#0a1830 100%)}
.hero:before{content:"";position:absolute;width:78vw;height:78vw;border-radius:50%;right:-23vw;bottom:-49vw;border:1px solid rgba(154,199,255,.32);box-shadow:0 0 90px rgba(54,126,214,.18) inset,0 0 70px rgba(41,114,207,.14);background:radial-gradient(circle at 34% 25%,rgba(89,158,235,.24),rgba(10,37,70,.32) 35%,rgba(3,10,20,.92) 70%)}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,transparent,black 35%,black)}
.orbit{position:absolute;border:1px solid rgba(112,177,255,.2);border-radius:50%;width:78vw;height:25vw;right:-10vw;bottom:7vw;transform:rotate(-11deg)}
header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;position:relative;z-index:10;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{font-size:28px;font-weight:800;letter-spacing:-1px}.logo small{display:block;font-size:9px;font-weight:400;letter-spacing:.6px;margin-top:-2px}.logo i{display:inline-block;width:26px;height:26px;border-radius:50%;border:6px solid #a7c9ef;margin-right:10px;vertical-align:-4px;transform:skew(-15deg)}
nav{display:flex;gap:38px;font-size:12px;letter-spacing:.05em;color:#dfe9f7} nav a{opacity:.8;transition:.25s} nav a:hover{opacity:1;color:#79b8ff}.contact{border:1px solid rgba(255,255,255,.45);padding:12px 22px;border-radius:28px}
.copy{position:relative;z-index:3;padding:12vh 6vw 0;max-width:940px}.eyebrow{font-size:18px;letter-spacing:.42em;color:#9dbce2;margin-bottom:28px;margin-left:5px;}.copy h1{font-size:clamp(54px,6vw,90px);line-height:.96;letter-spacing:-.055em;margin:0;font-weight:500}.copy h1 em{font-style:normal;color:#77adf5}.copy p{font-size:18px;line-height:1.6;color:#b9c7d9;max-width:620px;margin:28px 0}.scroll{margin-top:48px;font-size:10px;letter-spacing:.42em;color:#91a4bc}.scroll:before{content:"";display:inline-block;width:34px;height:1px;background:#8fa8c6;vertical-align:middle;margin-right:14px}
.services{position:absolute;z-index:5;left:5vw;right:5vw;bottom:0;height:205px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.17);border-bottom:0;border-radius:16px 16px 0 0;overflow:hidden;backdrop-filter:blur(15px);background:rgba(12,28,50,.23)}
.service{position:relative;padding:30px 34px;border-right:1px solid rgba(255,255,255,.14);overflow:hidden;transition:.55s cubic-bezier(.2,.8,.2,1)}.service:last-child{border:0}.service:before{content:"";position:absolute;inset:100% 0 0;background:linear-gradient(145deg,rgba(43,108,184,.75),rgba(8,28,53,.88));transition:.55s cubic-bezier(.2,.8,.2,1)}.service:hover:before{inset:0}.num,.title,.detail,.arrow{position:relative;z-index:2}.num{font-size:12px;color:#7fb5fa;letter-spacing:.12em}.title{font-size:23px;margin-top:15px;transition:.45s;transform:translateY(22px)}.detail{font-size:14px;line-height:1.65;color:#d4deeb;max-width:360px;opacity:0;transform:translateY(35px);transition:.45s;margin-top:14px}.arrow{position:absolute;right:30px;bottom:28px;width:38px;height:38px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;opacity:.5;transition:.35s}.service:hover .title{transform:translateY(0)}.service:hover .detail{opacity:1;transform:translateY(0)}.service:hover .arrow{opacity:1;transform:translateX(4px)}
@media(max-width:850px){
  .hero{min-height:100svh;padding-bottom:0}
  .hero:before{width:120vw;height:120vw;right:-58vw;bottom:8vh;opacity:.72}
  .orbit{width:125vw;height:44vw;right:-46vw;bottom:25vh}
  header{padding:0 20px;height:72px}
  nav{display:none}
  .contact{padding:10px 15px;font-size:10px}
  .logo{font-size:23px}.logo i{width:21px;height:21px;border-width:5px;margin-right:7px}
  .copy{padding:8vh 22px 300px;max-width:none}
  .eyebrow{font-size:15px;margin-bottom:20px}
  .copy h1{font-size:clamp(42px,13vw,58px);line-height:.98}
  .copy p{font-size:17px;line-height:1.65;margin-top:22px;max-width:92%}
  .scroll{display:none}

  /* Mobile: horizontal cards become a clean vertical accordion */
  .services{
    left:20px;right:20px;bottom:18px;height:auto;
    display:block;overflow:visible;
    border:0;border-top:1px solid rgba(255,255,255,.24);
    border-radius:0;background:rgba(7,20,38,.34);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
  }
  .service{
    min-width:0;padding:0 2px;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    cursor:pointer;overflow:hidden
  }
  .service:before{display:none}
  .num{position:absolute;left:2px;top:22px;font-size:10px}
  .title{
    margin:0;padding:19px 45px 18px 35px;
    font-size:20px;line-height:1.25;transform:none
  }
  .detail{
    max-width:none;margin:0;padding:0 44px 0 35px;
    font-size:16px;line-height:1.5;
    opacity:0;max-height:0;transform:translateY(-7px);
    transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,transform .45s ease,padding .45s ease
  }
  .arrow{
    right:3px;top:15px;bottom:auto;width:30px;height:30px;
    border-color:rgba(255,255,255,.28);opacity:.72;
    transition:.35s ease
  }
  .service:hover .title{transform:none}
  .service:hover .detail{opacity:0;transform:translateY(-7px)}
  .service:hover .arrow{opacity:.72;transform:none}
  .service.active .detail{
    opacity:1;max-height:95px;transform:none;padding-bottom:18px
  }
  .service.active .arrow{transform:rotate(90deg);opacity:1}
  .service.active .title{color:#a9d0ff}
}
@media(max-width:430px){
  .copy{padding-top:7vh;padding-bottom:285px}
  .copy h1{font-size:43px}
  .services{left:18px;right:18px}
}



/* ABOUT US — preview v3 */
.about-clean{
  position:relative;
  background:#f8f9fb;
  color:#111c2b;
  overflow:hidden;
}
.about-intro{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:108px 7vw 92px;
}
.about-label{
  display:flex;align-items:center;gap:18px;
  margin-bottom:34px;
  color:#3677d5;
  font-size:20px;font-weight:600;letter-spacing:.26em;
}
.about-label::after{content:"";width:72px;height:1px;background:#78a6e2}
.about-intro h2{
  max-width:940px;
  margin:0;
  font-size:clamp(48px,4.5vw,72px);
  line-height:1.03;
  letter-spacing:-.055em;
  font-weight:500;
}
.about-intro h2 span{color:#3978d7}
.about-desc{
  margin:40px 0 0;
  font-size:16px;
  line-height:1.9;
  color:#26384a;
  word-break:keep-all;
}
.about-side{
  position:absolute;
  right:3vw;top:96px;
  width:92px;height:245px;
  border-left:1px solid #d9e2ec;
  padding-left:20px;
  color:#7a8ca0;
  z-index:2;
}
.about-side strong{display:block;color:#152337;font-size:11px;margin-bottom:18px}
.about-side span{display:block;font-size:9px;line-height:1.8;letter-spacing:.16em}
.about-orbit{
  position:absolute;
  width:440px;height:440px;
  border:1px solid rgba(58,120,215,.13);
  border-radius:50%;
  right:-230px;top:34px;
  pointer-events:none;
}
.about-orbit::before,.about-orbit::after{
  content:"";position:absolute;border:1px solid rgba(58,120,215,.09);border-radius:50%
}
.about-orbit::before{inset:0 35%}
.about-orbit::after{inset:35% 0}

.values{
  background:#f5f0e7;
  padding:62px 5vw 90px;
}
.values-inner{max-width:1540px;margin:0 auto}
.values-title{
  display:flex;align-items:center;gap:18px;
  margin-bottom:28px;
  font-size:20px;font-weight:650;letter-spacing:.25em;color:#3677d5;
}
.values-title::after{content:"";width:70px;height:1px;background:#8aadd9}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}
.value-item{min-width:0}
.value-image{
  height:285px;
  overflow:hidden;
  background:#cbd7e2;
}
.value-image img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.value-item:hover .value-image img{transform:scale(1.035)}
.value-copy{padding-top:23px}
.value-line{
  width:30px;height:2px;background:#2f73d3;
  margin-bottom:12px;
  transition:width .45s ease;
}
.value-item:hover .value-line{width:58px}
.value-copy h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.02em;
}
.value-copy strong{
  display:block;
  font-size:13px;
  color:#334d63;
  font-weight:500;
  margin-bottom:10px;
}
.value-copy p{
  margin:0;
  max-width:420px;
  font-size:12px;
  line-height:1.75;
  color:#758492;
}

.about-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1);
}
.about-reveal.on{opacity:1;transform:none}

@media(max-width:900px){
  .about-intro{padding:78px 22px 68px}
  .about-side{display:none}
  .about-orbit{right:-310px;top:0}
  .about-intro h2{font-size:clamp(42px,10vw,58px)}
  .about-desc{font-size:14px;line-height:1.85;margin-top:30px}
  .values{padding:52px 22px 68px}
  .values-grid{gap:18px}
  .value-image{height:210px}
}
@media(max-width:650px){
  .about-intro{padding-top:68px}
  .about-label{margin-bottom:25px}
  .about-intro h2{font-size:43px}
  .values-grid{grid-template-columns:1fr;gap:44px}
  .value-image{height:58vw;min-height:220px}
  .value-copy{padding-top:17px}
}



/* HERO refinement v4 */
@media(min-width:851px){
  .copy{padding-bottom:150px}
  .services{
    height:82px;
    bottom:22px;
    overflow:visible;
    background:rgba(6,18,34,.34);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
  }
  .service{
    height:82px;
    min-height:82px;
    padding:0 28px;
    overflow:hidden;
    display:flex;
    align-items:center;
    transition:
      height .52s cubic-bezier(.2,.75,.2,1),
      transform .52s cubic-bezier(.2,.75,.2,1),
      background .35s ease,
      border-color .35s ease;
  }
  .service .title{
    margin:0;
    transform:none;
    font-size:17px;
    line-height:1.2;
    transition:transform .5s cubic-bezier(.2,.75,.2,1),color .3s ease;
  }
  .service .detail{
    position:absolute;
    left:28px;right:60px;bottom:25px;
    margin:0;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .32s ease .08s,transform .45s ease .05s;
  }
  .service .arrow{bottom:25px}
  .service:hover{
    height:230px;
    transform:translateY(-148px);
    background:rgba(18,49,82,.72);
    border-color:rgba(137,191,245,.30);
  }
  .service:hover .title{
    transform:translateY(-55px);
    color:#b9d9ff;
  }
  .service:hover .detail{opacity:1;transform:none}
}



/* ABOUT / VALUES color refinement v4 */
.about-clean{background:#f8fafc}
.values{
  background:
    radial-gradient(circle at 82% 16%,rgba(46,105,170,.18),transparent 27%),
    linear-gradient(135deg,#0b1a2c 0%,#0e223a 48%,#081727 100%);
  color:#fff;
}
.values-title{color:#83b8f1}
.values-title::after{background:rgba(131,184,241,.62)}
.value-image{background:#132a43}
.value-copy h3{color:#fff}
.value-copy strong{color:#b8cce0}
.value-copy p{color:#8399ad}
.value-line{background:#65a6e8}



/* VALUES palette v5 — pale HB&I blue */
.values{
  background:
    radial-gradient(circle at 84% 10%, rgba(104,164,224,.12), transparent 30%),
    linear-gradient(135deg,#f3f8fd 0%,#edf5fc 48%,#e7f1fa 100%);
  color:#13243a;
}
.values-title{color:#3979cf}
.values-title::after{background:#9bbde3}
.value-image{background:#d9e6f1}
.value-copy h3{color:#14253a}
.value-copy strong{color:#3e5b75}
.value-copy p{color:#71879a}
.value-line{background:#3979cf}



/* HERO service strip v6 — flush to bottom, expands upward only */
@media(min-width:851px){
  .services{
    bottom:0;
    height:82px;
    overflow:visible;
  }
  .service{
    position:relative;
    height:82px;
    min-height:82px;
    transform:none;
    overflow:visible;
    align-self:end;
  }

  /* expanded glass background grows upward while its bottom edge stays fixed */
  .service::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;right:0;bottom:0;
    height:82px;
    background:rgba(7,22,40,.20);
    transition:
      height .52s cubic-bezier(.2,.75,.2,1),
      background .35s ease,
      box-shadow .35s ease;
    pointer-events:none;
  }
  .service:hover{
    height:82px;
    transform:none;
    background:transparent;
  }
  .service:hover::after{
    height:230px;
    background:rgba(31,82,135,.76);
    box-shadow:0 -18px 45px rgba(3,16,31,.14);
  }

  .service .title{
    position:absolute;
    left:28px;
    bottom:31px;
    margin:0;
    transform:none;
    transition:bottom .5s cubic-bezier(.2,.75,.2,1),color .3s ease;
  }
  .service:hover .title{
    bottom:176px;
    transform:none;
    color:#c3ddfb;
  }
  .service .detail{
    left:28px;right:62px;
    bottom:30px;
  }
  .service .arrow{bottom:25px}
}



/* HERO service strip v7 — one continuous panel, clipped content reveals upward */
@media(min-width:851px){
  .services{
    bottom:0;
    height:82px;
    overflow:visible;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .service{
    position:relative;
    height:82px;
    min-height:82px;
    padding:0;
    overflow:visible;
    background:transparent;
    transform:none;
    align-self:end;
    border-right:1px solid rgba(255,255,255,.14);
  }

  /* This is the actual card. It is short by default and grows upward. */
  .service::after{
    content:"";
    position:absolute;
    z-index:0;
    left:0;right:0;bottom:0;
    height:82px;
    border-top:1px solid rgba(255,255,255,.18);
    background:rgba(8,25,45,.58);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    transition:
      height .5s cubic-bezier(.2,.75,.2,1),
      background .4s ease,
      border-color .4s ease;
    pointer-events:none;
  }

  /* Title + description are always one block. The short card simply clips the description. */
  .service .title,
  .service .detail,
  .service .arrow{z-index:2}

  .service .title{
    position:absolute;
    left:28px;right:70px;
    bottom:31px;
    margin:0;
    font-size:17px;
    line-height:1.25;
    color:#fff;
    transform:none;
    transition:bottom .5s cubic-bezier(.2,.75,.2,1),color .35s ease;
  }

  .service .detail{
    position:absolute;
    left:28px;right:70px;
    bottom:-22px;
    margin:0;
    opacity:1;
    max-width:none;
    font-size:12px;
    line-height:1.65;
    color:rgba(226,238,249,.82);
    transform:none;
    transition:bottom .5s cubic-bezier(.2,.75,.2,1),color .35s ease;
  }

  .service .arrow{
    position:absolute;
    right:25px;
    bottom:24px;
    transition:bottom .5s cubic-bezier(.2,.75,.2,1),transform .4s ease;
  }

  .service:hover{
    height:82px;
    transform:none;
    background:transparent;
  }
  .service:hover::after{
    height:218px;
    background:rgba(18,58,98,.72);
    border-color:rgba(148,195,239,.30);
  }
  .service:hover .title{
    bottom:158px;
    color:#fff;
    transform:none;
  }
  .service:hover .detail{
    bottom:95px;
    opacity:1;
    transform:none;
    color:rgba(235,244,252,.9);
  }
  .service:hover .arrow{
    bottom:25px;
    transform:translateX(2px);
  }
}



/* v8 — unified ABOUT content grid */
:root{
  --hbni-content-x: 5.4vw;
  --hbni-content-max: 1280px;
}

.about-intro{
  width:auto;
  max-width:var(--hbni-content-max);
  margin:0 auto;
  padding:92px var(--hbni-content-x) 78px;
  box-sizing:content-box;
}

/* Label, headline and body now share exactly the same left edge */
.about-label,
.about-intro h2,
.about-desc{
  margin-left:0;
}

.about-label{margin-bottom:30px}

.about-intro h2{
  max-width:850px;
  font-size:clamp(46px,4.1vw,60px);
  line-height:1.03;
}

/* Body no longer stretches across the whole section */
.about-desc{
  margin-top:34px;
  font-size:15px;
  line-height:1.85;
}

/* Values uses the same outer grid, while the 3 visuals use the available width */
.values{
  padding:58px var(--hbni-content-x) 86px;
}
.values-inner{
  max-width:var(--hbni-content-max);
  margin:0 auto;
}
.values-title{margin-left:0}

@media(max-width:900px){
  :root{--hbni-content-x:22px}
  .about-intro{
    max-width:none;
    padding:72px var(--hbni-content-x) 62px;
    box-sizing:border-box;
  }
  .about-intro h2{max-width:700px}
  .about-desc{max-width:720px}
  .values{padding:50px var(--hbni-content-x) 68px}
}
@media(max-width:650px){
  .about-intro{padding-top:62px}
  .about-intro h2{font-size:42px}
  .about-desc{font-size:14px}
}



/* v10 — keep HERO as-is; align following sections to HERO's original 7vw grid */
:root{
  --hbni-hero-x:7vw;
}

/* ABOUT aligns to the HERO copy, not the other way around */
.about-intro{
  max-width:none;
  margin:0;
  padding-left:var(--hbni-hero-x);
  padding-right:var(--hbni-hero-x);
  box-sizing:border-box;
}
.about-label,
.about-intro h2,
.about-desc{
  margin-left:0;
}
.about-intro h2{max-width:850px}

/* lower three-column content follows the same left/right guide */
.values{
  padding-left:var(--hbni-hero-x);
  padding-right:var(--hbni-hero-x);
}
.values-inner{
  max-width:none;
  margin:0;
}

@media(max-width:850px){
  :root{--hbni-hero-x:22px}
  .about-intro,
  .values{
    padding-left:var(--hbni-hero-x);
    padding-right:var(--hbni-hero-x);
  }
}



/* =========================================================
   v11 — ONE GLOBAL CONTENT GRID
   Backgrounds may be full width, content always begins/ends at 10%.
========================================================= */
:root{
  --site-gutter:10%;
  --site-content:80%;
}

/* HEADER */
header{
  padding-left:var(--site-gutter) !important;
  padding-right:var(--site-gutter) !important;
  box-sizing:border-box;
}

/* HERO COPY */
.copy{
  width:var(--site-content) !important;
  max-width:none !important;
  margin-left:var(--site-gutter) !important;
  margin-right:var(--site-gutter) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}

/* HERO BOTTOM BUSINESS STRIP */
.services{
  left:var(--site-gutter) !important;
  right:var(--site-gutter) !important;
  width:auto !important;
}

/* ABOUT */
.about-intro{
  width:var(--site-content) !important;
  max-width:none !important;
  margin-left:var(--site-gutter) !important;
  margin-right:var(--site-gutter) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}
.about-label,
.about-intro h2,
.about-desc{
  margin-left:0 !important;
}
.about-intro h2{max-width:850px;margin-left:-3px!important;}

/* VALUES — background remains full bleed, contents align to same 10% grid */
.values{
  padding-left:0 !important;
  padding-right:0 !important;
}
.values-inner{
  width:var(--site-content) !important;
  max-width:none !important;
  margin-left:var(--site-gutter) !important;
  margin-right:var(--site-gutter) !important;
}
.values-title,
.values-grid{
  width:100%;
}

/* The first/last visual edges now land exactly on the text grid lines */
.values-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Decorative side UI stays outside the main content grid */
.about-side{right:2.5%}

/* MOBILE uses one consistent fixed gutter */
@media(max-width:850px){
  :root{
    --site-gutter:22px;
    --site-content:calc(100% - 44px);
  }
  header,
  .copy,
  .about-intro,
  .values-inner{
    box-sizing:border-box;
  }
  .services{
    left:var(--site-gutter) !important;
    right:var(--site-gutter) !important;
  }
}



/* =========================================================
   v12 — HERO business hover typography
   Make title + description read as one compact content group.
========================================================= */
@media (min-width:851px){
  .service{
    position:relative;
  }

  .service .title{
    font-size:17px;
    font-weight:600;
    line-height:1.25;
    transition:
      font-size .42s cubic-bezier(.2,.75,.25,1),
      bottom .42s cubic-bezier(.2,.75,.25,1),
      color .3s ease;
  }

  .service .detail{
    font-size:13px;
    line-height:1.65;
    max-width:82%;
    transition:
      bottom .42s cubic-bezier(.2,.75,.25,1),
      opacity .3s ease,
      transform .42s cubic-bezier(.2,.75,.25,1);
  }

  /* Expanded state: larger title, tighter title-description relationship */
  .service:hover .title{
    font-size:23px;
    bottom:145px;
  }

  .service:hover .detail{
    bottom:91px;
    opacity:.9;
    transform:none;
  }

  /* Keep the arrow visually secondary to the text block */
  .service:hover .arrow{
    transform:translateY(-4px);
  }
}



/* v13 — tighter title + description grouping on HERO business hover */
@media (min-width:851px){
  .service:hover .title{
    bottom:137px;
  }
  .service:hover .detail{
    bottom:99px;
    line-height:1.5;
  }
}



/* v14 — ABOUT content updated from supplied company copy */
.about-subline{
  max-width:920px;
  margin-top:18px;
  color:#3978df;
  font-size:clamp(18px,1.45vw,24px);
  line-height:1.5;
  font-weight:500;
  letter-spacing:-.03em;
}
.about-desc-rich{
  margin-top:38px !important;
}
.about-desc-rich p{
  margin:0 0 5px;
  font-size:15px;
  line-height:1.82;
  letter-spacing:-.025em;
}
.about-desc-rich p:last-child{margin-bottom:0}
.about-desc-rich strong{font-weight:650}
.about-desc-rich .about-closing{margin-top:30px}
.about-desc-rich .about-closing strong{
  display:inline-block;
  margin-bottom:3px;
  font-size:17px;
  color:#0a1a30;
}
@media(max-width:850px){
  .about-subline{font-size:17px;margin-top:14px}
  .about-desc-rich{margin-top:30px !important}
  .about-desc-rich p{font-size:14px;line-height:1.75}
}



html,body{overflow-x:hidden} body{overflow-y:auto!important}
.site-inner{width:80%;margin-left:10%;margin-right:10%;box-sizing:border-box}
.our-services-section{position:relative;background:#07172b;color:#fff;padding:118px 0 130px;overflow:hidden}
.our-services-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 18%,rgba(55,125,225,.22),transparent 31%),linear-gradient(125deg,transparent 30%,rgba(57,120,223,.07) 70%,transparent)}
.services-head,.service-bento{position:relative;z-index:1}
.section-kicker{display:flex;align-items:center;gap:18px;color:#75a9ff;font-size:20px;font-weight:700;letter-spacing:.24em}
.section-kicker i{display:block;width:70px;height:1px;background:#75a9ff}
.services-head-row{display:flex;justify-content:space-between;align-items:flex-end;margin:30px 0 58px}
.services-head-row h2{margin:0;font-size:clamp(50px,5vw,78px);font-weight:500;line-height:.98;letter-spacing:-.055em}
.services-head-row h2 span{color:#5d96ef}.services-head-row p{width:39%;margin:0 0 7px;color:#aebbd0;font-size:14px;line-height:1.8}
.service-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.svc-card{position:relative;min-height:390px;overflow:hidden;background:#102640;border:1px solid rgba(255,255,255,.11)}
.svc-wide{grid-column:span 3;min-height:465px}.svc-small{grid-column:span 2}
.svc-photo,.svc-shade,.svc-detail{position:absolute;inset:0}.svc-photo{background-size:cover;background-position:center;transition:transform .75s ease}
.c1 .svc-photo{background-image:url('https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=1500&q=82')}
.c2 .svc-photo{background-image:url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1500&q=82')}
.c3 .svc-photo{background-image:url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1200&q=82')}
.c4 .svc-photo{background-image:url('https://images.unsplash.com/photo-1507501336603-6e31db2be093?auto=format&fit=crop&w=1200&q=82')}
.c5 .svc-photo{background-image:url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1200&q=82')}
.svc-shade{background:linear-gradient(180deg,rgba(3,13,27,.05),rgba(3,13,27,.25) 42%,rgba(3,13,27,.94));transition:.4s}
.svc-summary{position:absolute;z-index:2;left:30px;right:30px;bottom:27px;transition:.35s}
.svc-no{display:block;margin-bottom:13px;color:#79aaff;font-size:10px;letter-spacing:.18em}
.svc-summary h3{margin:0 0 12px;font-size:clamp(23px,2vw,31px);line-height:1.05;font-weight:500;letter-spacing:-.04em}
.svc-summary p{max-width:480px;margin:0 0 22px;color:#c6d0df;font-size:13px;line-height:1.6}
.svc-toggle{display:flex;align-items:center;gap:13px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.svc-toggle span{font-size:10px;letter-spacing:.18em}.svc-toggle b{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.45);border-radius:50%;font-size:17px;font-weight:300}
.svc-card:hover .svc-photo{transform:scale(1.035)}.svc-card:hover .svc-shade{background:linear-gradient(180deg,rgba(3,13,27,.04),rgba(3,13,27,.22) 32%,rgba(18,71,132,.96))}
.svc-detail{z-index:4;padding:28px 30px;background:rgba(11,52,99,.98);opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s;overflow:auto}
.svc-card.is-open .svc-detail{opacity:1;visibility:visible;transform:none}.svc-card.is-open .svc-summary{opacity:0}
.svc-detail-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;margin-bottom:17px;border-bottom:1px solid rgba(255,255,255,.2)}
.svc-detail-top span{font-size:20px;font-weight:600;line-height:1.2}.svc-close{border:0;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.svc-detail ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px;padding:0;margin:0;list-style:none}.svc-small .svc-detail ul{grid-template-columns:1fr}
.svc-detail li{position:relative;padding-left:13px;color:#dbe4f1;font-size:12px;line-height:1.5}.svc-detail li:before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:#76aaff}
@media(max-width:1050px){.services-head-row{display:block}.services-head-row p{width:70%;margin-top:28px}.svc-wide,.svc-small{grid-column:span 3}}
@media(max-width:850px){.site-inner{width:calc(100% - 44px);margin-left:22px;margin-right:22px}.our-services-section{padding:82px 0 90px}.services-head-row{margin-bottom:38px}.services-head-row h2{font-size:48px}.services-head-row p{width:100%}.service-bento{display:block}.svc-card,.svc-wide,.svc-small{min-height:390px;margin-bottom:14px}.svc-detail ul{grid-template-columns:1fr}}



/* v16 — 2x2 varied grid + one tall Association card, no inner scrolling */
@media (min-width:1051px){
  .service-bento{
    display:grid;
    grid-template-columns:1.12fr .88fr 1.08fr;
    grid-template-rows:360px 360px;
    gap:16px;
  }
  .service-bento .svc-card{
    min-height:0;
    grid-column:auto;
  }
  .service-bento .c1{grid-column:1;grid-row:1;}
  .service-bento .c2{grid-column:2;grid-row:1;}
  .service-bento .c3{grid-column:1;grid-row:2;}
  .service-bento .c4{grid-column:2;grid-row:2;}
  .service-bento .c5{grid-column:3;grid-row:1 / span 2;}

  /* Tall final card carries the full list directly — no internal scroll */
  .service-bento .c5 .svc-detail{
    padding:34px 32px;
    overflow:visible;
  }
  .service-bento .c5 .svc-detail ul{
    grid-template-columns:1fr;
    gap:10px;
  }
  .service-bento .c5 .svc-detail li{
    font-size:12px;
    line-height:1.42;
  }

  /* Other detail panels also fit their card instead of creating scrollbars */
  .service-bento .svc-detail{
    overflow:hidden;
  }
  .service-bento .c1 .svc-detail ul,
  .service-bento .c2 .svc-detail ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 20px;
  }
  .service-bento .c3 .svc-detail ul,
  .service-bento .c4 .svc-detail ul{
    grid-template-columns:1fr;
    gap:7px;
  }

  .service-bento .c5 .svc-summary{
    bottom:34px;
  }
  .service-bento .c5 .svc-summary h3{
    font-size:32px;
    max-width:360px;
  }
  .service-bento .c5 .svc-summary p{
    max-width:360px;
  }
}



/* =========================================================
   v17 — Shared design tokens
========================================================= */
:root{
  --content-padding:10%;
  --font-body:18px;
  --font-body-small:13px;
  --font-emphasis:20px;
  --font-card-title:28px;
  --font-section-title:60px;
  --card-padding:30px;
}

/* Common text roles */
.about-desc-rich p{
  font-size:var(--font-body) !important;
}
.about-subline{
  font-size:var(--font-emphasis) !important;
}
.svc-summary h3{
  font-size:var(--font-card-title) !important;
}
.svc-summary .svc-copy{
  font-size:var(--font-body) !important;
}

/* Services heading: intro copy removed */
.services-head-row{
  justify-content:flex-start !important;
}
.services-head-row h2{
  font-size:var(--font-section-title) !important;
}

/* Every card uses one internal alignment line */
.svc-summary{
  left:var(--card-padding) !important;
  right:var(--card-padding) !important;
  top:var(--card-padding) !important;
  bottom:var(--card-padding) !important;
}

/* Title + copy share exactly the same left edge and sit at bottom */
.svc-summary h3{
  position:absolute;
  left:0;
  bottom:50px;
  margin:0 !important;
  max-width:82%;
  line-height:1.08;
	padding-bottom:10px;
}
.svc-summary .svc-copy{
  position:absolute;
  left:0;
  bottom:0;
  max-width:78%;
  margin:0 !important;
  line-height:1.55;
  color:#c6d0df;
}

/* VIEW SERVICE becomes a larger top-right action */
.svc-toggle{
  position:absolute !important;
  top:0;
  right:0;
  display:flex !important;
  align-items:center;
  gap:12px !important;
}
.svc-toggle span{
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.15em !important;
}
.svc-toggle b{
  width:42px !important;
  height:42px !important;
  font-size:23px !important;
  line-height:1;
  background:rgba(8,31,57,.2);
  border-color:rgba(255,255,255,.65) !important;
  transition:transform .3s ease,background .3s ease;
}
.svc-card:hover .svc-toggle b{
  transform:rotate(90deg);
  background:rgba(61,126,224,.38);
}

/* Tall Association card keeps the same internal rules */
.service-bento .c5 .svc-summary{
  bottom:var(--card-padding) !important;
}
.service-bento .c5 .svc-summary h3{
  font-size:var(--font-card-title) !important;
  max-width:85%;
}

/* Detail copy follows the shared body-small size */
.svc-detail li{
  font-size:var(--font-body) !important;
}

/* Responsive tokens */
@media(max-width:850px){
  :root{
    --content-padding:22px;
    --font-body:16px;
    --font-body-small:15px;
    --font-emphasis:20px;
    --font-card-title:26px;
    --font-section-title:48px;
    --card-padding:23px;
  }
  .svc-summary h3{bottom:54px}
  .svc-summary .svc-copy{max-width:88%}
}



/* =========================================================
   v18 — Service flip interaction + simple typographic process
========================================================= */

/* Hide the former button: whole card is now the interaction target */
.svc-toggle{display:none!important}
.svc-card{perspective:1400px;cursor:default;background:transparent!important;overflow:visible!important}

/* front visual */
.svc-card .svc-photo,
.svc-card .svc-shade,
.svc-card .svc-summary{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .68s cubic-bezier(.2,.65,.25,1),opacity .2s ease;
  transform-style:preserve-3d;
}
.svc-card .svc-photo,.svc-card .svc-shade{transform:rotateY(0)}
.svc-card .svc-summary{transform:rotateY(0)!important;opacity:1!important}

/* detail becomes the back face */
.svc-card .svc-detail{
  opacity:1!important;
  visibility:visible!important;
  transform:rotateY(180deg)!important;
  transform-origin:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .68s cubic-bezier(.2,.65,.25,1)!important;
  background:linear-gradient(145deg,#0a2d57 0%,#0b4079 100%)!important;
  overflow:hidden!important;
}
.svc-card .svc-close{display:none!important}

/* Desktop hover flip */
@media (hover:hover) and (pointer:fine){
  .svc-card:hover .svc-photo,
  .svc-card:hover .svc-shade,
  .svc-card:hover .svc-summary{transform:rotateY(-180deg)!important}
  .svc-card:hover .svc-detail{transform:rotateY(0)!important}
}

/* Mobile/touch flip */
.svc-card.flip-open .svc-photo,
.svc-card.flip-open .svc-shade,
.svc-card.flip-open .svc-summary{transform:rotateY(-180deg)!important}
.svc-card.flip-open .svc-detail{transform:rotateY(0)!important}

/* restore clean front text placement */
.svc-summary h3{
  top:auto!important;
  bottom:48px!important;
}
.svc-summary .svc-copy{
  bottom:0!important;
}

/* Process */
.process-section{
  background:#fff;
  color:#091426;
  padding:132px 0 145px;
}
.process-kicker{
  margin-bottom:22px;
  color:#3576c5;
  font-size:20px;
  font-weight:700;
  letter-spacing:.22em;
}
.process-title{
  max-width:900px;
  margin:0 0 86px;
  font-size:var(--font-section-title);
  line-height:1;
  font-weight:500;
  letter-spacing:-.055em;
}

.process-title span{color:#5d96ef;display:block;}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:78px 34px;
}
.process-item{position:relative;min-width:0}
.process-no{
  display:block;
  margin-bottom:18px;
  color:#2d6ebc;
  font-size:42px;
  line-height:1;
  font-weight:300;
  letter-spacing:-.05em;
}
.process-line{
  position:absolute;
  top:20px;
  left:64px;
  right:0;
  height:1px;
  background:#cad6e5;
  transform-origin:left;
  transition:background .3s;
}
.process-line:after{
  content:"";
  position:absolute;
  right:0;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#2d6ebc;
}
.process-item:hover .process-line{background:#2d6ebc}
.process-item h3{
  margin:0 0 15px;
  font-size:var(--font-emphasis);
  line-height:1.2;
  font-weight:650;
  letter-spacing:-.025em;
}
.process-item p{
  margin:0;
  max-width:95%;
  color:#667183;
  font-size:var(--font-body);
  line-height:1.75;
  letter-spacing:-.02em;
}

@media(max-width:1050px){
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 32px}
}
@media(max-width:850px){
  .process-section{padding:90px 0 100px}
  .process-title{margin-bottom:60px;font-size:var(--font-section-title)}
  .process-grid{grid-template-columns:1fr;gap:50px}
  .process-no{font-size:34px}
  .process-line{left:54px}
}



/* =========================================================
   v19 — approved revision pass
   - real HB&I logo
   - larger top navigation
   - continuous HERO business-strip outer edge
   - ABOUT right decoration removed
   - HERO title tracking adjusted
   - OUR VALUES typography enlarged
========================================================= */

/* Real logo */
.logo-real{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.logo-real img{
  display:block;
  width:174px;
  height:auto;
}

/* Header navigation — slightly larger, while preserving current layout */
header nav{
  font-size:14px !important;
  gap:40px;
  letter-spacing:.045em;
}
header nav a{
  font-weight:500;
}

/* HERO main title tracking */
.copy h1{
  letter-spacing:-.035em !important;
}

/* HERO bottom business strip:
   one continuous outer frame + only internal dividers */
.services{
  border:1px solid rgba(255,255,255,.18) !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
.services .service{
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
}
.services .service:last-child{
  border-right:0 !important;
}

/* ABOUT: remove unused right-side decorative UI */
.about-side,
.about-orbit{
  display:none !important;
}

/* OUR VALUES typography */
.value-copy h3{
  font-size:25px !important;
  line-height:1.25;
  margin-bottom:3px;
}
.value-copy strong{
  font-size:20px !important;
  line-height:1.45;
  margin-bottom:5px;
}
.value-copy p{
  font-size:16px !important;
  line-height:1.5 !important;
  max-width:100%;
}

/* Mobile */
@media(max-width:850px){
  .logo-real img{width:142px}
  .value-copy h3{font-size:21px !important}
  .value-copy strong{font-size:15px !important}
  .value-copy p{font-size:14px !important}
}



/* v20 — HB&I original AI logo, transparent background */
.logo-real{
  width:174px;
  height:58px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.logo-real img{
  width:174px !important;
  height:auto !important;
  display:block;
  background:transparent !important;
}
@media(max-width:850px){
  .logo-real{width:142px;height:50px}
  .logo-real img{width:142px !important}
}



/* v21 — header logo + OUR SERVICE navigation fix */
.logo-real{
  width:185px !important;
  height:64px !important;
  overflow:visible !important;
  display:flex;
  align-items:center;
}
.logo-real img{
  width:185px !important;
  height:auto !important;
  display:block;
  background:transparent !important;
}
@media(max-width:850px){
  .logo-real{width:150px !important;height:54px !important}
  .logo-real img{width:150px !important}
}



/* v23 — slightly larger global navigation */
header nav{font-size:16px !important;}



/* =========================================================
   v23 — WHY US
   Left aligned to the global 10% content grid.
   No images, no numbering, no card boxes.
========================================================= */
.why-section{
  position:relative;
  overflow:hidden;
  padding:128px 0 145px;
  background:#071629;
  color:#fff;
}
.why-section:before{
  content:"";
  position:absolute;
  width:720px;height:720px;
  right:-360px;top:-350px;
  border:1px solid rgba(93,151,224,.10);
  border-radius:50%;
  pointer-events:none;
}
.why-section:after{
  content:"";
  position:absolute;
  width:500px;height:500px;
  right:-245px;top:-245px;
  border:1px solid rgba(93,151,224,.07);
  border-radius:50%;
  pointer-events:none;
}
.why-inner{position:relative;z-index:1}
.why-kicker{
  margin-bottom:24px;
  color:#72a8f0;
  font-size:20px;
  font-weight:700;
  letter-spacing:.22em;
}
.why-title{
  margin:0;
  max-width:820px;
  font-size:var(--font-section-title);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.05em;
}
.why-title span{color:#5d96ef}
.why-lead{
  margin:26px 0 68px;
  color:#9fadc0;
  font-size:var(--font-body);
  line-height:1.7;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px 4.2%;
  max-width:1180px;
}
.why-item{min-width:0}
.why-circle{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:330px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  transition:border-color .4s ease,background .4s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.why-front,.why-hover{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:17%;
  box-sizing:border-box;
  transition:opacity .35s ease,transform .4s ease;
}
.why-front h3{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.035em;
}
.why-front strong{
  color:#83b5f4;
  font-size:16px;
  line-height:1.45;
  font-weight:600;
}
.why-hover{
  opacity:0;
  transform:translateY(8px);
}
.why-hover p{
  margin:0;
  color:#e5edf7;
  font-size:var(--font-body);
  line-height:1.75;
  letter-spacing:-.02em;
}
@media(hover:hover) and (pointer:fine){
  .why-circle:hover{
    border-color:#6ea9f2;
    background:rgba(44,103,176,.16);
    transform:translateY(-5px);
  }
  .why-circle:hover .why-front{opacity:0;transform:translateY(-7px)}
  .why-circle:hover .why-hover{opacity:1;transform:none}
}
@media(max-width:1050px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
}
@media(max-width:850px){
  .why-section{padding:90px 0 100px}
  .why-lead{margin-bottom:48px}
  .why-grid{grid-template-columns:1fr;gap:18px;max-width:none}
  .why-circle{
    max-width:none;
    aspect-ratio:auto;
    min-height:210px;
    border-radius:105px;
  }
  .why-front,.why-hover{padding:36px 42px}
  .why-front h3{font-size:24px}
}



.why-front,.why-hover{align-items:center!important;text-align:center!important}.why-front h3,.why-front strong,.why-hover p{width:100%;text-align:center!important}.logo-real{width:170px!important;height:60px!important}.logo-real img{width:170px!important}@media(max-width:850px){.logo-real{width:140px!important;height:50px!important}.logo-real img{width:140px!important}}



/* v25 — WHY US circles span the full shared content width */
.why-grid{
  width:100% !important;
  max-width:none !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  column-gap:4.5% !important;
}
.why-item{
  width:100%;
  display:flex;
}
.why-circle{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:1/1;
}

/* Circle content remains centered; section heading remains left aligned */
.why-front,
.why-hover{
  align-items:center !important;
  text-align:center !important;
}
.why-front h3,
.why-front strong,
.why-hover p{
  width:100%;
  text-align:center !important;
}

@media(max-width:1050px){
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:5% !important;
  }
}
@media(max-width:850px){
  .why-grid{
    grid-template-columns:1fr !important;
  }
  .why-circle{
    aspect-ratio:auto;
  }
}



/* v26 — WHY US circle scale/spacing + typography wrapping polish */

/* Large English headings: keep the same tighter tracking language as HERO */
.why-title{
  letter-spacing:-.035em !important;
}

/* Korean copy: wrap by words, never split a word character-by-character */
.why-section p,
.why-section strong,
.services-section p,
.services-section li,
.process-section p,
.about-section p,
.about-section strong{
  word-break:keep-all !important;
  overflow-wrap:break-word;
}

/* Smaller circles with intentional breathing room while preserving
   the shared 10% content start/end lines as the overall grid boundary. */
.why-grid{
  width:100% !important;
  max-width:none !important;
  grid-template-columns:repeat(3, 1fr) !important;
  column-gap:7.5% !important;
  row-gap:54px !important;
}
.why-item{
  display:flex;
  justify-content:center;
}
.why-item:nth-child(3n+1){justify-content:flex-start;}
.why-item:nth-child(3n){justify-content:flex-end;}

.why-circle{
  width:min(100%, 285px) !important;
  max-width:285px !important;
  aspect-ratio:1/1;
}
.why-front,
.why-hover{
  align-items:center !important;
  text-align:center !important;
  padding:16% !important;
}
.why-front h3,
.why-front strong,
.why-hover p{
  text-align:center !important;
  word-break:keep-all !important;
  overflow-wrap:break-word;
}

@media(max-width:1050px){
  .why-grid{
    grid-template-columns:repeat(2,1fr) !important;
    column-gap:9% !important;
  }
  .why-item,
  .why-item:nth-child(3n+1),
  .why-item:nth-child(3n){
    justify-content:center;
  }
}
@media(max-width:850px){
  .why-grid{grid-template-columns:1fr !important;}
  .why-circle{
    width:100% !important;
    max-width:none !important;
    aspect-ratio:auto;
  }
}



/* =========================================================
   v27 — WHY US / six connected circles in one row
========================================================= */
.why-grid{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  gap:0 !important;
  align-items:center;
  justify-content:space-between;
  overflow:visible;
  padding:8px 0 14px;
}
.why-item,
.why-item:nth-child(3n+1),
.why-item:nth-child(3n){
  flex:0 0 18.6%;
  width:18.6%;
  display:block !important;
  justify-content:initial !important;
  position:relative;
  margin-left:-2.32%;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.why-item:first-child{margin-left:0;}

.why-circle{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:1/1 !important;
  min-height:0 !important;
  border-radius:50% !important;
  background:#071629;
  position:relative;
  z-index:1;
  transition:
    z-index 0s,
    border-color .35s ease,
    background .35s ease,
    transform .45s cubic-bezier(.2,.7,.2,1),
    box-shadow .45s ease;
}
.why-front,
.why-hover{
  padding:14% !important;
  align-items:center !important;
  text-align:center !important;
}
.why-front h3{
  font-size:clamp(17px,1.25vw,23px) !important;
  white-space:nowrap;
}
.why-front strong{
  font-size:16px !important;
  word-break:keep-all !important;
}
.why-hover p{
  font-size:13px !important;
  line-height:1.65 !important;
  word-break:keep-all !important;
}

@media(hover:hover) and (pointer:fine){
  .why-grid:has(.why-item:hover) .why-item:not(:hover){
    opacity:.42;
  }
  .why-item:hover{
    z-index:20;
    opacity:1 !important;
  }
  .why-item:hover .why-circle{
    z-index:20;
    transform:scale(1.12);
    border-color:#79aff1 !important;
    background:#0d2b50 !important;
    box-shadow:0 22px 55px rgba(0,0,0,.28);
  }
  .why-item:hover .why-front{
    opacity:0 !important;
    transform:translateY(-7px);
  }
  .why-item:hover .why-hover{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Tablet/mobile: avoid forced overlap and keep tap-friendly layout */
@media(max-width:1100px){
  .why-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:24px !important;
  }
  .why-item,
  .why-item:nth-child(3n+1),
  .why-item:nth-child(3n){
    width:100% !important;
    margin-left:0 !important;
  }
}
@media(max-width:850px){
  .why-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:18px !important;
  }
  .why-circle{
    aspect-ratio:1/1 !important;
    border-radius:50% !important;
  }
}
@media(max-width:520px){
  .why-grid{grid-template-columns:1fr !important;}
  .why-circle{
    width:min(100%,290px) !important;
    margin:0 auto;
  }
}



/* =========================================================
   v28 — PORTFOLIO / editorial mixed-ratio gallery
========================================================= */
.portfolio-section{
  padding:132px 0 150px;
  background:#f6f7f9;
  color:#071629;
}
.portfolio-head{margin-bottom:72px}
.portfolio-kicker{
  margin-bottom:22px;
  color:#2868b7;
  font-size:20px;
  font-weight:700;
  letter-spacing:.22em;
}
.portfolio-title{
  margin:0;
  font-size:var(--font-section-title);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.035em;
}
.portfolio-lead{
  max-width:620px;
  margin:25px 0 0;
  color:#657083;
  font-size:var(--font-body);
  line-height:1.75;
  word-break:keep-all;
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:2.1vw;
  row-gap:76px;
  align-items:start;
}
.portfolio-work{min-width:0}
.portfolio-media{
  position:relative;
  overflow:hidden;
  background:#e8ebef;
}
.portfolio-media img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.portfolio-meta{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding-top:15px;
  border-top:1px solid #cbd1d9;
  margin-top:15px;
}
.portfolio-meta span{
  max-width:70%;
  font-size:15px;
  font-weight:650;
  line-height:1.45;
  word-break:keep-all;
}
.portfolio-meta em{
  color:#8a94a3;
  font-size:12px;
  font-style:normal;
  white-space:nowrap;
  padding-top:2px;
}
.work-tlw{grid-column:1 / span 5}
.work-liver{grid-column:8 / span 5; margin-top:110px}
.work-wide{grid-column:2 / span 7; margin-top:-30px}
.work-kangbuk{grid-column:10 / span 3; margin-top:95px}
.work-konkuk{grid-column:1 / span 4; margin-top:30px}
.work-camp{grid-column:6 / span 3; margin-top:145px}
.work-sts{grid-column:9 / span 4; margin-top:15px}

.placeholder-visual{
  aspect-ratio:16/8.7;
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 82% 20%,rgba(74,143,222,.20),transparent 28%),
    linear-gradient(135deg,#0a1c34,#102f55);
  color:#fff;
}
.placeholder-visual span{
  margin-bottom:auto;
  color:#7fb2ef;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
}
.placeholder-visual strong{
  font-size:clamp(28px,3vw,48px);
  font-weight:500;
  letter-spacing:-.04em;
}
.placeholder-visual small{
  margin-top:8px;
  color:#aebdd0;
  font-size:13px;
}
@media(hover:hover) and (pointer:fine){
  .portfolio-work:hover .portfolio-media img{transform:scale(1.025)}
  .portfolio-work:hover .portfolio-meta{border-top-color:#2868b7}
}
@media(max-width:1000px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:54px 28px}
  .portfolio-work,
  .work-tlw,.work-liver,.work-wide,.work-kangbuk,.work-konkuk,.work-camp,.work-sts{
    grid-column:auto;
    margin-top:0;
  }
  .work-wide{grid-column:1 / -1}
}
@media(max-width:650px){
  .portfolio-section{padding:92px 0 105px}
  .portfolio-head{margin-bottom:48px}
  .portfolio-grid{grid-template-columns:1fr;gap:48px}
  .work-wide{grid-column:auto}
  .portfolio-meta{display:block}
  .portfolio-meta span{display:block;max-width:none}
  .portfolio-meta em{display:block;margin-top:5px}
  .placeholder-visual{padding:28px}
}



.portfolio-marquee-section{padding:132px 0 122px;overflow:hidden;background:#f6f7f9}.portfolio-marquee-section .portfolio-head{margin-bottom:64px}.pm-viewport{width:100%;overflow:hidden;padding:10px 0 18px}.pm-track{--pm-gap:28px;display:flex;width:max-content;will-change:transform;animation:pm-scroll 42s linear infinite}.pm-set{display:flex;flex:none;gap:var(--pm-gap);padding-right:var(--pm-gap)}.pm-card{flex:0 0 auto;width:244px;outline:none}.pm-frame{position:relative;width:244px;aspect-ratio:4/5;overflow:hidden;border-radius:18px;background:#e5e9ee;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}.pm-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 18%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.pm-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,16,31,.78),rgba(4,16,31,.08) 47%,transparent 68%);opacity:0;transition:opacity .35s ease}.pm-overlay{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;opacity:0;transform:translateY(9px);transition:opacity .35s ease,transform .35s ease}.pm-overlay strong{display:block;font-size:17px;line-height:1.35;font-weight:650;word-break:keep-all}.pm-overlay span{display:block;margin-top:7px;color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.04em}.pm-caption{display:flex;justify-content:space-between;margin-top:28px;padding-top:15px;border-top:1px solid #d1d6dc;color:#8a94a3;font-size:14px;letter-spacing:.08em;text-transform:uppercase}@keyframes pm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(hover:hover) and (pointer:fine){.pm-viewport:hover .pm-track{animation-play-state:paused}.pm-card:hover .pm-frame,.pm-card:focus-visible .pm-frame{transform:translateY(-8px) scale(1.035);box-shadow:0 24px 48px rgba(12,28,48,.15)}.pm-card:hover .pm-frame img,.pm-card:focus-visible .pm-frame img{transform:scale(1.035)}.pm-card:hover .pm-shade,.pm-card:hover .pm-overlay,.pm-card:focus-visible .pm-shade,.pm-card:focus-visible .pm-overlay{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.pm-track{animation:none}.pm-viewport{overflow-x:auto}}@media(max-width:850px){.portfolio-marquee-section{padding:92px 0 94px}.portfolio-marquee-section .portfolio-head{margin-bottom:44px}.pm-track{--pm-gap:18px;animation-duration:34s}.pm-card,.pm-frame{width:190px}.pm-frame{border-radius:14px}.pm-caption{margin-top:20px}}



/* =========================================================
   v30 — LOCATION
========================================================= */
.location-section{
  padding:132px 0 140px;
  background:#fff;
  color:#071629;
}
.location-head{margin-bottom:66px}
.location-kicker{
  margin-bottom:22px;
  color:#2868b7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
}
.location-title{
  margin:0;
  font-size:var(--font-section-title);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.035em;
}
.location-layout{
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.55fr);
  gap:7%;
  align-items:stretch;
}
.location-info{
  min-height:520px;
  display:flex;
  flex-direction:column;
  padding-top:5px;
}
.location-brand{
  color:#2868b7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
}
.location-info h3{
  margin:22px 0 30px;
  font-size:clamp(34px,3.1vw,52px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.045em;
}
.location-rule{
  width:100%;
  height:1px;
  background:#d9dee5;
  margin-bottom:32px;
}
.location-details{
  margin:0;
}
.location-details>div{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:18px;
  padding:12px 0;
}
.location-details dt{
  color:#8a94a3;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}
.location-details dd{
  margin:0;
  font-size:14px;
  line-height:1.65;
  word-break:keep-all;
}
.location-map-link{
  margin-top:auto;
  min-height:54px;
  border-top:1px solid #071629;
  border-bottom:1px solid #071629;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#071629;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  transition:color .25s ease,border-color .25s ease;
}
.location-map-link b{
  font-size:18px;
  font-weight:400;
}
.location-map{
  min-height:520px;
  overflow:hidden;
  background:#e8edf2;
}
.location-map iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:520px;
  border:0;
  filter:saturate(.72) contrast(.96);
}
@media(hover:hover) and (pointer:fine){
  .location-map-link:hover{color:#2868b7;border-color:#2868b7}
}
@media(max-width:900px){
  .location-layout{grid-template-columns:1fr;gap:50px}
  .location-info{min-height:auto}
  .location-map-link{margin-top:38px}
}
@media(max-width:650px){
  .location-section{padding:92px 0 96px}
  .location-head{margin-bottom:46px}
  .location-map,.location-map iframe{min-height:380px}
  .location-info h3{font-size:36px}
}



/* =========================================================
   v31 — LOCATION refinements
========================================================= */
.location-section .location-head{
  margin-bottom:58px;
}
.location-section .location-kicker{
  margin-bottom:18px;
  color:#2868b7;
}
.location-section .location-title{
  font-size:var(--font-section-title);
  letter-spacing:-.035em;
}
.location-section .location-info{
  min-height:520px;
  justify-content:center;
  padding-top:0;
}
.location-section .location-details{
  width:100%;
  border-top:1px solid #d9dee5;
  border-bottom:1px solid #d9dee5;
}
.location-section .location-details>div{
  min-height:76px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid #edf0f3;
}
.location-section .location-details>div:last-child{
  border-bottom:0;
}
.location-section .location-details dt{
  align-self:center;
}
.location-section .location-details dd{
  align-self:center;
  font-size:15px;
}
.location-section .location-map-link{
  margin-top:34px;
}
@media(max-width:900px){
  .location-section .location-info{min-height:auto}
}



/* =========================================================
   v32 — LOCATION / title + info aligned to map
========================================================= */
.location-section{
  padding:132px 0 140px;
}
.location-section .location-layout{
  grid-template-columns:minmax(320px,.72fr) minmax(0,1.55fr);
  gap:7%;
  align-items:stretch;
}
.location-section .location-info{
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
}
.location-section .location-heading{
  margin:0;
}
.location-section .location-kicker{
  margin:0 0 18px;
}
.location-section .location-title{
  margin:0;
  line-height:.92;
}
.location-section .location-details{
  margin-top:auto;
}
.location-section .location-map-link{
  margin-top:28px;
}
.location-section .location-map,
.location-section .location-map iframe{
  min-height:520px;
}
@media(max-width:900px){
  .location-section .location-layout{
    grid-template-columns:1fr;
    gap:48px;
  }
  .location-section .location-info{
    min-height:auto;
  }
  .location-section .location-details{
    margin-top:52px;
  }
}



/* v33 location visibility + alignment fix */
.location-section{display:block!important;padding:132px 0 140px;background:#fff;color:#071629}
.location-section .location-layout{display:grid!important;grid-template-columns:minmax(320px,.72fr) minmax(0,1.55fr);gap:7%;align-items:stretch}
.location-section .location-info{display:flex!important;min-height:520px;flex-direction:column;justify-content:space-between;padding:0}
.location-section .location-heading{display:block}
.location-section .location-kicker{display:block;margin:0 0 18px;color:#2868b7;font-size:20px;font-weight:700;letter-spacing:.22em}
.location-section .location-title{display:block;margin:0;color:#071629;font-size:var(--font-section-title,64px);line-height:.92;font-weight:500;letter-spacing:-.035em}
.location-section .location-bottom{display:block}
.location-section .location-details{display:block;margin:0;border-top:1px solid #d9dee5;border-bottom:1px solid #d9dee5}
.location-section .location-details>div{display:grid;grid-template-columns:76px 1fr;gap:18px;min-height:76px;align-items:center;padding:16px 0;border-bottom:1px solid #edf0f3}
.location-section .location-details>div:last-child{border-bottom:0}
.location-section .location-details dt{align-self:center;color:#8a94a3;font-size:13px;font-weight:700;letter-spacing:.12em}
.location-section .location-details dd{align-self:center;margin:0;font-size:16px;line-height:1.65;word-break:keep-all}
.location-section .location-map-link{display:flex;margin-top:28px;min-height:54px;align-items:center;justify-content:space-between;border-top:1px solid #071629;border-bottom:1px solid #071629;color:#071629;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.08em}
.location-section .location-map{display:block;min-height:520px;overflow:hidden;background:#e8edf2}
.location-section .location-map iframe{display:block;width:100%;height:100%;min-height:520px;border:0}
@media(max-width:900px){
 .location-section{padding:92px 0 96px}
 .location-section .location-layout{grid-template-columns:1fr;gap:48px}
 .location-section .location-info{min-height:auto;gap:52px}
 .location-section .location-map,.location-section .location-map iframe{min-height:400px}
}



/* =========================================================
   v34 — Global Korean word wrapping
   Keep Korean words intact; wrap primarily at spaces.
========================================================= */
html,
body{
  word-break:keep-all;
  overflow-wrap:break-word;
}

body,
body div,
body p,
body span,
body li,
body dt,
body dd,
body a,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
  word-break:keep-all;
  overflow-wrap:break-word;
}



/* =========================================================
   v35 — FOOTER
========================================================= */
.site-footer{
  background:#06172c;
  color:#fff;
  padding:74px 0 52px;
}
.footer-inner{display:block}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.footer-brand strong{
  font-size:34px;
  line-height:1;
  font-weight:650;
  letter-spacing:-.04em;
}
.footer-brand span{
  color:rgba(255,255,255,.62);
  font-size:13px;
  letter-spacing:.02em;
}
.footer-top-link{
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  transition:color .25s ease;
}
.footer-rule{
  height:1px;
  margin:48px 0 28px;
  background:rgba(255,255,255,.16);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
}
.footer-info{
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.8;
}
.footer-info p{margin:0}
.footer-info p+p{margin-top:2px}
.footer-info i{
  padding:0 5px;
  color:rgba(255,255,255,.28);
  font-style:normal;
}
.footer-info a{
  color:inherit;
  text-decoration:none;
  transition:color .25s ease;
}
.footer-copy{
  flex:none;
  color:rgba(255,255,255,.34);
  font-size:10px;
  letter-spacing:.08em;
  white-space:nowrap;
}
@media(hover:hover) and (pointer:fine){
  .footer-top-link:hover,
  .footer-info a:hover{color:#fff}
}
@media(max-width:720px){
  .site-footer{padding:60px 0 42px}
  .footer-brand strong{font-size:30px}
  .footer-rule{margin:38px 0 25px}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
  }
  .footer-info p:last-child{
    display:flex;
    flex-wrap:wrap;
    column-gap:4px;
  }
  .footer-info i{padding:0 2px}
}



/* =========================================================
   v36 — HERO bottom panels responsive fix
========================================================= */

/* Desktop / notebook: always fit all 3 panels inside viewport */
.hero-bottom,
.hero-panels,
.hero-business,
.business-strip{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.hero-bottom > *,
.hero-panels > *,
.hero-business > *,
.business-strip > *{
  min-width:0;
}

/* Cover the class names used by the current prototype panels */
.hero-card,
.hero-panel,
.business-item,
.hero-business-item{
  min-width:0 !important;
  box-sizing:border-box;
}

@media (min-width:769px){
  .hero-bottom,
  .hero-panels,
  .hero-business,
  .business-strip{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .hero-card,
  .hero-panel,
  .business-item,
  .hero-business-item{
    width:auto !important;
    max-width:none !important;
    flex:1 1 0 !important;
  }
}

/* Smaller desktop / notebook window */
@media (min-width:769px) and (max-width:1180px){
  .hero-card,
  .hero-panel,
  .business-item,
  .hero-business-item{
    padding-left:26px !important;
    padding-right:22px !important;
  }

  .hero-card h3,
  .hero-panel h3,
  .business-item h3,
  .hero-business-item h3,
  .hero-card .title,
  .hero-panel .title,
  .business-item .title,
  .hero-business-item .title{
    font-size:15px !important;
    line-height:1.25;
    white-space:normal;
    word-break:keep-all;
  }

  .hero-card p,
  .hero-panel p,
  .business-item p,
  .hero-business-item p{
    font-size:12px !important;
    line-height:1.55;
    word-break:keep-all;
  }
}

/* Mobile keeps the existing vertical accordion behavior */
@media (max-width:768px){
  .hero-bottom,
  .hero-panels,
  .hero-business,
  .business-strip{
    width:100% !important;
    min-width:0 !important;
  }
}



/* =========================================================
   v37 — PORTFOLIO hover focus + footer tel correction
========================================================= */
@media(hover:hover) and (pointer:fine){
  .pm-card:hover .pm-frame,
  .pm-card:focus-visible .pm-frame{
    transform:translateY(-8px) scale(1.035);
    box-shadow:0 24px 48px rgba(12,28,48,.18);
  }

  .pm-card:hover .pm-frame img,
  .pm-card:focus-visible .pm-frame img{
    transform:scale(1.045);
  }

  .pm-card:hover .pm-shade,
  .pm-card:focus-visible .pm-shade{
    opacity:1;
    background:linear-gradient(
      to top,
      rgba(4,18,38,.90) 0%,
      rgba(4,18,38,.72) 45%,
      rgba(4,18,38,.58) 100%
    );
  }

  .pm-card:hover .pm-overlay,
  .pm-card:focus-visible .pm-overlay{
    opacity:1;
    transform:none;
  }

  .pm-overlay{
    left:22px;
    right:22px;
    bottom:24px;
  }

  .pm-overlay strong{
    font-size:19px;
    line-height:1.32;
    font-weight:700;
    letter-spacing:-.025em;
    text-shadow:0 2px 10px rgba(0,0,0,.16);
  }

  .pm-overlay span{
    margin-top:9px;
    color:rgba(255,255,255,.82);
    font-size:12px;
    font-weight:500;
    letter-spacing:.035em;
  }
}



/* =========================================================
   v38 — HERO business strip: actual .services/.service fix
========================================================= */

/* Desktop + notebook */
@media (min-width:851px){
  .hero .services{
    left:var(--site-gutter,10%) !important;
    right:var(--site-gutter,10%) !important;
    width:auto !important;
    min-width:0 !important;
    height:82px !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    overflow:hidden !important;
  }

  .hero .service{
    width:auto !important;
    min-width:0 !important;
    padding:0 28px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
  }

  .hero .service .title{
    min-width:0;
    margin:0 !important;
    padding-right:54px;
    font-size:17px !important;
    line-height:1.25;
    transform:none !important;
    white-space:normal;
    word-break:keep-all;
  }

  /* collapsed state: details must not peek out */
  .hero .service .detail{
    position:absolute !important;
    left:28px;
    right:62px;
    bottom:19px;
    max-width:none !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.55;
    opacity:0 !important;
    visibility:hidden;
    transform:translateY(10px) !important;
    transition:opacity .3s ease,transform .4s ease,visibility .3s ease;
  }

  .hero .service .arrow{
    right:24px !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
  }

  /* grow the same panel upward on hover */
  .hero .service:hover{
    overflow:visible !important;
  }
  .hero .service:hover .title{
    transform:translateY(-18px) !important;
  }
  .hero .service:hover .detail{
    opacity:1 !important;
    visibility:visible;
    transform:translateY(0) !important;
  }
  .hero .service:hover .arrow{
    transform:translate(4px,-50%) !important;
  }
}

/* Narrow notebook: preserve all three columns, just tighten typography */
@media (min-width:851px) and (max-width:1180px){
  .hero .services{
    left:24px !important;
    right:24px !important;
  }
  .hero .service{
    padding-left:22px !important;
    padding-right:20px !important;
  }
  .hero .service .title{
    padding-right:46px;
    font-size:15px !important;
  }
  .hero .service .detail{
    left:22px;
    right:54px;
    font-size:12px !important;
  }
  .hero .service .arrow{
    right:18px !important;
    width:36px;
    height:36px;
  }
}



/* =========================================================
   v41 — HERO strip stable hover
   Keep all three cells fixed; only the hovered cell's visual
   background grows upward. This restores the original behavior.
========================================================= */
@media (min-width:851px){
  .hero .services{
    left:var(--site-gutter,10%) !important;
    right:var(--site-gutter,10%) !important;
    bottom:0 !important;
    width:auto !important;
    height:82px !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    overflow:visible !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .hero .service{
    position:relative !important;
    width:auto !important;
    min-width:0 !important;
    height:82px !important;
    min-height:82px !important;
    padding:0 !important;
    overflow:visible !important;
    align-self:end !important;
    transform:none !important;
    background:transparent !important;
    border-right:1px solid rgba(255,255,255,.14) !important;
  }
  .hero .service:last-child{border-right:0 !important}

  /* Disable the old fill animation so only one visual layer controls hover. */
  .hero .service::before{display:none !important}

  /* Fixed-width card surface; its bottom never moves. */
  .hero .service::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    height:82px !important;
    background:rgba(8,25,45,.62) !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    box-shadow:none !important;
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    pointer-events:none;
    transition:height .52s cubic-bezier(.2,.75,.2,1),background .35s ease,box-shadow .35s ease !important;
  }

  .hero .service:hover{
    width:auto !important;
    height:82px !important;
    transform:none !important;
    background:transparent !important;
    z-index:3;
  }
  .hero .service:hover::after{
    height:218px !important;
    background:rgba(18,58,98,.82) !important;
    box-shadow:0 -18px 45px rgba(3,16,31,.14) !important;
  }

  .hero .service .title{
    position:absolute !important;
    z-index:2 !important;
    left:28px !important;
    right:68px !important;
    bottom:31px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:18px !important;
    line-height:1.25 !important;
    color:#fff !important;
    transform:none !important;
    transition:bottom .52s cubic-bezier(.2,.75,.2,1),color .3s ease !important;
  }
  .hero .service:hover .title{
    bottom:158px !important;
    transform:none !important;
  }

  .hero .service .detail{
    position:absolute !important;
    z-index:2 !important;
    left:28px !important;
    right:68px !important;
    bottom:-24px !important;
    margin:0 !important;
    max-width:none !important;
    font-size:15px !important;
    line-height:1.6 !important;
    color:rgba(235,244,252,.9) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
    transition:bottom .52s cubic-bezier(.2,.75,.2,1),opacity .25s ease .12s,visibility 0s linear .12s !important;
  }
  .hero .service:hover .detail{
    bottom:91px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .hero .service .arrow{
    position:absolute !important;
    z-index:2 !important;
    right:24px !important;
    top:auto !important;
    bottom:22px !important;
    transform:none !important;
  }
  .hero .service:hover .arrow{
    top:auto !important;
    bottom:22px !important;
    transform:translateX(2px) !important;
  }
}

/* Narrow desktop: keep the exact same behavior, only tighten spacing/type. */
@media (min-width:851px) and (max-width:1180px){
  .hero .services{
    left:24px !important;
    right:24px !important;
  }
  .hero .service .title{
    left:22px !important;
    right:58px !important;
    font-size:15px !important;
  }
  .hero .service .detail{
    left:22px !important;
    right:58px !important;
    font-size:11px !important;
  }
  .hero .service .arrow{
    right:18px !important;
    width:36px !important;
    height:36px !important;
  }
}



/* =========================================================
   v42 — HERO hover content spacing + header CTA
========================================================= */
@media (min-width:851px){
  /* Bring title and description a little closer together. */
  .hero .service:hover .title{
    bottom:148px !important;
  }
  .hero .service:hover .detail{
    bottom:94px !important;
  }
}

/* Header project inquiry button: slightly more compact */
.header-cta,
.contact-btn,
.header-contact,
.nav-contact,
a[href="#contact"]{
  padding:9px 16px !important;
  min-height:0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap;
}



/* =========================================================
   v44 — OUR SERVICES responsive typography/layout
   Prevent awkward title wrapping on narrower desktop windows.
========================================================= */

/* Keep service cards readable before the mobile layout takes over */
@media (min-width:901px) and (max-width:1280px){
  #services .service-card,
  #services .svc-card{
    min-width:0 !important;
  }

  #services .service-card .front,
  #services .svc-card .front{
    padding:24px 24px 26px !important;
  }

  #services .service-card h3,
  #services .svc-card h3,
  #services .service-card .service-title,
  #services .svc-card .service-title{
    max-width:100% !important;
    font-size:clamp(21px,2vw,27px) !important;
    line-height:1.06 !important;
    letter-spacing:-.035em !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }

  #services .service-card p,
  #services .svc-card p,
  #services .service-card .service-desc,
  #services .svc-card .service-desc{
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.65 !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
}

/* At compact notebook widths, give the left grid a little more room. */
@media (min-width:901px) and (max-width:1100px){
  #services .services-grid,
  #services .service-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr) !important;
    gap:16px !important;
  }

  #services .services-left,
  #services .service-left{
    gap:16px !important;
  }

  #services .service-card .front,
  #services .svc-card .front{
    padding:20px 20px 22px !important;
  }

  #services .service-card h3,
  #services .svc-card h3,
  #services .service-card .service-title,
  #services .svc-card .service-title{
    font-size:20px !important;
    line-height:1.08 !important;
  }

  #services .service-card p,
  #services .svc-card p,
  #services .service-card .service-desc,
  #services .svc-card .service-desc{
    font-size:12px !important;
    line-height:1.55 !important;
  }
}



/* =========================================================
   v46 — Fixed one-page header
========================================================= */
header,
.header,
.site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  transition:
    background-color .35s ease,
    backdrop-filter .35s ease,
    -webkit-backdrop-filter .35s ease,
    box-shadow .35s ease,
    height .35s ease;
}

/* At the top: visually merge into the dark HERO */
body:not(.is-scrolled) header,
body:not(.is-scrolled) .header,
body:not(.is-scrolled) .site-header{
  background:rgba(4,17,32,.12) !important;
  box-shadow:none !important;
}

/* After scrolling: compact translucent navy */
body.is-scrolled header,
body.is-scrolled .header,
body.is-scrolled .site-header{
  background:rgba(4,17,32,.88) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

/* Anchor destinations should not hide beneath the fixed header */
section[id]{
  scroll-margin-top:92px;
}

html{
  scroll-behavior:smooth;
}



/* =========================================================
   v47 — HERO expanded panel copy grouping
========================================================= */
@media (min-width:851px){
  .hero .service:hover .title{
    bottom:137px !important;
  }

  .hero .service:hover .detail{
    bottom:101px !important;
    line-height:1.55 !important;
  }
}

/* Hide the legacy scroll cue regardless of its original class */
.hero [class*="scroll"],
.hero [class*="explore"]{
  /* only the obsolete hero cue is targeted by its text-removal above;
     existing functional scroll containers are left structurally intact */
}



/* =========================================================
   v48 — HERO expanded copy spacing by viewport width
========================================================= */

/* Wide desktop: compact copy group */
@media (min-width:1181px){
  .hero .service:hover .title{
    bottom:137px !important;
  }
  .hero .service:hover .detail{
    bottom:101px !important;
  }
}

/* Notebook / reduced browser width:
   allow a little more breathing room as copy wraps */
@media (min-width:851px) and (max-width:1180px){
  .hero .service:hover .title{
    bottom:146px !important;
  }
  .hero .service:hover .detail{
    bottom:92px !important;
  }
}



/* v49 — one-page anchor alignment */
section[id]{
  scroll-margin-top:80px;
}



/* =========================================================
   v51 — actual HERO copy selector spacing
========================================================= */
.hero .copy{
  padding-top:calc(12vh + 40px) !important;
}

/* SCROLL TO EXPLORE / remaining line removed completely */
.hero .scroll{
  display:none !important;
}

@media(max-width:1180px){
  .hero .copy{
    padding-top:calc(12vh + 34px) !important;
  }
}



/* =========================================================
   v52 — HERO copy vertical position
========================================================= */
@media (min-width:851px){
  .hero .copy{
    transform:translateY(40px) !important;
  }
}



/* v54 — embedded service images: standalone preview */
.service-bento .c1 .svc-photo{background-image:url('../images/embedded_15.png')!important;background-position:center 58%!important;background-size:cover!important;background-repeat:no-repeat!important;}
.service-bento .c2 .svc-photo{background-image:url('../images/embedded_16.png')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;}
.service-bento .c3 .svc-photo{background-image:url('../images/embedded_17.png')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;}
.service-bento .c4 .svc-photo{background-image:url('../images/embedded_18.png')!important;background-position:center 55%!important;background-size:cover!important;background-repeat:no-repeat!important;}
.service-bento .c5 .svc-photo{background-image:url('../images/embedded_19.png')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;}
.service-bento .svc-shade{
background:linear-gradient(180deg,rgba(4,17,32,.10) 0%,rgba(4,17,32,.28) 42%,rgba(4,17,32,.91) 100%)!important;
}



/* =========================================================
   v56 — HERO: supplied network globe image
   Preview-only embedded image. Final production version
   will separate HTML / CSS / JS / images.
========================================================= */
.hero {
  background:#061426 !important;
  overflow:hidden !important;
}

/* Replace the old abstract orbit with the supplied network globe. */
.hero:before {
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  right:-4% !important;
  bottom:0 !important;
  left:auto !important;
  width:68% !important;
  height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:.94 !important;
  pointer-events:none !important;
  background-image:
    linear-gradient(90deg,
      #061426 0%,
      rgba(6,20,38,.96) 9%,
      rgba(6,20,38,.70) 23%,
      rgba(6,20,38,.18) 47%,
      rgba(6,20,38,.02) 72%),
    linear-gradient(180deg,
      rgba(6,20,38,.12) 0%,
      rgba(6,20,38,0) 58%,
      rgba(6,20,38,.15) 100%),
    url('../images/embedded_20.jpg') !important;
  background-size:cover !important;
  background-position:42% center !important;
  background-repeat:no-repeat !important;
}

/* Remove previous CSS orbit/ellipse so the visual stays minimal. */
.hero .orbit {
  display:none !important;
}

/* Keep the original approved copy and service strip above the visual. */
.hero .copy,
.hero header,
.hero .services {
  position:relative;
  z-index:3;
}
.hero .services {
  position:absolute;
}

/* A very subtle dark veil keeps the supplied image from competing with type. */
.hero:after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,
      rgba(3,12,24,.10) 0%,
      rgba(3,12,24,.04) 46%,
      rgba(3,12,24,.03) 100%) !important;
}

@media (max-width:1180px) {
  .hero:before {
    width:72% !important;
    right:-10% !important;
    opacity:.82 !important;
    background-position:39% center !important;
  }
}

@media (max-width:850px) {
  .hero:before {
    top:72px !important;
    right:-34% !important;
    width:112% !important;
    height:58% !important;
    opacity:.42 !important;
    background-position:35% center !important;
  }
}

/* ===== HERO SLIDER : production ===== */
.hero{position:relative;background:#061426!important;overflow:hidden!important}
.hero:before,.hero:after{display:none!important}
.hero-slider{position:absolute;inset:0;z-index:0;overflow:hidden;background:#061426}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.15s ease;background-repeat:no-repeat;background-size:cover;background-position:42% center}
.hero-slide.is-active{opacity:1}
.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061426 0%,rgba(6,20,38,.97) 20%,rgba(6,20,38,.70) 38%,rgba(6,20,38,.20) 62%,rgba(6,20,38,.08) 100%)}
.hero header,.hero .copy,.hero .services,.hero-slider-controls{z-index:3}
.hero-slider-controls{position:absolute;right:10%;bottom:112px;display:flex;gap:9px}
.hero-dot{width:30px;height:3px;border:0;padding:0;background:rgba(255,255,255,.28);cursor:pointer;transition:.3s}
.hero-dot.is-active{background:#75adff;width:46px}
@media(max-width:1180px){
 .hero-slide{background-position:38% center}
 .hero-slide:after{background:linear-gradient(90deg,#061426 0%,rgba(6,20,38,.96) 30%,rgba(6,20,38,.35) 70%,rgba(6,20,38,.15))}
}
@media(max-width:850px){
 .hero-slide{background-position:48% center}
 .hero-slide:after{background:rgba(6,20,38,.60)}
 .hero-slider-controls{right:22px;bottom:272px}
 .hero-dot{width:22px}
 .hero-dot.is-active{width:34px}
}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}



/* =========================================================
   FINAL — FIXED HEADER LAYER
========================================================= */

.hero header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999 !important;
}

/* HERO의 모든 비주얼/텍스트는 메뉴보다 아래 */
.hero-slider {
    z-index: 0 !important;
}

.hero .copy {
    position: relative;
    z-index: 2 !important;
}

.hero .services,
.hero-slider-controls {
    z-index: 3 !important;
}


/* 스크롤 전 */
body:not(.is-scrolled) .hero header {
    background: rgba(4, 17, 32, .12) !important;
    box-shadow: none !important;
}


/* 스크롤 후 */
body.is-scrolled .hero header {
    background: rgba(4, 17, 32, .92) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,.08) !important;
}




/* =========================================================
   FINAL TYPOGRAPHY
========================================================= */

/* 기본 영문 / UI */
body {
    font-family:
        'IBM Plex Sans',
        Arial,
        sans-serif;
}


/* 한글 제목 및 강조 */
.about-subline,
.about-desc-rich .about-closing strong,
.value-copy strong,
.process-item p,
.why-front strong,
.why-hover p,
.portfolio-lead,
.location-details dd {
font-family:
    'Noto Serif KR',
    serif;
}


/* 영문 타이틀 */
.eyebrow,
.copy h1,
nav,
.contact,
.about-label,
.about-intro h2,
.values-title,
.value-copy h3,
.section-kicker,
.services-head-row h2,
.svc-summary h3,
.process-kicker,
.process-title,
.process-item h3,
.why-kicker,
.why-title,
.why-front h3,
.portfolio-kicker,
.portfolio-title,
.location-kicker,
.location-title {
    font-family:
        'IBM Plex Sans',
        Arial,
        sans-serif;
}

/* =========================================================
   FINAL — OUR SERVICES / 4 CARDS
========================================================= */
#services .service-bento{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,390px) !important;
  gap:16px !important;
}
#services .service-bento .svc-card{
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:0 !important;
}
/* Reuse the four approved images; old orange Symposium photo is excluded. */
#services .service-bento .c1 .svc-photo{background-image:url('../images/embedded_15.png')!important;background-position:center 58%!important;}
#services .service-bento .c2 .svc-photo{background-image:url('../images/embedded_19.png')!important;background-position:center center!important;}
#services .service-bento .c3 .svc-photo{background-image:url('../images/embedded_18.png')!important;background-position:center 55%!important;}
#services .service-bento .c4 .svc-photo{background-image:url('../images/embedded_17.png')!important;background-position:center center!important;}
#services .svc-detail{overflow:hidden !important;}
#services .svc-detail ul{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px 24px !important;}
#services .svc-summary h3,
#services .svc-detail-top span,
#services .svc-detail li,
#services .svc-toggle{font-family:'IBM Plex Sans',Arial,sans-serif;}
#services .svc-summary .svc-copy{font-family:'Noto Serif KR',serif;font-weight:500;}
@media(max-width:1050px){
  #services .service-bento{grid-template-rows:repeat(2,360px) !important;}
}
@media(max-width:850px){
  #services .service-bento{display:block !important;}
  #services .service-bento .svc-card{min-height:390px !important;margin-bottom:14px !important;}
  #services .svc-detail ul{grid-template-columns:1fr !important;}
}


/* =========================================================
   FINAL — OUR PROCESS : 5 STEP LAYOUT
========================================================= */
@media (min-width:1051px){
  .process-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0 30px;
  }
  .process-item h3{
    font-size:18px;
    line-height:1.28;
    min-height:46px;
  }
  .process-item p{
    max-width:100%;
    font-size:14px;
    line-height:1.75;
  }
}

@media (min-width:851px) and (max-width:1050px){
  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:64px 32px;
  }
}

@media (max-width:850px){
  .process-grid{
    grid-template-columns:1fr;
    gap:50px;
  }
}


/* =========================================================
   FINAL — HERO BUSINESS STRIP SPACING + LAYER FIX
   2026-10-06
========================================================= */
@media (min-width:851px){
  /* Expanded business cards must cover the slider indicators. */
  .hero .services{
    z-index:20 !important;
  }
  .hero .service{
    z-index:1 !important;
  }
  .hero .service:hover{
    z-index:30 !important;
  }
  .hero .service::after{
    z-index:0 !important;
  }
  .hero .service .title,
  .hero .service .detail,
  .hero .service .arrow{
    z-index:2 !important;
  }
  .hero-slider-controls{
    z-index:4 !important;
  }

  /* Larger title: reserve a fixed text zone so title and copy never overlap. */
  .hero .service .title{
    right:68px !important;
    font-size:18px !important;
    line-height:1.18 !important;
    font-weight:600 !important;
  }
  .hero .service:hover .title{
    top:auto !important;
    bottom:156px !important;
    font-size:21px !important;
    line-height:1.15 !important;
  }
  .hero .service .detail{
    right:72px !important;
    font-family:'Noto Serif KR',serif !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.55 !important;
  }
  .hero .service:hover .detail{
    top:auto !important;
    bottom:86px !important;
  }
}

/* Korean serif system — stronger body weight while retaining the editorial tone. */
.about-subline,
.about-desc-rich .about-closing strong,
.value-copy strong,
.process-item p,
.why-front strong,
.why-hover p,
.portfolio-lead,
.location-details dd{
  font-family:'Noto Serif KR',serif !important;
  font-weight:500;
}
.process-item p{
  font-weight:500 !important;
}


/* =========================================================
   FINAL — OUR PROCESS 3 + 2 LAYOUT / TYPOGRAPHY
   2026-10-06
   Desktop: 01 02 03 / centered 04 05
========================================================= */
@media (min-width:1051px){
  #process .process-grid{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    column-gap:38px !important;
    row-gap:76px !important;
  }

  #process .process-item{
    grid-column:span 2 !important;
    min-width:0;
  }

  #process .process-item:nth-child(4){
    grid-column:2 / span 2 !important;
  }

  #process .process-item:nth-child(5){
    grid-column:4 / span 2 !important;
  }

  #process .process-item h3{
    font-size:26px !important;
    line-height:1.32 !important;
    min-height:0 !important;
    margin-bottom:18px !important;
  }

  #process .process-item p{
    max-width:100% !important;
    font-size:17px !important;
    line-height:1.5 !important;
    font-weight:500 !important;
    word-break:keep-all !important;
  }
}

/* Tablet: keep a comfortable two-column layout. */
@media (min-width:851px) and (max-width:1050px){
  #process .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:64px 36px !important;
  }

  #process .process-item h3{
    font-size:19px !important;
    min-height:0 !important;
  }

  #process .process-item p{
    font-size:15px !important;
    line-height:1.8 !important;
  }
}


/* =========================================================
   FINAL — HERO BUSINESS STRIP / ALWAYS OPEN
   2026-10-07
   - Always shows title + description
   - Slightly lower than the previous hover-expanded state
   - Transparent glass panel keeps the hero image visible
========================================================= */
@media (min-width:851px){
  .hero .services{
    bottom:0 !important;
    height:178px !important;
    z-index:30 !important;
    overflow:visible !important;
    background:rgba(5,18,34,.18) !important;
    border-color:rgba(255,255,255,.18) !important;
    border-radius:0 !important;
    -webkit-backdrop-filter:blur(7px) !important;
    backdrop-filter:blur(7px) !important;
  }

  .hero .service,
  .hero .service:hover{
    position:relative !important;
    height:178px !important;
    min-height:178px !important;
    padding:0 !important;
    overflow:hidden !important;
    transform:none !important;
    background:transparent !important;
    z-index:1 !important;
    align-self:stretch !important;
  }

  .hero .service::before{
    display:none !important;
  }

  .hero .service::after,
  .hero .service:hover::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    height:178px !important;
    z-index:0 !important;
    background:rgba(7,27,49,.48) !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:blur(5px) !important;
    backdrop-filter:blur(5px) !important;
    transition:background .3s ease !important;
  }

  .hero .service:hover::after{
    background:rgba(20,62,101,.62) !important;
  }

  .hero .service .title,
  .hero .service:hover .title{
    position:absolute !important;
    left:28px !important;
    right:68px !important;
    top:31px !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    letter-spacing:-.02em !important;
    z-index:2 !important;
  }

  .hero .service .detail,
  .hero .service:hover .detail{
    position:absolute !important;
    left:28px !important;
    right:70px !important;
    top:72px !important;
    bottom:auto !important;
    margin:0 !important;
    max-width:330px !important;
    opacity:1 !important;
    transform:none !important;
    color:rgba(238,245,252,.58) !important;
    font-family:'IBM Plex Sans',Arial,sans-serif !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.3 !important;
    z-index:2 !important;
  }

  .hero .service .arrow,
  .hero .service:hover .arrow{
    right:24px !important;
    bottom:22px !important;
    opacity:.78 !important;
    transform:none !important;
    z-index:2 !important;
  }

  .hero .service:hover .arrow{
    opacity:1 !important;
    transform:translateX(3px) !important;
  }

  /* The business strip must sit above the hero rolling indicators. */
  .hero .hero-slider-controls{
    z-index:4 !important;
  }

  /* Reserve enough visual breathing room above the fixed-height strip. */
  .hero .copy{
    padding-bottom:210px !important;
  }
}

/* Mobile: keep all three descriptions visible from the start as well. */
@media (max-width:850px){
  .hero .copy{
    padding-bottom:360px !important;
  }

  .hero .services{
    z-index:30 !important;
  }

  .hero .service .detail,
  .hero .service:hover .detail,
  .hero .service.active .detail{
    opacity:1 !important;
    max-height:120px !important;
    transform:none !important;
    padding:0 44px 16px 35px !important;
  }

  .hero .service .title,
  .hero .service:hover .title{
    color:#fff !important;
    transform:none !important;
  }

  .hero .service .arrow,
  .hero .service:hover .arrow{
    opacity:.78 !important;
    transform:none !important;
  }
}


/* =========================================================
   FINAL FIX — HERO BUSINESS CARDS ALWAYS FULLY VISIBLE
   Hover changes only the panel background.
========================================================= */
@media (min-width:851px){
  .hero .services{
    height:178px !important;
    z-index:30 !important;
  }

  .hero .service,
  .hero .service:hover{
    height:178px !important;
    min-height:178px !important;
    transform:none !important;
  }

  .hero .service::after,
  .hero .service:hover::after{
    height:178px !important;
    inset:0 !important;
  }

  .hero .service .title,
  .hero .service:hover .title{
    top:30px !important;
    bottom:auto !important;
    transform:none !important;
    font-size:20px !important;
    color:#fff !important;
  }

  .hero .service .detail,
  .hero .service:hover .detail{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    top:72px !important;
    bottom:auto !important;
    max-height:none !important;
    transform:none !important;
    color:rgba(238,245,252,.9) !important;
  }

  .hero .service .arrow,
  .hero .service:hover .arrow{
    bottom:22px !important;
    opacity:.78 !important;
    transform:none !important;
  }

  /* Only this changes on hover */
  .hero .service::after{
    background:rgba(7,27,49,.48) !important;
    transition:background .28s ease !important;
  }

  .hero .service:hover::after{
    background:rgba(25,69,111,.66) !important;
  }

  .hero .service:hover .title,
  .hero .service:hover .detail{
    transform:none !important;
  }
}

/* Mobile: descriptions are also permanently open; no accordion motion. */
@media (max-width:850px){
  .hero .service .detail,
  .hero .service:hover .detail,
  .hero .service.active .detail{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    max-height:none !important;
    transform:none !important;
  }

  .hero .service .arrow,
  .hero .service:hover .arrow,
  .hero .service.active .arrow{
    transform:none !important;
  }
}


/* =========================================================
   FINAL — WHY US / 4 CIRCLES / ALWAYS VISIBLE
   No flip. Hover only changes circle background/border.
========================================================= */
#why .why-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  align-items:center !important;
  width:100% !important;
  margin-top:64px !important;
}

#why .why-item{
  width:100% !important;
  margin:0 !important;
  position:relative !important;
  z-index:1 !important;
}

#why .why-item + .why-item{
  margin-left:-12px !important;
}

#why .why-circle{
  width:100% !important;
  max-width:330px !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  margin:0 auto !important;
  border:1px solid rgba(171,190,211,.48) !important;
  border-radius:50% !important;
  background:rgba(8,27,48,.18) !important;
  transform:none !important;
  transition:background-color .3s ease,border-color .3s ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#why .why-circle:hover{
  transform:none !important;
  background:rgba(36,104,171,.24) !important;
  border-color:rgba(99,164,231,.9) !important;
}

/* Old front/back interaction is no longer used. */
#why .why-front,
#why .why-hover{
  display:none !important;
}

#why .why-content{
  position:static !important;
  width:78% !important;
  padding:0 !important;
  text-align:center !important;
  transform:none !important;
  opacity:1 !important;
}

#why .why-content h3{
  margin:0 0 7px !important;
  color:#fff !important;
  font-family:'IBM Plex Sans',Arial,sans-serif !important;
  font-size:26px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
}

#why .why-en-sub{
  display:block !important;
  margin:0 0 25px !important;
  color:#66aaf1 !important;
  font-family:'IBM Plex Sans',Arial,sans-serif !important;
  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
}

#why .why-content p{
  margin:0 !important;
  color:rgba(255,255,255,.9) !important;
  font-family:'Noto Serif KR',serif !important;
  font-size:17px !important;
  line-height:1.5 !important;
  font-weight:500 !important;
  word-break:keep-all !important;
}

/* Tablet */
@media(max-width:1180px){
  #why .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px !important;
  }
  #why .why-item + .why-item{
    margin-left:0 !important;
  }
  #why .why-circle{
    max-width:340px !important;
  }
}

/* Mobile */
@media(max-width:680px){
  #why .why-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
    margin-top:44px !important;
  }
  #why .why-circle{
    max-width:320px !important;
  }
  #why .why-content h3{
    font-size:19px !important;
  }
  #why .why-content p{
    font-size:15px !important;
  }
}


/* =========================================================
   FINAL FIX — WHY US 4 CIRCLES / TRUE OVERLAP
   Keep four circles on one row and overlap their edges.
========================================================= */
@media (min-width:1181px){
  #why .why-grid{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    width:100% !important;
    margin-top:64px !important;
  }

  #why .why-item{
    flex:0 0 27% !important;
    width:27% !important;
    margin:0 !important;
    position:relative !important;
  }

  #why .why-item + .why-item{
    margin-left:-2.7% !important;
  }

  #why .why-circle{
    width:100% !important;
    max-width:none !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
  }

  #why .why-item:hover{
    z-index:5 !important;
  }
}


/* =========================================================
   SAFE RESTORE — OUR SERVICES / APPROVED 5-CARD VERSION
   Restores only #services. Other sections remain untouched.
========================================================= */
#services .service-bento{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  grid-template-rows:390px 390px !important;
  gap:16px !important;
}
#services .service-bento .svc-card{
  min-height:0 !important;
  grid-column:auto !important;
  grid-row:auto !important;
  overflow:hidden !important;
}
#services .service-bento .c1{grid-column:1 / span 3 !important;grid-row:1 !important;}
#services .service-bento .c2{grid-column:4 / span 3 !important;grid-row:1 !important;}
#services .service-bento .c3{grid-column:1 / span 2 !important;grid-row:2 !important;}
#services .service-bento .c4{grid-column:3 / span 2 !important;grid-row:2 !important;}
#services .service-bento .c5{grid-column:5 / span 2 !important;grid-row:2 !important;}

#services .service-bento .c1 .svc-photo{background-image:url('../images/embedded_15.png')!important;background-position:center 58%!important;}
#services .service-bento .c2 .svc-photo{background-image:url('../images/embedded_19.png')!important;background-position:center center!important;}
#services .service-bento .c3 .svc-photo{background-image:url('https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1400&q=84')!important;background-position:center center!important;}
#services .service-bento .c4 .svc-photo{background-image:url('../images/embedded_18.png')!important;background-position:center 55%!important;}
#services .service-bento .c5 .svc-photo{background-image:url('../images/embedded_17.png')!important;background-position:center center!important;}

#services .svc-summary,
#services .c1 .svc-summary,
#services .c2 .svc-summary,
#services .c3 .svc-summary,
#services .c4 .svc-summary,
#services .c5 .svc-summary{
  position:absolute !important;
  left:30px !important;
  right:30px !important;
  bottom:auto !important;
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  transform:rotateY(0deg) !important;
}
@media(min-width:1051px){
  #services .c1 .svc-summary,
  #services .c2 .svc-summary{top:66% !important;}
  #services .c3 .svc-summary,
  #services .c4 .svc-summary,
  #services .c5 .svc-summary{top:57% !important;}
}

#services .svc-summary h3,
#services .c1 .svc-summary h3,
#services .c2 .svc-summary h3,
#services .c3 .svc-summary h3,
#services .c4 .svc-summary h3,
#services .c5 .svc-summary h3{
  position:static !important;
  inset:auto !important;
  display:block !important;
  max-width:100% !important;
  margin:0 0 7px !important;
  padding:0 !important;
  font-family:'IBM Plex Sans',Arial,sans-serif !important;
  font-size:clamp(24px,1.65vw,30px) !important;
  line-height:1.15 !important;
  font-weight:500 !important;
  letter-spacing:-.035em !important;
}
#services .c3 .svc-summary h3,
#services .c4 .svc-summary h3,
#services .c5 .svc-summary h3{font-size:26px !important;}

#services .svc-summary .svc-copy,
#services .journal-card .svc-summary .svc-copy{
  position:static !important;
  inset:auto !important;
  display:block !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#d2dbe7 !important;
  font-family:'Noto Serif KR',serif !important;
  font-size:15px !important;
  line-height:1.6 !important;
  font-weight:500 !important;
  word-break:keep-all !important;
}
#services .c3 .svc-summary .svc-copy,
#services .c4 .svc-summary .svc-copy,
#services .c5 .svc-summary .svc-copy{font-size:15px !important;}

#services .svc-detail{padding:28px 30px !important;overflow:hidden !important;}
#services .svc-detail-top span,
#services .svc-detail li{font-family:'IBM Plex Sans',Arial,sans-serif !important;}
#services .svc-detail ul{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px 22px !important;
}
#services .c3 .svc-detail ul,
#services .c4 .svc-detail ul,
#services .c5 .svc-detail ul{
  grid-template-columns:1fr !important;
  gap:8px !important;
}
#services .svc-detail li{font-size:16px !important;line-height:1.45 !important;}

@media (hover:hover) and (pointer:fine){
  #services .svc-card:hover .svc-summary{transform:rotateY(-180deg) !important;}
}
#services .svc-card.flip-open .svc-summary{transform:rotateY(-180deg) !important;}

@media(max-width:1050px){
  #services .service-bento{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
  }
  #services .service-bento .svc-card{
    grid-column:auto !important;
    grid-row:auto !important;
    min-height:380px !important;
  }
  #services .service-bento .c5{grid-column:1 / -1 !important;}
  #services .svc-summary,
  #services .c1 .svc-summary,
  #services .c2 .svc-summary,
  #services .c3 .svc-summary,
  #services .c4 .svc-summary,
  #services .c5 .svc-summary{top:64% !important;}
}
@media(max-width:850px){
  #services .service-bento{display:block !important;}
  #services .service-bento .svc-card{min-height:390px !important;margin-bottom:14px !important;}
  #services .svc-summary,
  #services .c1 .svc-summary,
  #services .c2 .svc-summary,
  #services .c3 .svc-summary,
  #services .c4 .svc-summary,
  #services .c5 .svc-summary{
    left:23px !important;
    right:23px !important;
    top:62% !important;
  }
  #services .svc-summary h3,
  #services .c3 .svc-summary h3,
  #services .c4 .svc-summary h3,
  #services .c5 .svc-summary h3{font-size:25px !important;}
  #services .svc-summary .svc-copy{font-size:14px !important;line-height:1.6 !important;}
  #services .svc-detail ul{grid-template-columns:1fr !important;}
}


/* Section kicker lines: OUR PROCESS / WHY US only */
.process-kicker{display:flex;align-items:center;gap:18px;}
.process-kicker i{display:block;width:72px;height:1px;background:#78a6e2;flex:none;}
.why-kicker{display:flex;align-items:center;gap:18px;}
.why-kicker::after{content:"";display:block;width:72px;height:1px;background:#78a6e2;flex:none;}

/* FIND US kicker line only */
.location-section .location-kicker{display:flex;align-items:center;gap:18px;}
.location-section .location-kicker::after{content:"";display:block;width:72px;height:1px;background:#78a6e2;flex:none;}