/* =====================================
   COREDINATE – Final Styles (Technology/About)
   Requirements:
   - Hero background starts below fixed nav
   - 3DFy overlaps hero by 190px (section-level negative margin)
   - Sections below 3DFy have exactly 110px vertical gap (no overlap)
   - Side background images align to viewport edges (L/R) and match section height
   - Section headers align horizontally with their text columns
=====================================*/

:root{
  --vw: 1vw;
  --gap: clamp(12px, 1.6vw, 28px);
  --maxw: 1280px;

  --fg: #f6f7f8;
  --muted: #cfd3d8;
  --line: #1c1d20;

  --nav-h: 72px;                         /* Fixed header height */
  --hero-h: clamp(520px, 37vw, 710px);   /* 1920x1080 기준 710px */
  --overlap-3dfy: 190px;                 /* 3DFy 겹침량 */
  --block-pad: clamp(18px, 2vw, 28px);   /* 카드 내부 패딩 */

  --container-pad: calc(var(--gap) * 1.1);
  --container-left: max(calc((100vw - var(--maxw))/2), 0px);

  --overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  --media-side-w: min(520px, 42vw);      /* 사이드 배경 폭(뷰포트 기준) */
}

*{ box-sizing: border-box }
html, body{ height:100% }
html{ scroll-behavior: smooth }
body{
  margin:0;
  background-color:#000;                /* 전역 배경색만 고정 (이미지 보존) */
  color: var(--fg);
  font-family: "Apple SD Gothic Neo","Noto Sans KR",Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100%; height:auto }
.container{ max-width: var(--maxw); margin:0 auto; padding:0 var(--container-pad) }

/* Header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:18px 0;
  background:#000;
    pointer-events:none;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; pointer-events:auto }
.logo{ font-weight:700; letter-spacing:.4px; opacity:.95 }
.nav{ display:flex; gap:28px }
.nav a{ color:#e8eaee; font-size:15px; opacity:.9;font-size:1.1em;}
.nav a:hover{ opacity:1 }

/* Sections base */
/* .panel, .tech-section, .about-hero, .problems, .timeline{ background-color:#000 } */
.stack{ display:flex; flex-direction:column; gap: var(--gap) }
.grid{ display:grid; gap: var(--gap) }

/* Shared hero (About/Tech) */
.about-hero{
  position:relative;
  min-height: var(--hero-h);
  display:grid;
  align-items: center;                  /* 기본 중앙 정렬 */
  padding: calc(var(--gap)*6) 0;
}
.about-hero .bg{
  position:absolute; left:0; right:0; top:0; bottom:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  z-index:0;
}
.about-hero .overlay{
  position:absolute; left:0; right:0; top:0; bottom:0;
  background: var(--overlay);
  z-index:1;
}
.about-hero .content{
  position:relative; z-index:2;
  color:#fff; 
}
.about-hero h1{ margin:0 0 18px; font-weight:900; font-size: clamp(34px, 5vw, 6.196875em) }
.about-hero p { margin:0; color:#dbe0e6; font-size:1.3125em }

/* About page only: one background file */
.about-onebg .about-hero .bg{ display:none }
.about-onebg .about-hero .overlay{ background: transparent }

/* Technology hero specifics */
#tech-hero{ padding-top: 0; }
#tech-hero .bg{ top: var(--nav-h) }          /* 이미지 시작선 보정: nav 아래 */
#tech-hero .overlay{ top: var(--nav-h) }     /* 오버레이도 동일 보정 */

/* Hero 텍스트 좌측 기준선 = 3DFy와 동일 */
#tech-hero .content{
  margin-left: calc(var(--container-left) + var(--container-pad) + var(--block-pad)) !important;
  padding-left: 0 !important;
  text-align:left;
  min-height: calc(var(--hero-h) - var(--overlap-3dfy)); /* (710 - 190) 기준 중앙 */
  display:grid; align-content:center;
}

/* Pill */
.pill{
  display:inline-block;
  background:#79b894; color:#fff;
  padding:6px 14px;
  border-radius:50px;                   /* 요청: 50px */
  font-weight:700;
  font-size: 1.125em;
}

