/* ===================== CUBICMETER Landing Page ===================== */
:root{
  --orange:#F36B21;
  --orange-dark:#D4551A;
  --charcoal:#202226;
  --white:#FFFFFF;
  --light-gray:#F5F5F3;
  --gray-500:#6b6d72;
  --gray-300:#c9c9c8;
  --radius:4px;
  --max-width:1200px;
  --transition:.3s ease;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Noto Sans KR', sans-serif;
  font-weight:300;
  color:var(--charcoal);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Thin, modern gothic feel across all Korean typography: headings use a lighter weight
   (500 instead of the previous bold 700) with slightly relaxed letter-spacing. */
h1,h2,h3,h4{
  font-family:'Noto Sans KR', sans-serif;
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px;}
.section-tag{
  display:inline-block;
  color:var(--orange);
  font-weight:500;
  letter-spacing:.12em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:16px;
}
.section-title{
  font-size:clamp(26px,4vw,42px);
  line-height:1.3;
  white-space:pre-line;
  margin-bottom:20px;
}
.section-sub{
  font-size:clamp(15px,2vw,18px);
  color:var(--gray-500);
  white-space:pre-line;
  max-width:720px;
}
.section-pad{padding:100px 0;}
@media(max-width:768px){.section-pad{padding:64px 0;}}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px;
  border-radius:var(--radius);
  font-weight:500;
  font-size:15px;
  transition:var(--transition);
  white-space:nowrap;
}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);}
.btn-outline{border:1.5px solid rgba(255,255,255,.7);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-dark{background:var(--charcoal);color:var(--white);}
.btn-dark:hover{background:#000;}
.btn-block{width:100%;}

/* ===================== HEADER ===================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;
  transition:var(--transition);
  background:transparent;
}
.header.scrolled{
  background:rgba(32,34,38,.96);
  backdrop-filter:blur(8px);
  padding:12px 0;
  box-shadow:0 2px 20px rgba(0,0,0,.15);
}
.header .container{display:flex;align-items:center;justify-content:space-between;}
.header-container-between{justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;font-weight:500;font-size:20px;color:var(--white);letter-spacing:.04em;}
.logo .dot{color:var(--orange);}
.header-cta-btn{padding:11px 26px;font-size:14px;}

@media(max-width:560px){
  .logo{font-size:17px;}
  .header-cta-btn{padding:9px 18px;font-size:13px;}
}

/* ===================== HERO ===================== */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  color:var(--white);overflow:hidden;
}
/* ---------- Hero Ken-Burns slideshow background (6 slides, slow calm pan/zoom, hard-cut transitions) ---------- */
.hero-bg-slideshow{
  position:absolute;inset:0;overflow:hidden;background:#f5f3ee;
}
.hero-slide{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  will-change:opacity, transform;
}
/* Loop = 48s total, 8s visible per slide (6 slides x 8s = 48s, no gaps).
   Opacity jumps instantly between 0 and 1 (hard cut, zero transition animation) --
   the "on"/"off" switch happens within a 0.05% keyframe step, which is imperceptibly
   fast and reads as an immediate cut, never a dissolve/fade/flash.
   Move (pan+zoom) runs on its own 8s cycle synced 1:1 with each slide's visible window,
   using a calm, slow ease and a SMALL scale/translate range so the image never needs to
   reveal area beyond its cropped frame -- nothing appears to leave the visible frame. */
.hero-slide.kenburns-1{ animation:heroCut1 48s linear infinite, heroMove1 8s ease-in-out infinite; }
.hero-slide.kenburns-2{ animation:heroCut2 48s linear infinite, heroMove2 8s ease-in-out infinite; }
.hero-slide.kenburns-3{ animation:heroCut3 48s linear infinite, heroMove3 8s ease-in-out infinite; }
.hero-slide.kenburns-4{ animation:heroCut4 48s linear infinite, heroMove4 8s ease-in-out infinite; }
.hero-slide.kenburns-5{ animation:heroCut5 48s linear infinite, heroMove5 8s ease-in-out infinite; }
.hero-slide.kenburns-6{ animation:heroCut6 48s linear infinite, heroMove6 8s ease-in-out infinite; }

/* ---- hard-cut visibility windows: slide i visible during global seconds [(i-1)*8, i*8) ---- */
@keyframes heroCut1{ 0%{opacity:1;} 16.63%{opacity:1;} 16.68%{opacity:0;} 100%{opacity:0;} }
@keyframes heroCut2{ 0%{opacity:0;} 16.63%{opacity:0;} 16.68%{opacity:1;} 33.3%{opacity:1;} 33.35%{opacity:0;} 100%{opacity:0;} }
@keyframes heroCut3{ 0%{opacity:0;} 33.3%{opacity:0;} 33.35%{opacity:1;} 49.96%{opacity:1;} 50.01%{opacity:0;} 100%{opacity:0;} }
@keyframes heroCut4{ 0%{opacity:0;} 49.96%{opacity:0;} 50.01%{opacity:1;} 66.63%{opacity:1;} 66.68%{opacity:0;} 100%{opacity:0;} }
@keyframes heroCut5{ 0%{opacity:0;} 66.63%{opacity:0;} 66.68%{opacity:1;} 83.3%{opacity:1;} 83.35%{opacity:0;} 100%{opacity:0;} }
@keyframes heroCut6{ 0%{opacity:0;} 83.3%{opacity:0;} 83.35%{opacity:1;} 100%{opacity:1;} }

/* All moves stay within a tight scale(1.0–1.14) / translate(±2.5%) range, origin fixed at
   dead-center, so the crop always stays comfortably inside the source image -- nothing is
   ever pushed outside the frame, and motion reads as a slow, deliberate, calm drift. */
.hero-slide{ transform-origin:50% 50%; }

/* 1. 거실/다이닝 : 왼쪽 → 오른쪽 느린 드리프트 + 미세 줌인 */
@keyframes heroMove1{
  0%{   transform:scale(1.04) translate(-2%, 0%); }
  100%{ transform:scale(1.12) translate(2%, 0%); }
}

/* 2. 웨딩홀 : 오른쪽 → 왼쪽 느린 드리프트 + 미세 줌아웃 */
@keyframes heroMove2{
  0%{   transform:scale(1.12) translate(2%, 0%); }
  100%{ transform:scale(1.04) translate(-2%, 0%); }
}

/* 3. 병원 로비 : 위 → 아래 느린 드리프트 + 미세 줌인 */
@keyframes heroMove3{
  0%{   transform:scale(1.05) translate(0%, -2%); }
  100%{ transform:scale(1.13) translate(0%, 2%); }
}

/* 4. 오피스 데스크 : 아래 → 위 느린 드리프트 + 미세 줌인 */
@keyframes heroMove4{
  0%{   transform:scale(1.05) translate(0%, 2%); }
  100%{ transform:scale(1.13) translate(0%, -2%); }
}

/* 5. 조명 클로즈업 : 작은 사이즈 → 확대 (느린 클래식 푸시인) */
@keyframes heroMove5{
  0%{   transform:scale(1) translate(0%, 0%); }
  100%{ transform:scale(1.14) translate(0%, 0%); }
}

/* 6. 다이닝 클로즈업 : 확대 → 축소 (느린 줌아웃) */
@keyframes heroMove6{
  0%{   transform:scale(1.14) translate(0%, 0%); }
  100%{ transform:scale(1) translate(0%, 0%); }
}

.hero-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,16,18,.3) 0%,rgba(15,16,18,.4) 55%,rgba(10,11,13,.62) 100%);
}

