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

    :root {
      --w:    #FAFAF8;
      --c1:   #F3EDE5;
      --c2:   #E6DED4;
      --s1:   #AFA39A;
      --s2:   #7A6E65;
      --d1:   #2A2018;
      --d2:   #181210;
      --acc:  #B89070;
      --acc2: #8C6E50;
      --head:  'Pretendard', sans-serif;
      --cor:   'Cormorant Garamond', Georgia, serif;
      --sans:  'Pretendard', sans-serif;
      --kr:    'Pretendard', sans-serif;
      --ease:  cubic-bezier(.25,.46,.45,.94);
      --ease2: cubic-bezier(.16,1,.3,1);
    }

    html { scroll-behavior: smooth; }
    body { background: var(--w); color: var(--d1); font-family: var(--sans); font-weight: 300; line-height: 1.75; overflow-x: hidden; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; font: inherit; }
    ul { list-style: none; }

    /* ─── LOADER ─── */
    #loader {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--d2);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
      transition: opacity .9s var(--ease), visibility .9s;
    }
    #loader.gone { opacity: 0; visibility: hidden; }
    .l-logo {
      font-family: var(--head);
      font-size: clamp(1rem, 3vw, 1.6rem);
      font-weight: 700; letter-spacing: .38em; text-transform: uppercase;
      color: var(--c1);
      animation: lUp 1s .2s both;
    }
    .l-sub {
      font-size: .62rem; letter-spacing: .36em; text-transform: uppercase;
      color: rgba(184,144,112,.5); font-weight: 300;
      animation: lUp 1.2s .45s both;
    }
    .l-bar { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--acc); animation: lBar 2.4s var(--ease2) forwards; }

    @keyframes lUp  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
    @keyframes lBar { from { width: 0 } to { width: 100% } }
    @keyframes fUp  { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
    @keyframes fIn  { from { opacity: 0 } to { opacity: 1 } }
    @keyframes scrollDot { 0% { top: -100% } 100% { top: 200% } }
    @keyframes marquee   { from { transform: translateX(0) } to { transform: translateX(-50%) } }

    /* ─── CURSOR ─── */
    .cur, .cur-r {
      position: fixed; z-index: 9998; pointer-events: none;
      border-radius: 50%; transform: translate(-50%,-50%);
      transition: width .35s var(--ease2), height .35s var(--ease2), opacity .3s;
    }
    .cur   { width: 8px; height: 8px; background: var(--acc); }
    .cur-r { width: 32px; height: 32px; border: 1px solid rgba(184,144,112,.4); z-index: 9997; }
    .cur.xl   { width: 16px; height: 16px; opacity: .5; }
    .cur-r.xl { width: 52px; height: 52px; }

    /* ─── HEADER ─── */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      display: flex; align-items: center; justify-content: space-between;
      padding: 30px 5.5%;
      transition: padding .45s var(--ease), background .45s, box-shadow .45s;
    }
    header.sc {
      padding: 16px 5.5%;
      background: rgba(250,250,248,.93);
      backdrop-filter: blur(20px);
      box-shadow: 0 1px 0 rgba(0,0,0,.06);
    }

    .logo {
      font-family: var(--head);
      font-size: 1rem; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--w); transition: color .4s;
    }
    header.sc .logo { color: var(--d2); }

    nav { display: flex; align-items: center; }
    .ni > a, .ni > button {
      font-size: .67rem; font-weight: 400;
      letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.75);
      padding: 8px 15px;
      transition: color .3s;
      background: none; border: none; cursor: pointer; white-space: nowrap;
    }
    .ni > a:hover, .ni > button:hover { color: var(--w); }
    header.sc .ni > a, header.sc .ni > button { color: var(--s1); }
    header.sc .ni > a:hover, header.sc .ni > button:hover { color: var(--d1); }

    .n-cta {
      margin-left: 8px !important;
      padding: 10px 24px !important;
      border: 1px solid rgba(255,255,255,.38) !important;
      transition: background .3s, border-color .3s, color .3s !important;
    }
    .n-cta:hover { background: var(--acc) !important; border-color: var(--acc) !important; color: var(--w) !important; }
    header.sc .n-cta { border-color: var(--acc) !important; color: var(--d1) !important; }
    header.sc .n-cta:hover { background: var(--acc) !important; color: var(--w) !important; }

    /* Dropdown */
    .ni { position: relative; }
    .narr { font-size: .5rem; transition: transform .3s; }
    .ni:hover .narr { transform: rotate(180deg); }
    .ndrop {
      position: absolute; top: calc(100% + 8px); left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 150px; background: var(--w);
      border: 1px solid var(--c2); box-shadow: 0 10px 32px rgba(26,18,12,.1);
      opacity: 0; visibility: hidden;
      transition: opacity .28s var(--ease2), visibility .28s, transform .28s var(--ease2);
    }
    .ni:hover .ndrop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .ndrop a { display: block; font-size: .68rem; letter-spacing: .1em; color: var(--s1); padding: 11px 20px; border-bottom: 1px solid var(--c2); transition: color .2s, background .2s; }
    .ndrop a:last-child { border-bottom: none; }
    .ndrop a:hover { color: var(--d1); background: var(--c1); }

    /* Hamburger */
    .ham { display: none; flex-direction: column; gap: 6px; width: 28px; padding: 4px 0; }
    .ham span { display: block; height: 1px; background: var(--w); transition: transform .35s, opacity .3s, background .4s; }
    header.sc .ham span { background: var(--d1); }
    .ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ham.open span:nth-child(2) { opacity: 0; }
    .ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav */
    #mnav {
      position: fixed; inset: 0; z-index: 499;
      background: var(--d2);
      display: none; flex-direction: column; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity .45s, visibility .45s;
    }
    #mnav.open { display: flex; opacity: 1; visibility: visible; }
    .mnl {
      font-family: var(--head);
      font-size: clamp(1.8rem, 5.5vw, 2.6rem);
      font-weight: 600; letter-spacing: .06em;
      color: var(--c1); padding: 13px 0;
      border-bottom: 1px solid rgba(184,144,112,.1);
      width: 300px; text-align: center;
      transition: color .3s;
    }
    .mnl:hover { color: var(--acc); }
    .msub { display: flex; gap: 28px; margin-top: 32px; }
    .msub a { font-size: .72rem; letter-spacing: .24em; color: rgba(243,237,229,.3); transition: color .3s; }
    .msub a:hover { color: var(--acc); }

    /* ─── HERO ─── */
    #hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; }
    .hslides { position: absolute; inset: 0; }
    .hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
    .hs.on { opacity: 1; }
    .hs img { object-fit: cover; transition: transform 8s ease; }
    .hs.on img { transform: scale(1.05); }
    .hs:nth-child(1) img { object-position: center 45%; }
    .hs:nth-child(2) img { object-position: center 38%; }
    .hs:nth-child(3) img { object-position: center 18%; }
    .hs:nth-child(4) img { object-position: 48% 22%; }
    .hov { position: absolute; inset: 0; background: linear-gradient(140deg, rgba(24,18,12,.62) 0%, rgba(24,18,12,.16) 48%, rgba(24,18,12,.55) 100%); }

    .hcont {
      position: absolute; bottom: 11%; left: 6%; right: 6%;
      display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
    }
    .hleft { max-width: 760px; }
    .hey {
      font-size: .64rem; font-weight: 400; letter-spacing: .45em; text-transform: uppercase;
      color: var(--acc); margin-bottom: 1.8rem;
      opacity: 0; transform: translateY(14px);
      animation: fUp .9s .6s var(--ease2) forwards;
    }
    .ht {
      font-family: var(--head);
      font-size: clamp(3rem, 7.5vw, 6rem);
      font-weight: 700; line-height: 1.1; color: var(--w);
      letter-spacing: -.02em;
      margin-bottom: 2rem;
      opacity: 0; transform: translateY(24px);
      animation: fUp 1s .85s var(--ease2) forwards;
    }
    .ht em { font-style: normal; color: var(--acc); }
    .hsub {
      font-size: .92rem; font-weight: 300; line-height: 2.1; color: rgba(250,250,248,.7);
      margin-bottom: 2.8rem;
      opacity: 0; transform: translateY(14px);
      animation: fUp .9s 1.05s var(--ease2) forwards;
    }
    .hbtns {
      display: flex; gap: 1.2rem; flex-wrap: wrap;
      opacity: 0; transform: translateY(12px);
      animation: fUp .9s 1.2s var(--ease2) forwards;
    }
    .bp {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 36px; background: var(--acc); color: var(--w);
      font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
      transition: background .3s, transform .3s;
    }
    .bp:hover { background: var(--acc2); transform: translateY(-2px); }
    .bo {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 36px; border: 1px solid rgba(255,255,255,.4); color: var(--w);
      font-size: .7rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
      transition: border-color .3s, background .3s, transform .3s;
    }
    .bo:hover { border-color: var(--w); background: rgba(255,255,255,.08); transform: translateY(-2px); }

    .hright {
      display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
      opacity: 0; animation: fIn 1.4s 1.4s both;
    }
    .hdots { display: flex; flex-direction: column; gap: 10px; }
    .hd { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; transition: background .3s, transform .3s; }
    .hd.on { background: var(--acc); transform: scale(1.8); }
    .hscroll {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: rgba(255,255,255,.4); font-size: .58rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
    }
    .sline { width: 1px; height: 52px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
    .sline::after { content: ''; position: absolute; top: -100%; width: 100%; height: 100%; background: var(--acc); animation: scrollDot 2.4s 1.8s ease-in-out infinite; }

    /* ─── COMMONS ─── */
    section { position: relative; }
    .si { padding: 115px 6%; max-width: 1480px; margin: 0 auto; }
    .ey { display: inline-block; font-size: .62rem; font-weight: 500; letter-spacing: .44em; text-transform: uppercase; color: var(--acc); margin-bottom: 1.2rem; }
    .st {
      font-family: var(--head);
      font-size: clamp(2rem, 4.5vw, 3.6rem);
      font-weight: 700; line-height: 1.2; color: var(--d2);
      letter-spacing: -.02em; margin-bottom: 1.8rem;
    }
    .sb { font-size: .9rem; font-weight: 300; color: var(--s1); line-height: 2.1; max-width: 560px; }
    .div { width: 44px; height: 1px; background: var(--acc); margin: 1.8rem 0; }

    .rv { opacity: 0; transform: translateY(28px); transition: opacity .95s var(--ease2), transform .95s var(--ease2); }
    .rv.in { opacity: 1; transform: none; }
    .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

    /* ─── TICKER ─── */
    #ticker { background: var(--d2); padding: 18px 0; overflow: hidden; }
    .ttrack { display: flex; white-space: nowrap; animation: marquee 38s linear infinite; }
    .ti { display: flex; align-items: center; gap: 2.6rem; padding: 0 3.2rem; }
    .tt { font-family: var(--head); font-size: .9rem; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,237,229,.28); }
    .td { width: 4px; height: 4px; border-radius: 50%; background: var(--acc); flex-shrink: 0; }

    /* ─── STATEMENT ─── */
    #stmt { background: var(--c1); }
    .stmt-in { text-align: center; max-width: 900px; margin: 0 auto; }
    .stmt-t { font-family: var(--head); font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.45; color: var(--d2); letter-spacing: -.02em; }
    .stmt-t em { font-style: normal; color: var(--acc); }
    .stmt-s { font-size: .88rem; font-weight: 300; color: var(--s1); margin-top: 2.2rem; line-height: 2.1; }

    /* ─── PORTFOLIO ─── */
    #pf { background: var(--w); }
    .pfhdr { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 58px; gap: 2rem; flex-wrap: wrap; }
    .pfilt { display: flex; gap: .6rem; flex-wrap: wrap; }
    .fb { font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--c2); color: var(--s1); background: transparent; transition: all .3s; cursor: pointer; }
    .fb.on, .fb:hover { background: var(--d2); border-color: var(--d2); color: var(--w); }

    .pgrid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 300px; gap: 14px; }
    .wc { position: relative; overflow: hidden; cursor: pointer; background: var(--c2); }
    .wc:nth-child(1) { grid-column: span 7; grid-row: span 2; }
    .wc:nth-child(2) { grid-column: span 5; }
    .wc:nth-child(3) { grid-column: span 5; }
    .wc:nth-child(4) { grid-column: span 12; grid-row: span 1; max-height: 340px; }

    .wc img { transition: transform .85s var(--ease2); }
    .wc:hover img { transform: scale(1.07); }
    .wov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,18,12,.9) 0%, transparent 55%); opacity: 0; transition: opacity .4s; }
    .wc:hover .wov { opacity: 1; }
    .wi { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; transform: translateY(10px); opacity: 0; transition: opacity .4s, transform .4s var(--ease2); }
    .wc:hover .wi { opacity: 1; transform: none; }
    .wcat { font-size: .6rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--acc); margin-bottom: .5rem; }
    .wtit { font-family: var(--head); font-size: 1.3rem; font-weight: 600; color: var(--w); letter-spacing: -.01em; }
    .wmeta { font-size: .72rem; font-weight: 300; color: rgba(250,250,248,.5); margin-top: .35rem; }
    .warr { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--w); opacity: 0; transform: scale(.8); transition: opacity .35s, transform .35s var(--ease2); }
    .wc:hover .warr { opacity: 1; transform: scale(1); }

    .pfmore { text-align: center; margin-top: 58px; }
    .bghost { display: inline-flex; align-items: center; gap: 12px; font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--d1); border-bottom: 1px solid var(--acc); padding-bottom: 4px; transition: color .3s, gap .3s; }
    .bghost:hover { color: var(--acc); gap: 20px; }

    /* ─── ABOUT ─── */
    #about { background: var(--c1); }
    .agrid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
    .aimgs { position: relative; height: 640px; }
    .ai1 { position: absolute; top: 0; left: 0; width: 74%; height: 88%; overflow: hidden; }
    .ai2 { position: absolute; bottom: 0; right: 0; width: 52%; height: 48%; overflow: hidden; border: 8px solid var(--c1); }
    .ai1 img, .ai2 img { transition: transform .9s var(--ease2); }
    .ai1:hover img, .ai2:hover img { transform: scale(1.04); }
    .atag { position: absolute; top: 50%; left: 62%; transform: translateY(-50%); background: var(--d2); padding: 20px 26px; z-index: 2; text-align: center; }
    .atag strong { display: block; font-family: var(--head); font-size: 2.6rem; font-weight: 700; color: var(--acc); line-height: 1.1; }
    .atag span { font-size: .7rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--c1); opacity: .55; }

    .alist { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.8rem; }
    .ait { display: flex; gap: 1.8rem; align-items: flex-start; padding-bottom: 1.6rem; border-bottom: 1px solid var(--c2); }
    .ait:last-child { border-bottom: none; }
    .an { font-family: var(--head); font-size: 1rem; font-weight: 700; color: var(--acc); flex-shrink: 0; padding-top: 2px; }
    .ab h4 { font-family: var(--head); font-size: .9rem; font-weight: 600; color: var(--d2); margin-bottom: .4rem; }
    .ab p { font-size: .82rem; font-weight: 300; color: var(--s1); line-height: 1.95; }

    /* ─── FEATURE ─── */
    #feat { height: 78vh; min-height: 520px; position: relative; overflow: hidden; }
    #feat > img { position: absolute; inset: 0; transition: transform 10s ease; }
    #feat:hover > img { transform: scale(1.04); }
    .fov { position: absolute; inset: 0; background: rgba(24,18,12,.42); }
    .fc { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; max-width: 760px; padding: 0 24px; }
    .ftit { font-family: var(--head); font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; line-height: 1.18; color: var(--w); letter-spacing: -.02em; margin-bottom: 2.2rem; }
    .ftit em { font-style: normal; color: var(--acc); }

    /* ─── SERVICES ─── */
    #srv { background: var(--w); }
    .sintro { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: end; margin-bottom: 72px; }
    .sgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .sc { position: relative; overflow: hidden; cursor: pointer; }
    .sc-img { aspect-ratio: 3/4; }
    .sc-img img { transition: transform .8s var(--ease2); }
    .sc:hover .sc-img img { transform: scale(1.06); }
    .sco { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,18,12,.88) 0%, rgba(24,18,12,.1) 50%); }
    .scl { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 28px; }
    .scn { font-family: var(--head); font-size: 1.2rem; font-weight: 600; color: var(--w); margin-bottom: .5rem; letter-spacing: -.01em; }
    .scd { font-size: .78rem; font-weight: 300; color: rgba(250,250,248,.6); line-height: 1.85; }
    .sch { position: absolute; inset: 0; background: var(--acc); opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 36px; transition: opacity .45s; }
    .sc:hover .sch { opacity: .94; }
    .sch-n { font-family: var(--head); font-size: 1.4rem; font-weight: 700; color: var(--w); }
    .sch-l { display: flex; flex-direction: column; gap: .55rem; text-align: center; }
    .sch-l li { font-size: .78rem; font-weight: 400; color: rgba(250,250,248,.85); letter-spacing: .06em; }

    /* ─── PROCESS ─── */
    #proc { background: var(--d2); }
    #proc .st { color: var(--c1); }
    #proc .sb { color: rgba(243,237,229,.48); }
    .pig { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 12px; }
    .pgr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 70px; }
    .ps { padding: 52px 38px; border-top: 1px solid rgba(184,144,112,.18); position: relative; overflow: hidden; }
    .ps::before { content: ''; position: absolute; inset: 0; background: rgba(184,144,112,.06); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease2); }
    .ps:hover::before { transform: scaleX(1); }
    .pn { font-family: var(--head); font-size: 4rem; font-weight: 800; color: rgba(184,144,112,.1); line-height: 1; margin-bottom: 1.8rem; display: block; }
    .pi { font-size: 1.5rem; color: var(--acc); margin-bottom: 1.4rem; }
    .ptit { font-family: var(--head); font-size: .96rem; font-weight: 600; color: var(--c1); margin-bottom: .85rem; }
    .pdesc { font-size: .82rem; font-weight: 300; color: rgba(243,237,229,.42); line-height: 2; }

    /* ─── STATS ─── */
    #stats { background: var(--c2); }
    .sgr { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--c1); }
    .sti { padding: 56px 40px; border-right: 1px solid var(--c1); text-align: center; transition: background .3s; }
    .sti:last-child { border-right: none; }
    .sti:hover { background: rgba(184,144,112,.12); }
    .stn { font-family: var(--head); font-size: clamp(2.6rem, 4.2vw, 4rem); font-weight: 800; color: var(--d2); line-height: 1; }
    .stu { color: var(--acc); }
    .stlb { font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--s1); margin-top: 1rem; }
    .stsub { font-size: .78rem; font-weight: 300; color: var(--s1); margin-top: .4rem; }

    /* ─── CONSULT ─── */
    #consult { background: var(--w); }
    .csgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
    .csinfo { position: sticky; top: 120px; }
    .csinfo p { font-size: .88rem; font-weight: 300; color: var(--s1); line-height: 2.1; margin-bottom: 2.4rem; }
    .csbtn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 34px; background: var(--acc); color: var(--w); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: background .3s, transform .3s; }
    .csbtn:hover { background: var(--acc2); transform: translateY(-2px); }

    .cklist { display: flex; flex-direction: column; gap: 14px; }
    .ck { display: flex; align-items: flex-start; gap: 18px; padding: 24px 28px; background: var(--c1); border-left: 3px solid transparent; transition: border-color .35s, transform .35s var(--ease2), background .3s; }
    .ck:hover { border-left-color: var(--acc); transform: translateX(6px); background: var(--c2); }
    .ck-n { font-family: var(--head); font-size: 1.8rem; font-weight: 800; color: rgba(184,144,112,.28); line-height: 1; flex-shrink: 0; min-width: 38px; }
    .ck-b h4 { font-family: var(--head); font-size: .9rem; font-weight: 600; color: var(--d2); margin-bottom: .4rem; }
    .ck-b p { font-size: .8rem; font-weight: 300; color: var(--s1); line-height: 1.85; }
    .ck-tag { display: inline-block; font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); border: 1px solid rgba(184,144,112,.4); padding: 3px 10px; margin-bottom: .5rem; }

    /* ─── REVIEWS ─── */
    #rev { background: var(--c1); }
    .rwrap { display: grid; grid-template-columns: 380px 1fr; gap: 100px; align-items: start; }
    .rstick { position: sticky; top: 120px; }
    .rqm { font-family: var(--cor); font-size: 8rem; line-height: .8; color: var(--acc); opacity: .2; margin-bottom: .8rem; }
    .rlist { display: flex; flex-direction: column; gap: 38px; }
    .ri { padding: 38px; background: var(--w); transition: transform .35s var(--ease2), box-shadow .35s; }
    .ri:hover { transform: translateX(10px); box-shadow: -4px 0 0 var(--acc); }
    .rstar { color: var(--acc); font-size: .85rem; letter-spacing: .1em; margin-bottom: 1.2rem; }
    .rtxt { font-family: var(--cor); font-size: 1.08rem; font-weight: 300; font-style: italic; line-height: 1.9; color: var(--d1); margin-bottom: 1.6rem; }
    .rauth { display: flex; align-items: center; gap: 14px; }
    .rav { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--c2); display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 1rem; font-weight: 700; color: var(--acc); }
    .rname { font-size: .84rem; font-weight: 600; color: var(--d1); }
    .rproj { font-size: .74rem; font-weight: 300; color: var(--s1); margin-top: 4px; }

    /* ─── CTA ─── */
    #cta { background: var(--d2); padding: 130px 6%; }
    .ctai { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
    .ctat { font-family: var(--head); font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1.22; color: var(--c1); letter-spacing: -.02em; }
    .ctat em { font-style: normal; color: var(--acc); }
    .ctasub { font-size: .9rem; font-weight: 300; color: rgba(243,237,229,.42); margin-top: 1.2rem; max-width: 520px; line-height: 2.1; }
    .ctaact { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
    .bcta { display: block; padding: 17px 50px; background: var(--acc); color: var(--w); font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-align: center; white-space: nowrap; transition: background .3s, transform .3s; }
    .bcta:hover { background: var(--acc2); transform: translateY(-3px); }
    .btel { font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,237,229,.42); border-bottom: 1px solid rgba(184,144,112,.3); padding-bottom: 3px; transition: color .3s, border-color .3s; }
    .btel:hover { color: var(--acc); border-color: var(--acc); }

    /* ─── NEWS ─── */
    #news { background: var(--w); }
    .ntabs { display: flex; border-bottom: 1px solid var(--c2); margin-bottom: 50px; }
    .ntab { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--s1); padding: 12px 24px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .3s, border-color .3s; background: none; }
    .ntab.on { color: var(--d1); border-bottom-color: var(--acc); }
    .nlist { display: none; flex-direction: column; }
    .nlist.on { display: flex; }
    .nitem { display: flex; align-items: flex-start; gap: 36px; padding: 26px 0; border-bottom: 1px solid var(--c2); cursor: pointer; }
    .nitem:last-child { border-bottom: none; }
    .nitem:hover .ntit { color: var(--acc); }
    .ndate { font-size: .85rem; font-weight: 300; color: var(--s1); flex-shrink: 0; min-width: 90px; padding-top: 3px; }
    .nbadge { flex-shrink: 0; font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--c2); color: var(--s1); margin-top: 3px; white-space: nowrap; }
    .nbadge.ev { border-color: rgba(184,144,112,.6); color: var(--acc); }
    .nbadge.rv2 { border-color: rgba(122,110,101,.4); color: var(--s2); }
    .ntit { font-family: var(--head); font-size: .92rem; font-weight: 500; color: var(--d1); transition: color .3s; line-height: 1.6; }
    .nsub { font-size: .8rem; font-weight: 300; color: var(--s1); margin-top: .3rem; }
    .nmore { text-align: right; margin-top: 28px; }

    /* ─── CONTACT ─── */
    #con { background: var(--c1); }
    .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
    .cinfo h3 { font-family: var(--head); font-size: 1.6rem; font-weight: 700; color: var(--d2); margin-bottom: 2.2rem; letter-spacing: -.01em; }
    .cdet { display: flex; flex-direction: column; gap: 1.6rem; }
    .cd { display: flex; gap: 1.6rem; align-items: flex-start; }
    .cdi { width: 46px; height: 46px; flex-shrink: 0; border: 1px solid var(--c2); display: flex; align-items: center; justify-content: center; color: var(--acc); font-size: 1rem; transition: background .3s, border-color .3s; }
    .cd:hover .cdi { background: var(--d2); border-color: var(--d2); color: var(--w); }
    .cdl { font-size: .62rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--s1); }
    .cdv { font-size: .9rem; font-weight: 300; color: var(--d1); margin-top: .3rem; }

    .cform { display: flex; flex-direction: column; gap: 1.5rem; }
    .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .fg { display: flex; flex-direction: column; gap: .5rem; }
    .fg label { font-size: .62rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--s1); }
    .fg input, .fg select, .fg textarea { width: 100%; padding: 14px 0; border: none; border-bottom: 1px solid var(--c2); background: transparent; color: var(--d1); font-family: var(--kr); font-size: .9rem; font-weight: 300; outline: none; transition: border-color .3s; }
    .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--acc); }
    .fg textarea { height: 100px; resize: none; }
    .fck { display: flex; gap: .85rem; align-items: flex-start; }
    .fck input { margin-top: 3px; accent-color: var(--acc); }
    .fck label { font-size: .78rem; font-weight: 300; color: var(--s1); line-height: 1.65; }
    .bsub { align-self: flex-start; padding: 14px 44px; background: var(--d2); color: var(--w); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: background .3s; }
    .bsub:hover { background: var(--acc); }

    /* ─── INSTAGRAM ─── */
    #soc { background: var(--w); }
    .sochdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
    .igrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .ig { aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer; background: var(--c2); }
    .ig img { transition: transform .65s var(--ease2); }
    .ig:hover img { transform: scale(1.1); }
    .igh { position: absolute; inset: 0; background: rgba(24,18,12,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; color: var(--w); font-size: 1.4rem; }
    .ig:hover .igh { opacity: 1; }

    /* ─── FOOTER ─── */
    footer { background: var(--d2); padding: 84px 6% 42px; }
    .ftop { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; padding-bottom: 62px; border-bottom: 1px solid rgba(184,144,112,.1); }
    .flogo { font-family: var(--head); font-size: 1.1rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c1); display: block; margin-bottom: 1.5rem; }
    .ftag { font-size: .82rem; font-weight: 300; color: rgba(243,237,229,.34); line-height: 2.1; max-width: 280px; }
    .fsocs { display: flex; gap: 10px; margin-top: 2.2rem; }
    .fsoc { width: 38px; height: 38px; border: 1px solid rgba(184,144,112,.22); display: flex; align-items: center; justify-content: center; color: rgba(243,237,229,.34); font-size: .78rem; font-weight: 600; transition: all .3s; }
    .fsoc:hover { border-color: var(--acc); color: var(--acc); }
    .fcol h5 { font-size: .62rem; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: var(--acc); margin-bottom: 1.6rem; }
    .fcol ul li a { font-size: .82rem; font-weight: 300; color: rgba(243,237,229,.34); display: block; padding: .4rem 0; transition: color .3s; }
    .fcol ul li a:hover { color: var(--c1); }
    .finfo { font-size: .8rem; font-weight: 300; color: rgba(243,237,229,.3); line-height: 2.2; }
    .fbot { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; flex-wrap: wrap; gap: 1rem; }
    .fcp { font-size: .7rem; font-weight: 300; color: rgba(243,237,229,.2); }
    .flegal { display: flex; gap: 2rem; }
    .flegal a { font-size: .7rem; font-weight: 300; color: rgba(243,237,229,.2); transition: color .3s; }
    .flegal a:hover { color: var(--acc); }

    /* ─── BTT ─── */
    #btt { position: fixed; bottom: 34px; right: 34px; z-index: 200; width: 48px; height: 48px; background: var(--d2); border: 1px solid rgba(184,144,112,.28); display: flex; align-items: center; justify-content: center; color: var(--acc); font-size: .9rem; opacity: 0; visibility: hidden; transition: all .4s; transform: translateY(10px); }
    #btt.show { opacity: 1; visibility: visible; transform: none; }
    #btt:hover { background: var(--acc); color: var(--w); border-color: var(--acc); }

    /* ─── LIGHTBOX ─── */
    #lb { position: fixed; inset: 0; z-index: 1000; background: rgba(15,10,7,.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .4s; }
    #lb.on { opacity: 1; visibility: visible; }
    #lbimg { max-width: 86vw; max-height: 85vh; object-fit: contain; width: auto; height: auto; }
    #lbclose { position: absolute; top: 24px; right: 28px; color: var(--c1); font-size: 1.7rem; cursor: pointer; transition: color .3s; }
    #lbclose:hover { color: var(--acc); }
    #lbcap { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--head); font-size: .9rem; font-weight: 400; color: rgba(243,237,229,.5); white-space: nowrap; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1100px) {
      .pgr { grid-template-columns: repeat(2, 1fr) }
      .sgr { grid-template-columns: repeat(2, 1fr) }
      .sti:nth-child(2) { border-right: none }
      .sti:nth-child(1), .sti:nth-child(2) { border-bottom: 1px solid var(--c1) }
      .ftop { grid-template-columns: 1fr 1fr; gap: 44px }
      .pig { grid-template-columns: 1fr; gap: 22px }
      .sintro { grid-template-columns: 1fr; gap: 26px }
      .csgrid { grid-template-columns: 1fr; gap: 52px }
      .csinfo { position: static }
    }
    @media (max-width: 900px) {
      .si { padding: 80px 5% }
      nav { display: none } .ham { display: flex } #mnav { display: flex }
      .agrid { grid-template-columns: 1fr; gap: 52px } .aimgs { height: 480px }
      .pgrid { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px }
      .wc:nth-child(n) { grid-column: span 1; grid-row: span 1 }
      .wc:nth-child(1) { grid-column: span 2 }
      .wc:nth-child(4) { grid-column: span 2; max-height: none }
      .sgrid3 { grid-template-columns: 1fr 1fr }
      .rwrap { grid-template-columns: 1fr; gap: 52px } .rstick { position: static }
      .cgrid { grid-template-columns: 1fr } .frow { grid-template-columns: 1fr }
      .igrid { grid-template-columns: repeat(3, 1fr) }
      .ctai { grid-template-columns: 1fr; gap: 36px }
      .nitem { gap: 16px }
      .hright { display: none }
    }
    @media (max-width: 580px) {
      .si { padding: 64px 4% }
      .hcont { left: 4%; right: 4%; bottom: 12% }
      .pgrid { grid-template-columns: 1fr; grid-auto-rows: 280px }
      .wc:nth-child(n) { grid-column: span 1 }
      .sgr { grid-template-columns: 1fr 1fr }
      .sgrid3 { grid-template-columns: 1fr }
      .ftop { grid-template-columns: 1fr }
      .pgr { grid-template-columns: 1fr }
      .nitem { flex-wrap: wrap; gap: 8px }
    }