/* Technology blocks */
.tech-block{
  position:relative; overflow: visible; z-index:0;
  border:none; padding: var(--block-pad);    /* no bg: use ::before */
}
/* 사이드 배경: 화면 끝에서 시작하도록 container-left만큼 바깥으로 확장 */
.tech-block::before{
  content:""; position:absolute; z-index:1;
  top: 0; bottom: 0;
  width: var(--media-side-w);
  background: var(--media) center/contain no-repeat;
  filter: brightness(.95);
  pointer-events:none;
}
.tech-block.media-left::before{ /*left: calc(var(--container-left) * -1);*/ width: calc(var(--container-left) + var(--media-side-w)); background-position: left center; }
.tech-block.media-right::before{ /*right: calc(var(--container-left) * -1);*/ width: calc(var(--container-left) + var(--media-side-w)); background-position: right center; }

.tech-block .content{ position:relative; z-index:2 }
.tech-block.media-right .content{ padding-right: min(520px, 44%) }
.tech-block.media-left  .content{ padding-left:  min(520px, 44%) }

.tech-block h2{ margin:0 0 10px; font-size: clamp(24px, 3vw, 36px) }
.tech-block h3{ margin:18px 0 8px; font-size: clamp(18px, 2vw, 22px) }
.tech-block p { margin:0; color:#fff;font-size:1rem }
.tech-block ul{ margin:8px 0 0 18px; padding:0 }
.tech-block li{ margin:4px 0 }



/* 3DFy overlap: section-level negative margin */
#tech-3dfy{
  margin-top: calc(var(--overlap-3dfy) * -1) !important;
  position:relative; z-index:5;
}

/* 3DFy 이후 섹션 간격 = 110px */
.tech-section + .tech-section{ margin-top: 110px }

/* 섹션 헤더 정렬: 텍스트와 동일 X선상 */
/* Problems / Timeline (borders removed) */
.problem-card, .timeline-item, .card{ border:none }
.problem-card{
  background: rgba(255,255,255,0.03);
  border-radius:14px;
  padding: clamp(16px, 2vw, 22px);
  display:flex; align-items:flex-start; gap:16px;
  word-break: keep-all;
}
.problem-card .icon{ width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center }
.problem-card h3{ margin:0 0 4px }
.problem-card p { margin:0; color:#c9d2da }

body.about-onebg .timeline-years{ display: grid; gap: 14px; }
body.about-onebg .year-block{
  display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 16px;
}
body.about-onebg .year-label{
  font-size: 36px; color: #fff; line-height: 1.1;  white-space: nowrap;border-left: 2px solid #75c39b; font-weight: 700; padding:15px 12px 15px 22px
}
body.about-onebg .year-events{
  margin: 0; padding: 0 0 0 18px; list-style: none;
}

body.about-onebg .year-events .month{ font-weight: 700;font-size:30px }
body.about-onebg .year-events .sep{ opacity: .6; }
body.about-onebg .year-events .desc{ font-size: 21px; color: #e6eaef; line-height: 1.5; }

@media (max-width: 767px){
  body.about-onebg .year-block{display: block}
  body.about-onebg .year-label{font-size:2.25em;}
  body.about-onebg .year-events .month{ font-size: 1.25em;min-width:45px; }
  body.about-onebg .year-events .desc{ font-size: 1em; }
  .narrow{ letter-spacing: -0.07em; }
  body.about-onebg .year-events li{ padding: 8px 0 8px 12px; }
  body.about-onebg #location #office-address .title{font-size:1.25em !important; min-width:57px}
  body.about-onebg #location #office-address .address{font-size:1em !important}

}


body.about-onebg .year-events li, body.about-onebg #location #office-address{
  position: relative;
  padding: 10px 0 10px 28px; /* 16px dot + spacing */
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid transparent;
  border-image: linear-gradient(to right, rgba(90,90,90,1) 0%, rgba(90,90,90,0) 100%) 1;
  box-shadow: -18px 29px 49px 0 rgba(117,195,155,0.21);
  margin-bottom: 8px;
}

body.about-onebg .year-events li::before{
  content: "";
  position: absolute;
  left: -8px;                /* center of 16px dot on the left border */
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #75c39b;
  z-index: 1;
}

body.about-onebg #location #map {
  min-height:285px;
  margin-left:calc(100% - 100vw);
  margin-right:100px;
  padding-right:100px;
  margin-bottom:15px;
  width:calc(100vw + (100vw - 100%));
}
body.about-onebg #location #office-address .title{font-weight:700; font-size:30px;padding:0 10px}
body.about-onebg #location #office-address .address {font-size:21px; line-height:1.5}
/* Footer */
footer{
  text-align:center; color:#bfc5cc; font-size:14px;
  padding:60px 0; border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}