@media (prefers-reduced-motion: reduce){
  .hero-slide.kenburns-1{ animation:heroCut1 48s linear infinite; }
  .hero-slide.kenburns-2{ animation:heroCut2 48s linear infinite; }
  .hero-slide.kenburns-3{ animation:heroCut3 48s linear infinite; }
  .hero-slide.kenburns-4{ animation:heroCut4 48s linear infinite; }
  .hero-slide.kenburns-5{ animation:heroCut5 48s linear infinite; }
  .hero-slide.kenburns-6{ animation:heroCut6 48s linear infinite; }
}
.hero-content{position:relative;z-index:2;padding-top:120px;padding-bottom:80px;}

/* ---------- Hero center copy : "공간의 가치를 바꾸는 꿈" + CUBICMETER wordmark ---------- */
.hero-content-center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-top:0;padding-bottom:0;
}
.hero-center-eyebrow{
  font-family:'Noto Sans KR', sans-serif;
  font-size:clamp(16px,2.1vw,22px);
  font-weight:300;
  letter-spacing:.16em;
  color:rgba(255,255,255,.92);
  margin-bottom:18px;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.hero-center-logo{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(46px,9vw,128px);
  letter-spacing:.14em;
  color:#ffffff;
  line-height:1;
  text-shadow:0 4px 30px rgba(0,0,0,.45), 0 1px 6px rgba(0,0,0,.4);
  margin:0;
  padding-left:.14em; /* visually re-center letter-spacing */
}

/* ---------- Hero scroll : rotating circular text wrapping "ANYONE CAN... / FEW CAN..." ---------- */
.hero-scroll-circle{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:120px;height:120px;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.hero-scroll-circle-svg{
  position:absolute;inset:0;width:100%;height:100%;
  animation:heroCircleSpin 16s linear infinite;
}
.hero-scroll-circle-text{
  font-family:'Noto Sans KR', sans-serif;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.05em;
  fill:rgba(255,255,255,.85);
  text-transform:uppercase;
}
@keyframes heroCircleSpin{
  from{ transform:rotate(0deg); }
  to{   transform:rotate(360deg); }
}
.hero-scroll-circle-arrow{
  position:relative;z-index:2;
  color:#fff;font-size:15px;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(2px);
  animation:heroArrowBounce 1.8s ease-in-out infinite;
}
@keyframes heroArrowBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}

@media (prefers-reduced-motion: reduce){
  .hero-scroll-circle-svg{ animation:none; }
  .hero-scroll-circle-arrow{ animation:none; }
}

@media(max-width:560px){
  .hero-scroll-circle{ width:92px;height:92px;bottom:24px; }
  .hero-scroll-circle-arrow{ width:32px;height:32px;font-size:13px; }
  .hero-scroll-circle-text{ font-size:9.5px; }
}

/* ===================== PROBLEM SECTION ===================== */
.problem{background:var(--charcoal);color:var(--white);position:relative;overflow:hidden;}
.problem .section-sub{color:rgba(255,255,255,.65);}
.problem .container{position:relative;z-index:2;}
.accent-orange{color:var(--orange);}

/* ---------- Problem : single diagonal twisted line, white neon-glow, slow pulsing ---------- */
.problem-wave{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.problem-wave-svg{
  position:absolute;top:0;left:50%;width:140%;height:100%;
  transform:translate(-50%,0);
}
/* layered strokes stacked on the same path = soft neon glow (wide blurred halo -> thin crisp core) */
.wave-line-glow-outer{
  fill:none;stroke:#ffffff;stroke-width:14;
  filter:blur(10px);
  stroke-opacity:.28;
}
.wave-line-glow-mid{
  fill:none;stroke:#ffffff;stroke-width:6;
  filter:blur(4px);
  stroke-opacity:.5;
}
.wave-line-core{
  fill:none;stroke:#ffffff;stroke-width:1.1;
  filter:blur(.3px);
  stroke-opacity:.95;
}
.wave-line{
  animation:waveDrift 16s ease-in-out infinite;
}
@keyframes waveDrift{
  0%{   transform:translate(0,0) scale(1); opacity:.75; }
  50%{  transform:translate(-1.5%,18px) scale(1.03); opacity:1; }
  100%{ transform:translate(0,0) scale(1); opacity:.75; }
}
@media (prefers-reduced-motion: reduce){
  .wave-line{ animation:none; }
}
.problem-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;margin-top:56px;
}
.problem-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:32px 24px;
  transition:var(--transition);
}
.problem-card:hover{border-color:var(--orange);transform:translateY(-4px);}
.problem-card .num{color:var(--orange);font-weight:500;font-size:22px;margin-bottom:16px;display:block;}
.problem-card p{font-size:15px;color:rgba(255,255,255,.85);}