/* ─── SUB-PAGE OVERRIDES ─── */
body.sub-page .si { padding-top: 68px; padding-bottom: 68px; }
body.sub-page .aimgs { height: 480px; }
body.sub-page .ai1 { height: 85%; }
body.sub-page .ai2 { height: 44%; }
body.sub-page .sc-img { aspect-ratio: 5/6; }
body.sub-page .sintro { gap: 60px; margin-bottom: 44px; }
body.sub-page .pgrid { grid-auto-rows: 240px; }
body.sub-page #feat { height: 56vh; min-height: 380px; }
body.sub-page #stats .si { padding-top: 0; padding-bottom: 0; }
body.sub-page .pgr { margin-top: 44px; }
body.sub-page .pig { margin-bottom: 0; }
body.sub-page #cta { padding: 80px 6%; }

/* ─── PORTFOLIO DETAIL ─── */
.pd-hero { position: relative; height: 72vh; min-height: 460px; overflow: hidden; margin-top: 0; }
.pd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 10s ease; }
.pd-hero:hover img { transform: scale(1.03); }
.pd-hov { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(24,18,12,.25) 0%, rgba(24,18,12,.55) 100%); }
.pd-back-btn { position: absolute; top: 88px; left: 6%; display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(250,250,248,.7); border-bottom: 1px solid rgba(184,144,112,.35); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.pd-back-btn:hover { color: var(--acc); border-color: var(--acc); }
.pd-hero-info { position: absolute; bottom: 44px; left: 6%; right: 6%; }
.pd-hero-cat { font-size: .6rem; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: var(--acc); margin-bottom: .8rem; }
.pd-hero-tit { font-family: var(--head); font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; color: var(--w); letter-spacing: -.02em; line-height: 1.2; }

.pd-body { background: var(--w); }
.pd-grid { display: grid; grid-template-columns: 1fr 260px; gap: 80px; align-items: start; }
.pd-desc { font-size: .95rem; font-weight: 300; color: var(--s1); line-height: 2.2; margin-top: 1.6rem; max-width: 620px; }
.pd-meta { border-left: 1px solid var(--c2); padding-left: 40px; }
.pd-meta-item { padding: 1.4rem 0; border-bottom: 1px solid var(--c2); }
.pd-meta-item:first-child { padding-top: 0; }
.pd-meta-label { display: block; font-size: .58rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--acc); margin-bottom: .5rem; }
.pd-meta-value { font-size: .88rem; font-weight: 300; color: var(--d1); }
.pd-imgs { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-imgs .full { grid-column: span 2; }
.pd-imgs img { width: 100%; height: 420px; object-fit: cover; }
.pd-imgs .full img { height: 500px; }
.pd-nav { display: flex; justify-content: space-between; align-items: center; padding: 36px 0; border-top: 1px solid var(--c2); margin-top: 60px; flex-wrap: wrap; gap: 1rem; }
.pd-nav-btn { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--s1); transition: color .3s; display: flex; align-items: center; gap: 8px; }
.pd-nav-btn:hover { color: var(--acc); }
.pd-nav-all { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--d2); border-bottom: 1px solid var(--acc); padding-bottom: 2px; transition: color .3s; }
.pd-nav-all:hover { color: var(--acc); }
@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; gap: 36px; }
  .pd-meta { border-left: none; padding-left: 0; border-top: 1px solid var(--c2); padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; }
  .pd-imgs { grid-template-columns: 1fr; }
  .pd-imgs .full { grid-column: span 1; }
  .pd-imgs img, .pd-imgs .full img { height: 280px; }
}
@media (max-width: 580px) {
  .pd-meta { grid-template-columns: 1fr; }
  .pd-hero-tit { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ─── FOOTER SERVICE AREA ─── */
.farea { padding: 20px 6%; border-top: 1px solid rgba(255,255,255,.06); }
.farea-t { font-size: .58rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-bottom: .6rem; }
.farea-l { font-size: .72rem; font-weight: 300; color: rgba(250,250,248,.3); line-height: 1.9; }

/* ─── PAGE BANNER ─── */
.pgbanner { background: var(--d2); padding: 120px 6% 80px; position: relative; overflow: hidden; }
.pgbanner::after { content: ''; position: absolute; bottom: 0; left: 6%; right: 6%; height: 1px; background: linear-gradient(to right, rgba(184,144,112,.3), transparent); }
.pgb-en { font-size: .62rem; font-weight: 500; letter-spacing: .44em; text-transform: uppercase; color: var(--acc); display: block; margin-bottom: 1.4rem; }
.pgb-tit { font-family: var(--head); font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; color: var(--c1); letter-spacing: -.02em; line-height: 1.15; }
.pgb-sub { font-size: .9rem; font-weight: 300; color: rgba(243,237,229,.48); margin-top: 1.2rem; max-width: 540px; line-height: 2.1; }