/* Motif 색만 고정 (이미지는 보존) */
.motif{ background-color:#000 }


/* 3DFy: revert background to container-bound (not viewport-edge), show full image */
/*#tech-3dfy .tech-block.media-right::before{
  left: auto !important;
  right: 0 !important;
  width: min(480px, 44%) !important;
  background-position: right center !important;
  background-size: contain !important;
}*/


/* Header alignment = .tech-block > .content text start */

/* If the section has a left-media block, text starts after the media column */

/* Mobile: content stacks; text starts at block-pad */



/* Header aligned with .tech-block > .content start */
.tech-section header{
  margin: 0;
  padding-left: var(--hdr-inset, var(--block-pad));
}

/* Map per-section header inset (no :has, compatible) */
#tech-3dfy   .container, 
#tech-carelog .container{
  --hdr-inset: var(--block-pad); /* media-right: text starts at block-pad */
}
#tech-stream  .container, 
#tech-synergy .container{
  --hdr-inset: calc(var(--block-pad) + min(520px, 44%)); /* media-left: add side image width */
}

/* Mobile: content stacks; text starts at block-pad */



/* Accents: h3 leading bar + custom list bullets */
.tech-block .content h3{
  position: relative;
  padding-left: 12px; /* space for the bar */
}
.tech-block .content h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;          /* slightly below cap-height */
  bottom: 0.15em;       /* keep a little inset top/bottom */
  width: 2px;
  background: #75c39b;
  border-radius: 1px;
}

.tech-block .content ul{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;           /* reset to align with content start */
}
.tech-block .content li{
  position: relative;
  padding-left: 28px;   /* space for 16px bullet + gap */
  margin: 6px 0;
}
.tech-block .content li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;          /* vertically center against text line */
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #75c39b;
}


/* =============================
   ABOUT PAGE RESTORE (single background)
   - Keep sections transparent so body background image shows
   - Keep hero bg/overlay hidden on About only
   - Restore hero height closer to original (min 74vh)
=============================*/
body.about-onebg .about-hero,
body.about-onebg .problems,
body.about-onebg .timeline{
  background-color: transparent !important;
}

body.about-onebg .about-hero .bg{ display:none !important; }
body.about-onebg .about-hero .overlay{ background: transparent !important; }

body.about-onebg .about-hero{
  min-height: min(74vh, 760px);
  padding: calc(var(--gap)*6) 0;
}


/* =============================
   ABOUT PAGE TYPO & LAYOUT (1920px baseline; Photoshop pt → CSS)
   pt→px: 1pt = 1.333px
   - ABOUT US: 99.15pt → 132px
   - Hero subtext: 36pt → 48px
   - Problems h2: 72pt → 96px
   - Problems h3: 36pt → 48px
   - Problems p: 21pt → 28px
=============================*/
body.about-onebg #about-hero h1{
  font-size: clamp(48px, 6.88vw, 132px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
body.about-onebg #about-hero p{
  font-size: clamp(18px, 2.5vw, 48px);
  line-height: 1.5;
}
body.about-onebg #problems h2{
  font-size: clamp(32px, 5vw, 96px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
body.about-onebg .problems h3{
  font-size: clamp(20px, 2.5vw, 48px);
  line-height: 1.22;
}
body.about-onebg .problems .problem-card p{
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: 1.5;
}

/* Problems: horizontal grid on desktop */
body.about-onebg .problem-grid{
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 992px){
  body.about-onebg .problem-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =============================
   ABOUT PAGE: exact pt→px sizes + problems layout
=============================*/
/* 1) Typography (1:1 mapping) */
body.about-onebg #about-hero h1{ font-size: 99.15px; line-height:1.12; letter-spacing:-0.01em }
body.about-onebg #about-hero p { font-size: 36px;    line-height:1.5 }
body.about-onebg #problems h2   { font-size: 72px;    line-height:1.12; letter-spacing:-0.01em }
body.about-onebg .problems h3    { font-size: 36px;    line-height:1.22 }
body.about-onebg .problems .problem-card p{ font-size: 21px; line-height:1.5 }

/* 2) Problems cards: vertical stack, centered */
body.about-onebg .problem-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 12px;
  padding: 24px;
}
/* reset icon box styles and set image size */
body.about-onebg .problem-card .icon{
  width: auto; height: auto;
  border: 0; background: transparent; color: inherit;
  display: block;
}
body.about-onebg .problem-card .icon img{
  width: 100px; height: auto; display:block;
}


/* =============================
   ABOUT PAGE: Problems & Timeline refinements
=============================*/
/* Problems: icon, h3, p with 30px gaps; remove background */
body.about-onebg .problem-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 30px;
  background: none !important;
  border: 0 !important;
  padding: 24px;
}
body.about-onebg .problem-card .icon img{
  width: auto; height: 100px; display:block;
}