/* ---------- Problem : Before/After comparison list (no boxes/borders, hover-zoom images) ---------- */
.problem-compare-list{
  display:flex;flex-direction:column;gap:48px;margin-top:56px;
}
.problem-compare-item{ padding:0; }
.problem-compare-head{
  display:flex;align-items:baseline;gap:16px;margin-bottom:20px;
}
.problem-compare-head .num{color:var(--orange);font-weight:500;font-size:22px;flex-shrink:0;}
.problem-compare-head p{font-size:clamp(16px,2vw,19px);font-weight:500;color:var(--white);}
.problem-compare-images{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;
}
.compare-img{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#111;
  cursor:pointer;
}
.compare-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.compare-img:hover img{ transform:scale(1.12); }
.compare-img.bad{filter:saturate(.85) brightness(.92);}
.compare-label{
  position:absolute;left:10px;bottom:10px;
  padding:6px 12px;border-radius:20px;
  font-size:12px;font-weight:500;letter-spacing:.02em;
  backdrop-filter:blur(4px);
  z-index:2;
}
.bad-label{background:rgba(0,0,0,.55);color:#ff9d7a;border:1px solid rgba(255,157,122,.5);}
.good-label{background:rgba(243,107,33,.92);color:#fff;}

/* ---------- Reusable white-text brand overlay for photo thumbnails (Problem before/after +
   Portfolio marquee). A soft radial/linear dark scrim keeps the white text legible regardless
   of the underlying photo's brightness, without hiding the photo itself. ---------- */
.img-brand-overlay{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 78%);
}
.img-brand-overlay-eyebrow{
  font-family:'Noto Sans KR', sans-serif;
  font-weight:300;
  font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.12em;
  color:#fff;
  margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.img-brand-overlay-logo{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(18px,2.6vw,30px);
  letter-spacing:.12em;
  color:#fff;
  line-height:1;
  margin:0;
  padding-left:.12em;
  text-shadow:0 3px 14px rgba(0,0,0,.6);
}
/* larger variant for bigger marquee thumbnails -- sized down 25% (x0.75) from the original
   lg size per feedback that it looked too large inside the portfolio marquee image boxes. */
.img-brand-overlay.lg .img-brand-overlay-eyebrow{ font-size:clamp(8px,1vw,11px); margin-bottom:6px; }
.img-brand-overlay.lg .img-brand-overlay-logo{ font-size:clamp(16px,2.4vw,28px); }

@media(max-width:700px){
  .problem-compare-images{grid-template-columns:1fr;}
}
.problem-closing{
  margin-top:56px;text-align:center;font-size:clamp(18px,2.4vw,26px);
  font-weight:400;padding:36px;border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.problem-closing span{color:var(--orange);}

/* ===================== SOLUTION (full-bleed background slideshow) ===================== */
.solution-hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  overflow:hidden;color:var(--white);padding:100px 0;
}
@media(max-width:768px){ .solution-hero{min-height:auto;padding:72px 0;} }

/* ---------- background ken-burns slideshow (3 slides, slow infinite zoom in/out, hard-cut transitions) ---------- */
.solution-bg-slideshow{
  position:absolute;inset:0;overflow:hidden;background:#dedad3;
}
.solution-slide{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;will-change:opacity, transform;transform-origin:50% 50%;
}
/* 3 slides x 9s each = 27s loop, hard cut (instant on/off) */
.solution-slide.skenburns-1{ animation:sCut1 27s linear infinite, sMove1 9s ease-in-out infinite; }
.solution-slide.skenburns-2{ animation:sCut2 27s linear infinite, sMove2 9s ease-in-out infinite; }
.solution-slide.skenburns-3{ animation:sCut3 27s linear infinite, sMove3 9s ease-in-out infinite; }
@keyframes sCut1{ 0%{opacity:1;} 33.28%{opacity:1;} 33.33%{opacity:0;} 100%{opacity:0;} }
@keyframes sCut2{ 0%{opacity:0;} 33.28%{opacity:0;} 33.33%{opacity:1;} 66.61%{opacity:1;} 66.66%{opacity:0;} 100%{opacity:0;} }
@keyframes sCut3{ 0%{opacity:0;} 66.61%{opacity:0;} 66.66%{opacity:1;} 100%{opacity:1;} }
@keyframes sMove1{ 0%{transform:scale(1.02) translate(-1.5%,0);} 100%{transform:scale(1.12) translate(1.5%,0);} }
@keyframes sMove2{ 0%{transform:scale(1.12) translate(0,1.5%);} 100%{transform:scale(1.02) translate(0,-1.5%);} }
@keyframes sMove3{ 0%{transform:scale(1.03) translate(1.5%,0);} 100%{transform:scale(1.13) translate(-1.5%,0);} }
@media (prefers-reduced-motion: reduce){
  .solution-slide.skenburns-1{ animation:sCut1 27s linear infinite; }
  .solution-slide.skenburns-2{ animation:sCut2 27s linear infinite; }
  .solution-slide.skenburns-3{ animation:sCut3 27s linear infinite; }
}
/* overlay: lighter at top (headline), emphasized/darker gradient near bottom to make the card grid pop against the photo */
.solution-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,16,18,.42) 0%,rgba(15,16,18,.38) 30%,rgba(10,11,13,.6) 62%,rgba(8,9,10,.82) 100%);
}
.solution-content{
  position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;min-height:calc(92vh - 200px);gap:64px;
}
@media(max-width:768px){ .solution-content{min-height:auto;gap:40px;} }
.solution-title{
  color:var(--white);text-shadow:0 2px 20px rgba(0,0,0,.35);max-width:720px;
}
.solution-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;margin-top:0;
}
@media(max-width:900px){
  .solution-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .solution-grid{grid-template-columns:1fr;}
}
.solution-card{
  padding:32px 26px;border-radius:12px;
  transition:var(--transition);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  box-shadow:0 20px 48px rgba(0,0,0,.25);
}
.solution-card:hover{box-shadow:0 24px 56px rgba(0,0,0,.32);transform:translateY(-6px);}
.solution-icon{
  width:56px;height:56px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;
}
.solution-icon-black{ background:#000000; }
.solution-icon-gray{ background:#3d3d3d; }
.solution-icon-midgray{ background:#707070; }
.solution-icon-lightgray{ background:#a8a8a8; }
.solution-card h3{font-size:19px;margin-bottom:12px;color:var(--charcoal);}
.solution-card p{font-size:14.5px;color:var(--gray-500);}

/* ===================== FIELDS (5 cards, full section, bottom-aligned, diagonal black neon wave) ===================== */
/* Section total height is fixed explicitly (not via large symmetric padding) so the inner flex
   layout can actually stretch to fill it: headline pinned near the top edge, image grid pinned
   near the bottom edge, and the empty middle zone (with the centered fading phrase) expands to
   fill essentially the entire remaining height -- landing the phrase at the true vertical center
   of the whole section instead of the center of a small content block. */
.fields-hero{
  position:relative;overflow:hidden;height:1917px;
  display:flex;flex-direction:column;
  padding:100px 0;
}
@media(max-width:768px){ .fields-hero{height:6977px;padding:72px 0;} }
.fields-hero .container.fields-content{ flex:1 1 auto; }

/* ---------- diagonal black neon-glow wave (same technique as Problem section, dark-on-light variant) ---------- */
.fields-wave{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.fields-wave-svg{
  position:absolute;top:0;left:50%;width:140%;height:100%;
  transform:translate(-50%,0);
}
.fields-wave-glow-outer{
  fill:none;stroke:#000000;stroke-width:14;
  filter:blur(10px);
  stroke-opacity:.16;
}
.fields-wave-glow-mid{
  fill:none;stroke:#000000;stroke-width:6;
  filter:blur(4px);
  stroke-opacity:.3;
}
.fields-wave-core{
  fill:none;stroke:#000000;stroke-width:1.1;
  filter:blur(.3px);
  stroke-opacity:.6;
}
.fields-wave-line{
  animation:fieldsWaveDrift 16s ease-in-out infinite;
}
@keyframes fieldsWaveDrift{
  0%{   transform:translate(0,0) scale(1); opacity:.75; }
  50%{  transform:translate(-1.5%,18px) scale(1.03); opacity:1; }
  100%{ transform:translate(0,0) scale(1); opacity:.75; }
}
@media (prefers-reduced-motion: reduce){
  .fields-wave-line{ animation:none; }
}
.fields-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
}
.fields-title-top{ flex:0 0 auto; }

/* ---------- centered fading hero-style phrase, pinned to the exact vertical midpoint of the
   WHOLE section (not the midpoint of the leftover space between headline/grid) via absolute
   positioning + top:50% -- this keeps it dead-center regardless of how tall the headline or
   the image grid happen to be at any given breakpoint. ---------- */
.fields-middle-phrase{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;width:100%;
  text-align:center;
  animation:fieldsPhraseFade 7s ease-in-out infinite;
  pointer-events:none;
}
.fields-middle-eyebrow{
  font-family:'Noto Sans KR', sans-serif;
  font-size:clamp(14px,1.6vw,18px);
  font-weight:300;
  letter-spacing:.16em;
  color:var(--gray-500);
  margin-bottom:12px;
}
.fields-middle-logo{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(32px,6vw,86px);
  letter-spacing:.14em;
  color:var(--charcoal);
  line-height:1;
  margin:0;
  padding-left:.14em;
}
@keyframes fieldsPhraseFade{
  0%{   opacity:0; }
  15%{  opacity:1; }
  50%{  opacity:1; }
  65%{  opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .fields-middle-phrase{ animation:none; opacity:1; }
}

.fields-grid{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;
  margin-top:0;align-items:stretch;
}
.fields-grid .field-card{ flex:1 1 0; min-width:180px; }
@media(max-width:1000px){
  .fields-grid{ flex-wrap:wrap; }
  .fields-grid .field-card{ flex:1 1 calc(50% - 28px); }
}
@media(max-width:560px){
  .fields-grid .field-card{ flex:1 1 100%; }
}
.field-card{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;
  cursor:pointer;display:flex;align-items:flex-end;color:var(--white);
}
.field-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.field-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.85) 100%);}
.field-card:hover img{transform:scale(1.08);}
.field-card-content{position:relative;z-index:2;padding:22px 18px;}
.field-card-content .tag{color:var(--orange);font-size:12px;font-weight:500;letter-spacing:.08em;display:block;margin-bottom:8px;}
.field-card-content h3{font-size:18px;margin-bottom:8px;}
.field-card-content p{font-size:12.5px;color:rgba(255,255,255,.85);}

/* ===================== DETAIL SECTIONS (legacy, no longer used in markup — medical/office/public detail
   layout was removed; kept only in case detail-style sections are reintroduced later) ===================== */
.detail-section{padding:100px 0;}
.detail-section:nth-of-type(even){background:var(--light-gray);}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr;gap:36px;}}
.detail-grid.reverse .detail-text{order:2;}
.detail-grid.reverse .detail-media{order:1;}
@media(max-width:900px){.detail-grid.reverse .detail-text, .detail-grid.reverse .detail-media{order:initial;}}
.detail-media{border-radius:10px;overflow:hidden;position:relative;}
.detail-media img{width:100%;height:420px;object-fit:cover;}
.detail-text .desc{font-size:15.5px;color:var(--gray-500);margin:24px 0 32px;white-space:pre-line;}
.detail-list{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.detail-list li{display:flex;gap:12px;font-size:15px;align-items:flex-start;}
.detail-list li::before{content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-top:8px;}
.case-tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid #e5e3e0;
  padding:10px 18px;border-radius:30px;font-size:13.5px;font-weight:500;margin-bottom:28px;
}
.case-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);}
.note{font-size:12.5px;color:#9a9a9a;margin-top:18px;}

/* media mosaic for office/public */
.media-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.media-mosaic img{height:200px;object-fit:cover;border-radius:8px;}
.media-mosaic .full{grid-column:1/3;height:260px;}
.placeholder-card{
  background:var(--white);border:1.5px dashed var(--gray-300);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:50px 20px;text-align:center;color:var(--gray-500);height:420px;
}
.placeholder-card .icon{font-size:36px;margin-bottom:16px;color:var(--orange);}

/* ===================== PUBLIC & EDUCATION (empty shell, hero-identical ken-burns background, 3 wedding-hall slides) ===================== */
.public-hero{
  position:relative;min-height:70vh;overflow:hidden;
}
.public-bg-slideshow{
  position:absolute;inset:0;overflow:hidden;background:#f5f3ee;
}
.public-slide{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  will-change:opacity, transform;
  transform-origin:50% 50%;
}
/* Identical technique to hero: 5 slides x 8s each = 40s loop, hard-cut opacity + slow calm pan/zoom */
.public-slide.pkenburns-1{ animation:pCut1 40s linear infinite, pMove1 8s ease-in-out infinite; }
.public-slide.pkenburns-2{ animation:pCut2 40s linear infinite, pMove2 8s ease-in-out infinite; }
.public-slide.pkenburns-3{ animation:pCut3 40s linear infinite, pMove3 8s ease-in-out infinite; }
.public-slide.pkenburns-4{ animation:pCut4 40s linear infinite, pMove4 8s ease-in-out infinite; }
.public-slide.pkenburns-5{ animation:pCut5 40s linear infinite, pMove5 8s ease-in-out infinite; }
/* hard-cut visibility windows: slide i visible during global seconds [(i-1)*8, i*8) of the 40s loop */
@keyframes pCut1{ 0%{opacity:1;} 19.96%{opacity:1;} 20.01%{opacity:0;} 100%{opacity:0;} }
@keyframes pCut2{ 0%{opacity:0;} 19.96%{opacity:0;} 20.01%{opacity:1;} 39.96%{opacity:1;} 40.01%{opacity:0;} 100%{opacity:0;} }
@keyframes pCut3{ 0%{opacity:0;} 39.96%{opacity:0;} 40.01%{opacity:1;} 59.96%{opacity:1;} 60.01%{opacity:0;} 100%{opacity:0;} }
@keyframes pCut4{ 0%{opacity:0;} 59.96%{opacity:0;} 60.01%{opacity:1;} 79.96%{opacity:1;} 80.01%{opacity:0;} 100%{opacity:0;} }
@keyframes pCut5{ 0%{opacity:0;} 79.96%{opacity:0;} 80.01%{opacity:1;} 100%{opacity:1;} }
@keyframes pMove1{ 0%{transform:scale(1.04) translate(-2%,0%);} 100%{transform:scale(1.12) translate(2%,0%);} }
@keyframes pMove2{ 0%{transform:scale(1.12) translate(0,2%);} 100%{transform:scale(1.04) translate(0,-2%);} }
@keyframes pMove3{ 0%{transform:scale(1.05) translate(0,-2%);} 100%{transform:scale(1.13) translate(0,2%);} }
@keyframes pMove4{ 0%{transform:scale(1.05) translate(0,2%);} 100%{transform:scale(1.13) translate(0,-2%);} }
@keyframes pMove5{ 0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.14) translate(0,0);} }
.public-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,16,18,.3) 0%,rgba(15,16,18,.4) 55%,rgba(10,11,13,.62) 100%);
}
@media (prefers-reduced-motion: reduce){
  .public-slide.pkenburns-1{ animation:pCut1 40s linear infinite; }
  .public-slide.pkenburns-2{ animation:pCut2 40s linear infinite; }
  .public-slide.pkenburns-3{ animation:pCut3 40s linear infinite; }
  .public-slide.pkenburns-4{ animation:pCut4 40s linear infinite; }
  .public-slide.pkenburns-5{ animation:pCut5 40s linear infinite; }
}

/* ---------- Public centered phrase : gently fades in once, then floats/bobs forever ---------- */
.public-center-phrase{
  position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%);
  width:100%;text-align:center;pointer-events:none;
  opacity:0;
  animation:publicPhraseFadeIn 2.6s ease-out .3s forwards, publicPhraseFloat 6s ease-in-out 2.9s infinite;
}
.public-center-eyebrow{
  font-family:'Noto Sans KR', sans-serif;
  font-size:clamp(14px,1.8vw,19px);
  font-weight:300;
  letter-spacing:.18em;
  color:rgba(255,255,255,.92);
  margin-bottom:16px;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
  text-transform:uppercase;
}
.public-center-logo{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(34px,6.4vw,92px);
  letter-spacing:.14em;
  color:#ffffff;
  line-height:1;
  margin:0;
  padding-left:.14em;
  text-shadow:0 4px 28px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.4);
}
@keyframes publicPhraseFadeIn{
  0%{ opacity:0; transform:translate(-50%,calc(-50% + 16px)); }
  100%{ opacity:1; transform:translate(-50%,-50%); }
}
@keyframes publicPhraseFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%{ transform:translate(-50%,-50%) translateY(-16px); }
}
@media (prefers-reduced-motion: reduce){
  .public-center-phrase{ animation:none; opacity:1; }
}
@media(max-width:560px){
  .public-center-eyebrow{ letter-spacing:.1em; }
}