/* Timeline: year 36px, text 21px; year bullet 16px #75c39b; remove year bg/border */
body.about-onebg .timeline-year{
  font-size: 36px;
  background: none !important;
  border: 0 !important;
  position: relative;
  padding-left: 28px;    /* space for 16px bullet + gap */
  display: inline-flex;
  align-items: center;
  min-width: 0;
 color:#fff; }
body.about-onebg .timeline-year::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #75c39b;
}
body.about-onebg .timeline-text{ font-size: 21px; }

/* Timeline item: black → transparent gradient background, fading border */
body.about-onebg .timeline-item{
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  border: 1px solid transparent;
  border-image: linear-gradient(to right, #5a5a5a 0%, rgba(90,90,90,0) 100%) 1;
 padding-top:15px; padding-bottom:15px; }


/* =============================
   ABOUT PAGE: hero start alignment & wider paragraph
=============================*/
/* Ensure both start at the same container content edge */
body.about-onebg #about-hero{ display:grid; justify-items:start }
body.about-onebg #about-hero .content{ margin-left:0 !important; padding-left:0 !important }
body.about-onebg #problems header{ margin-left:0 !important; padding-left:0 !important }

/* Widen hero paragraph line length */
body.about-onebg #about-hero p{
  max-width: min(1100px, 70vw);
}


/* =============================
   ABOUT PAGE: unified text-start & wider hero paragraph
=============================*/
/* Define unified page text start for About: container + pad + block-pad */
body.about-onebg{ --page-text-start: calc(var(--container-left) + var(--container-pad) + var(--block-pad)); }

/* Hero text starts exactly at the same X as other sections' main text */
body.about-onebg #about-hero .content{
  margin-left: var(--page-text-start) !important;
  padding-left: 0 !important;
  text-align: left;
}

/* Problems / Timeline headers: align to content start within container
   (headers live inside .container, so add only the inner block pad) */
body.about-onebg #problems > .container > header,
body.about-onebg #timeline  > .container > header{
  margin-left: 0 !important;
  padding-left: var(--block-pad) !important;
}

/* Widen hero paragraph */
body.about-onebg #about-hero p{
  max-width: min(1200px, 78vw);
  word-break:keep-all;
}


/* Main page: center-align hero background */
#home-hero .bg{
  background-position: center center !important;
}


/* =============================
   MAIN PAGE: center-align section backgrounds
   - Applies ONLY to home sections (#home-...)
   - Keeps technology/about pages unchanged
=============================*/
#home-3dfy .tech-block::before,
#home-stream .tech-block::before,
#home-trust .tech-block::before{
  left: 50% !important;
  right: auto !important;
  width: var(--media-side-w) !important;
  transform: translateX(-50%);
  background-position: center center !important;
}


/* MAIN PAGE: section backgrounds should fill section height */
#home-3dfy .tech-block::before,
#home-stream .tech-block::before,
#home-trust .tech-block::before{
  background-size: cover !important;      /* match section height (box height) */
  background-position: center center !important;
}


/* MAIN PAGE: section backgrounds no-crop (contain) */
#home-3dfy .tech-block::before,
#home-stream .tech-block::before,
#home-trust .tech-block::before{
  background-size: contain !important;     /* do not crop */
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* MAIN PAGE: section backgrounds fit height without horizontal cropping
   - The pseudo-element width is derived from height via aspect-ratio
   - Default aspect ratio 16/9; can be overridden per section via --media-ar