/* ---------- Portfolio centered phrase : looping typewriter effect ----------
   "공간의 가치를 바꾸는 꿈" is typed out one character at a time, held fully visible for a
   moment, then the whole phrase fades out slowly, and the cycle repeats from an empty string
   (re-typing) -- driven entirely by JS (js/main.js) toggling text content + a blinking cursor,
   with the fade-out handled by a CSS opacity transition on the wrapping element. */
.portfolio-center-phrase{
  position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%);
  width:100%;text-align:center;pointer-events:none;
  opacity:1;
  transition:opacity 1.6s ease-in-out;
}
.portfolio-center-phrase.fade-out{ opacity:0; }
.portfolio-center-text{
  font-family:'Noto Sans KR', sans-serif;
  font-weight:300;
  font-size:clamp(20px,3.2vw,40px);
  letter-spacing:.06em;
  color:var(--charcoal);
  line-height:1.3;
  margin:0;
  display:inline-block;
}
.portfolio-cursor{
  display:inline-block;margin-left:2px;color:var(--orange);font-weight:300;
  animation:portfolioCursorBlink 1s step-end infinite;
}
@keyframes portfolioCursorBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .portfolio-center-phrase{ transition:none; }
  .portfolio-cursor{ animation:none; }
}

/* ===================== PORTFOLIO (infinite leftward-scrolling marquee) ===================== */
/* Section height tripled (3x) vs. the original natural content height, using the same
   "tag pinned near top / empty wave-filled middle / marquee pinned near bottom" flex layout
   technique already used for the FIELDS section, plus the identical diagonal neon wave
   background (dark-on-light variant) for visual consistency between the two sections. */
.portfolio-hero{
  position:relative;overflow:hidden;height:1536px;
  display:flex;flex-direction:column;
  padding:100px 0;background:var(--light-gray);
}
@media(max-width:768px){ .portfolio-hero{ height:1150px;padding:64px 0; } }
@media(max-width:560px){ .portfolio-hero{ height:980px;padding:56px 0; } }
.portfolio-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
}
.portfolio-content .section-tag{ flex:0 0 auto;margin-bottom:0; }
.portfolio-marquee-wrap{
  flex:0 0 auto;margin-top:0;overflow:hidden;position:relative;width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.portfolio-marquee-track{
  display:flex;gap:20px;width:max-content;
  animation:portfolioMarqueeScroll 70s linear infinite;
}
.portfolio-marquee-wrap:hover .portfolio-marquee-track{ animation-play-state:paused; }
@keyframes portfolioMarqueeScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.portfolio-marquee-item{
  position:relative;flex:0 0 auto;width:320px;height:230px;border-radius:10px;overflow:hidden;background:#eee;
}
.portfolio-marquee-item img{width:100%;height:100%;object-fit:cover;display:block;}
@media (prefers-reduced-motion: reduce){
  .portfolio-marquee-track{ animation:none; }
}
@media(max-width:560px){
  .portfolio-marquee-item{ width:240px;height:180px; }
}

/* lightbox for gallery */
.lightbox{position:fixed;inset:0;background:rgba(10,10,12,.92);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:6px;}
.lightbox-close{position:absolute;top:24px;right:32px;color:#fff;font-size:34px;cursor:pointer;}

/* ===================== TRUST ===================== */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:56px;}
.trust-card{
  background:var(--white);border:1px solid #eee;border-radius:10px;padding:32px 26px;text-align:center;
  transition:var(--transition);cursor:pointer;
}
.trust-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.08);transform:translateY(-6px);}
.trust-icon{font-size:30px;color:var(--orange);margin-bottom:18px;}
.trust-card h3{font-size:16.5px;margin-bottom:10px;}
.trust-card p{font-size:13.5px;color:var(--gray-500);}
.trust-card .view-link{display:inline-block;margin-top:14px;font-size:13px;color:var(--orange);font-weight:500;}