*/
#home-3dfy .tech-block::before,
#home-stream .tech-block::before,
#home-trust .tech-block::before{
  height: 100% !important;
  width: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  aspect-ratio: var(--media-ar, 16/9);
  background-size: contain !important;     /* show full image, no crop */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none;
}


/* MAIN PAGE container.background rules will be defined below */


/* =============================
   MAIN PAGE: backgrounds on container.stack (centered, no horizontal crop)
=============================*/
#home-3dfy  > .container.stack,
#home-stream > .container.stack,
#home-trust > .container.stack{
  background: var(--section-media) center/contain no-repeat;
  position: relative;
}

/* Disable old pseudo-backgrounds on MAIN to avoid double render */
#home-3dfy .tech-block::before,
#home-stream .tech-block::before,
#home-trust .tech-block::before{ content: none !important }


/* =====================================
   MAIN LANDING (matches first PSD/PNG)
   - Full-bleed hero + 3 panels
=====================================*/
#home-landing-hero,
.landing-panel{
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(92vh, 920px);
  padding: calc(var(--gap)*4) 0;
  overflow: hidden;
  background-color: #000;
}
#home-landing-hero .bg,
.landing-panel .bg{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
#home-landing-hero .overlay,
.landing-panel .overlay{
  position: absolute;
  inset: 0;
  background: var(--overlay);
  z-index: 1;
}
#home-landing-hero .content,
.landing-panel .block-title{
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Hero starts below fixed nav */
#home-landing-hero .bg{ top: var(--nav-h) }
#home-landing-hero .overlay{ top: var(--nav-h) }

/* Hero typography */
#home-landing-hero .content .eyebrow{
  letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; color:#fff; font-size:48px; margin-bottom:14px; display:block;
}
#home-landing-hero .content h1{
  margin:0 0 16px; font-weight:800;
  font-size: clamp(32px, 5vw, 62px);
  line-height:1.14;
}
#home-landing-hero .content .lead{
  color:#fff; max-width: 820px; margin:60px auto 60px;
  font-size: clamp(14px, 1.2vw, 17px);
}
#home-landing-hero .content .btn{
  display:inline-block; padding:10px 24px;
  border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent;
  font-weight:600; letter-spacing:.02em;
}
#home-landing-hero .content .btn:hover{ border-color:#fff }

/* Panel headings */
.landing-panel .block-title{
  width:min(var(--maxw), 92vw);
  text-align:left;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.landing-panel .block-title h2{
  margin:0 0 8px; font-weight:800;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height:1.12;
}
.landing-panel .block-title p{
  margin:0; color:#e6e8ec; opacity:.9;
}


/* =============================
   MAIN: ensure landing hero fully visible below nav
   - Use viewport dynamic height to avoid mobile chrome issues
=============================*/
#home-landing-hero{
  min-height: calc(100vh - var(--nav-h));
}
@supports (height: 100dvh){
  #home-landing-hero{
    min-height: calc(100dvh - var(--nav-h));
  }
}
/* keep hero text from sitting under the fixed nav */
#home-landing-hero .content{ padding-top: var(--nav-h); }


/* MAIN: hero background should not crop horizontally */
#home-landing-hero .bg{
  background-size: contain !important;      /* 전체 이미지가 보이도록 */
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* =============================
   GLOBAL: prevent horizontal overflow
=============================*/
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* MAIN: ensure landing panels never cause horizontal scroll */
#home-landing-hero, .landing-panel{
  overflow: hidden;
}


/* MAIN: prevent text from being pushed off-screen by side paddings */
#home-3dfy  .tech-block .content,
#home-stream .tech-block .content,
#home-trust .tech-block .content{
  padding-left: var(--block-pad) !important;
  padding-right: var(--block-pad) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* RESPONSIVE container --maxw steps */
@media (max-width: 1440px){ :root{ --maxw: 1200px; } }
@media (max-width: 1200px){ :root{ --maxw: 1040px; } }
@media (max-width: 1024px){ :root{ --maxw: 960px; } }
@media (max-width: 900px){  :root{ --maxw: 100vw; } }


/* =====================================
   ABOUT MOBILE TYPO OVERRIDES (force)
   - Ensure desktop pt→px sizes downscale on phones
=====================================*/