/* ===================== PROCESS (AI 생성 배경 이미지 + 다크 오버레이) ===================== */
.process-hero{
  position:relative;padding:100px 0;overflow:hidden;
  background-position:center;background-size:cover;background-repeat:no-repeat;color:var(--white);
}
@media(max-width:768px){ .process-hero{ padding:64px 0; } }
.process-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,16,18,.74) 0%,rgba(15,16,18,.8) 55%,rgba(10,11,13,.86) 100%);
}
.process-content{ position:relative;z-index:2; }
.process-title{ color:var(--white); }
.process-hero .section-sub{ color:rgba(255,255,255,.7); }
.process-track{
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:60px;counter-reset:step;
}
@media(max-width:900px){.process-track{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.process-track{grid-template-columns:1fr 1fr;}}
.process-step{text-align:center;position:relative;}
.process-step .step-num{
  width:56px;height:56px;border-radius:50%;border:2px solid var(--orange);color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-weight:500;font-size:18px;margin:0 auto 18px;
  background:rgba(255,255,255,.95);
}
.process-step h4{font-size:14.5px;margin-bottom:0;white-space:pre-line;color:var(--white);}

/* ===================== FAQ ===================== */
.faq-list{max-width:800px;margin:56px auto 0;}
.faq-item{border-bottom:1px solid #e9e7e4;}
.faq-q{
  width:100%;text-align:left;padding:24px 8px;display:flex;justify-content:space-between;align-items:center;
  font-size:16.5px;font-weight:500;gap:16px;
}
.faq-q .icon{flex-shrink:0;font-size:20px;color:var(--orange);transition:transform .3s;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a-inner{padding:0 8px 24px;color:var(--gray-500);font-size:14.5px;}

/* ===================== CONTACT FORM ===================== */
.contact-section{background:var(--charcoal);color:var(--white);position:relative;overflow:hidden;}
.contact-section .container{position:relative;z-index:2;}
/* ---------- Contact brand phrase : replaces the old headline, with a gentle "heartbeat"
   (두근두근) pulse -- a quick double-beat scale-up then settle, looping slowly. ---------- */
.contact-brand-phrase{ text-align:left; }
.contact-brand-eyebrow{
  font-family:'Noto Sans KR', sans-serif;
  font-weight:300;
  font-size:clamp(14px,1.8vw,18px);
  letter-spacing:.14em;
  color:rgba(255,255,255,.85);
  margin-bottom:10px;
}
.contact-brand-logo{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(34px,5.6vw,72px);
  letter-spacing:.12em;
  color:#ffffff;
  line-height:1;
  margin:0;
  padding-left:.12em;
  display:inline-block;
  animation:contactHeartbeat 2.4s ease-in-out infinite;
  transform-origin:left center;
}
@keyframes contactHeartbeat{
  0%{   transform:scale(1); }
  14%{  transform:scale(1.08); }
  28%{  transform:scale(1); }
  42%{  transform:scale(1.08); }
  56%{  transform:scale(1); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .contact-brand-logo{ animation:none; }
}
@media(max-width:900px){
  .contact-brand-phrase{ text-align:center; }
  .contact-brand-logo{ transform-origin:center center; }
}
.contact-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
.contact-info{display:flex;flex-direction:column;gap:28px;}
.contact-info .section-sub{color:rgba(255,255,255,.65);}
.contact-info-item{display:flex;gap:16px;align-items:flex-start;}
.contact-info-item .ic{color:var(--orange);font-size:20px;margin-top:2px;}
.contact-info-item h4{font-size:15px;margin-bottom:4px;}
.contact-info-item p{font-size:14px;color:rgba(255,255,255,.65);}
.form-card{background:var(--white);border-radius:12px;padding:40px;color:var(--charcoal);}
@media(max-width:560px){.form-card{padding:26px;}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.form-group label{font-size:13.5px;font-weight:500;}
.form-group label .req{color:var(--orange);}
.form-group input,.form-group select,.form-group textarea{
  padding:13px 14px;border:1.5px solid #e4e2df;border-radius:6px;font-size:14.5px;font-family:inherit;
  transition:var(--transition);width:100%;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--orange);}
.form-group textarea{resize:vertical;min-height:100px;}
.error-msg{color:#d33;font-size:12.5px;display:none;}
.form-group.error input,.form-group.error select,.form-group.error textarea{border-color:#d33;}
.form-group.error .error-msg{display:block;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin:20px 0;font-size:13.5px;color:var(--gray-500);}
.checkbox-row input{margin-top:3px;width:16px;height:16px;flex-shrink:0;}
.checkbox-row a{color:var(--orange);text-decoration:underline;}
.form-success{display:none;text-align:center;padding:60px 20px;}
.form-success.show{display:block;}
.form-success .ic{font-size:56px;color:var(--orange);margin-bottom:20px;}
.form-success h3{font-size:22px;margin-bottom:12px;}
.form-success p{color:var(--gray-500);font-size:14.5px;}
.form-note{font-size:12px;color:#aaa;margin-top:10px;}

/* ===================== FOOTER ===================== */
.footer{background:#15161a;color:rgba(255,255,255,.6);padding:56px 0 28px;font-size:13.5px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-logo{font-weight:500;font-size:19px;color:#fff;margin-bottom:14px;}
.footer-logo .dot{color:var(--orange);}
.footer-info p{margin-bottom:6px;}
.footer-links{display:flex;gap:24px;align-items:flex-start;}
.footer-links a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;}

/* ===================== MOBILE STICKY CTA ===================== */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--white);
  box-shadow:0 -4px 20px rgba(0,0,0,.12);padding:12px 16px;display:none;gap:10px;
}
.sticky-cta a{flex:1;text-align:center;padding:14px;border-radius:6px;font-weight:500;font-size:14.5px;}
.sticky-cta .call{background:var(--light-gray);color:var(--charcoal);}
.sticky-cta .consult{background:var(--orange);color:#fff;}
@media(max-width:768px){.sticky-cta{display:flex;} body{padding-bottom:70px;}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* cert modal */
.cert-modal{position:fixed;inset:0;background:rgba(10,10,12,.92);z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;}
.cert-modal.open{display:flex;}
.cert-modal-inner{background:#fff;max-width:700px;width:100%;border-radius:10px;overflow:hidden;max-height:90vh;overflow-y:auto;}
.cert-modal img{width:100%;}
.cert-modal-close{position:absolute;top:20px;right:28px;color:#fff;font-size:32px;cursor:pointer;}
.cert-modal-body{padding:24px;}
.cert-modal-body h3{margin-bottom:12px;}
.cert-modal-body p{color:var(--gray-500);font-size:14px;margin-bottom:6px;}
.cert-modal-body a.btn{margin-top:16px;}

/* toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--charcoal);color:#fff;padding:14px 24px;border-radius:30px;font-size:14px;z-index:3000;opacity:0;pointer-events:none;transition:.3s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.text-orange{color:var(--orange);}