/* =====================================
   TECHNOLOGY (mobile ≤767px) overrides
   - Hide section backgrounds (except hero)
   - Remove 3DFy overlap with hero
=====================================*/



/* =====================================
   TECHNOLOGY (mobile ≤767px): add section separation
   - Card-style containers with subtle border/radius/shadow
   - Header divider inside each section card
=====================================*/

/* === Unified mobile rules (≤767px) === */
@media (max-width: 767px){
.tech-block::before{ width:100%; left:0; right:0 }
  .tech-block .content{ padding:0; padding-top:24px }

.tech-section header{ padding-left: var(--block-pad) !important; }

body.about-onebg #about-hero h1{ font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.18; }
  body.about-onebg #about-hero p { font-size: clamp(15px, 4.2vw, 18px) !important; max-width: 92vw; line-height: 1.55; }
  body.about-onebg #problems h2   { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.18; }
  body.about-onebg .problems h3   { font-size: clamp(18px, 5.2vw, 20px) !important; line-height: 1.28; }
  body.about-onebg .problems .problem-card p{ font-size: clamp(14px, 4.2vw, 16px) !important; line-height:1.55; }
  /* Keep cards stacked and centered */
  body.about-onebg .problem-grid{ grid-template-columns: 1fr !important; }
  body.about-onebg .problem-card{ gap: 24px; padding: 20px; }
  body.about-onebg .problem-card .icon img{ width: 80px; height: auto; }
  /* Timeline compact */
  body.about-onebg .timeline-year{ font-size: 22px !important; padding-left: 24px !important; }
  body.about-onebg .timeline-text{ font-size: 16px !important; }
  body.about-onebg .timeline-item{ padding-top: 12px !important; padding-bottom: 12px !important; }

/* 1) Hide side/background images for tech sections except hero */
  #tech-3dfy  .tech-block::before,
  #tech-stream .tech-block::before,
  #tech-carelog .tech-block::before,
  #tech-synergy .tech-block::before{
    content: none !important;
    display: none !important;
    width: 0 !important; height: 0 !important;
  }
  /* Reset content padding that expected an image band */
  #tech-3dfy  .tech-block .content,
  #tech-stream .tech-block .content,
  #tech-carelog .tech-block .content,
  #tech-synergy .tech-block .content{
    padding-top: 0 !important;
    padding-left: var(--block-pad) !important;
    padding-right: var(--block-pad) !important;
  }

  /* 2) Remove 3DFy overlap with hero on mobile */
  #tech-3dfy{ margin-top: 0 !important; }
  #tech-3dfy > .container{ transform: none !important; isolation: auto !important; }
  #tech-3dfy::after{ height: 0 !important; }

#tech-3dfy  > .container,
  #tech-stream > .container,
  #tech-carelog > .container,
  #tech-synergy > .container{
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px var(--block-pad) 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  }
  /* header divider for clearer separation */
  #tech-3dfy  > .container > header,
  #tech-stream > .container > header,
  #tech-carelog > .container > header,
  #tech-synergy > .container > header{
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 10px;
    margin-bottom: 14px;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  /* tighten inter-section spacing a bit */
  #tech-3dfy + .tech-section,
  #tech-stream + .tech-section,
  #tech-carelog + .tech-section,
  #tech-synergy + .tech-section{
    margin-top: 40px !important;
  }

  /* Hero eyebrow tighter tracking on mobile */
  #home-landing-hero .content .eyebrow{
    letter-spacing: .12em !important;
    text-indent: .12em !important;
  }
}


/* MOBILE: let hero H1 reflow naturally (ignore desktop <br> tags) */
@media (max-width: 767px){
  #home-landing-hero .content h1 br{ display:none !important; }
  #home-landing-hero .content h1{
    text-wrap: balance;           /* modern browsers: nicer multi-line balance */
    word-break: keep-all;         /* Korean: avoid breaking within words */
    overflow-wrap: anywhere;      /* fallback for long unbroken tokens */
    max-width: 92vw;              /* allow wider measure on phones */
    margin-left: auto; margin-right: auto;
  }

  /* Mobile: ignore <br> in hero .lead and allow natural wrapping */
  #home-landing-hero .content .lead br{ display:none !important; }
  #home-landing-hero .content .lead{
    white-space: normal !important;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
    max-width: 92vw;
    margin-left: auto; margin-right: auto;
  }
}