:root{
    --bg:#ffffff;
    --bg-alt:#f6f8f2;
    --ink:#101110;
    --ink-soft:#5c5f52;
    --ink-faint:#8a8d80;
    --accent:#275317;
    --accent-deep:#152c0d;
    --accent-tint:#eef2e9;
    --line:#d7e2cc;
    --line-strong:#b9cca6;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#121309;
      --bg-alt:#171a10;
      --ink:#f1f2e9;
      --ink-soft:#b5b9a6;
      --ink-faint:#767a68;
      --accent:#8fce6a;
      --accent-deep:#0c1907;
      --accent-tint:#1c2513;
      --line:#33402a;
      --line-strong:#455a37;
    }
  }
  :root[data-theme="dark"]{
    --bg:#121309;
    --bg-alt:#171a10;
    --ink:#f1f2e9;
    --ink-soft:#b5b9a6;
    --ink-faint:#767a68;
    --accent:#8fce6a;
    --accent-deep:#0c1907;
    --accent-tint:#1c2513;
    --line:#33402a;
    --line-strong:#455a37;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Noto Serif KR",serif;
    font-size:17px;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  a{color:inherit;}
  img{max-width:100%;display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,64px);
  }

  h1,h2,h3{
    font-family:"Noto Serif KR",serif;
    font-weight:700;
    margin:0;
    text-wrap:balance;
  }

  .eyebrow{
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:.16em;
    text-transform:none;
    color:var(--accent);
    margin-left:2px;
  }

  p{margin:0;}
  .lede{color:var(--ink-soft);}

  /* ---------- Nav ---------- */
  header.site-nav{
    position:sticky;
    top:0;
    z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px) saturate(1.1);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px clamp(20px,5vw,64px);
    max-width:1180px;
    margin:0 auto;
  }
  .brand-mark{height:56px;width:auto;}
  .brand-mark.light-only{display:block;}
  .brand-mark.dark-only{display:none;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brand-mark.light-only{display:none;}
    :root:not([data-theme="light"]) .brand-mark.dark-only{display:block;}
  }
  :root[data-theme="dark"] .brand-mark.light-only{display:none;}
  :root[data-theme="dark"] .brand-mark.dark-only{display:block;}

  nav.links{
    display:flex;
    align-items:center;
    gap:clamp(20px,3vw,40px);
    font-family:"Noto Serif KR",serif;
    font-weight:500;
    font-size:14.5px;
  }
  nav.links a{
    text-decoration:none;
    position:relative;
    padding:4px 0;
    color:var(--ink-soft);
    transition:color .2s ease;
  }
  nav.links a::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:0;
    height:1px;
    background:var(--accent);
    transition:right .25s ease;
  }
  nav.links a:hover{color:var(--ink);}
  nav.links a:hover::after{right:0;}
  nav.links a.cta{
    color:#fff;
    background:var(--accent);
    font-weight:600;
    padding:8px 18px;
    border-radius:2px;
  }
  nav.links a.cta::after{display:none;}
  nav.links a.cta:hover{color:#fff;opacity:.9;}

  .nav-divider{
    width:1px;
    height:16px;
    background:var(--line-strong);
  }

  .lang-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    letter-spacing:.03em;
  }
  .lang-sep{color:var(--line-strong);}
  .lang-btn{
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:12.5px;
    background:none;
    border:none;
    padding:2px 0;
    color:var(--ink-faint);
    cursor:pointer;
    transition:color .2s ease;
  }
  .lang-btn:hover{color:var(--ink);}
  .lang-btn.is-active{color:var(--accent);}

  /* shared filled button */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--accent);
    color:#fff;
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    padding:12px 22px;
    border-radius:2px;
    white-space:nowrap;
    transition:transform .2s ease, opacity .2s ease;
  }
  .btn:hover{opacity:.9;transform:translateY(-1px);}

  .nav-toggle{display:none;}

  @media (max-width:760px){
    nav.links{
      position:fixed;
      inset:60px 0 auto 0;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      padding:8px clamp(20px,5vw,64px) 20px;
      transform:translateY(-8px);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    nav.links.open{opacity:1;transform:translateY(0);pointer-events:auto;}
    nav.links a{width:100%;padding:12px 0;border-bottom:1px solid var(--line);}
    nav.links a.cta{width:auto;border-bottom:none;margin-top:14px;padding:10px 20px;}
    .nav-divider{display:none;}
    .lang-toggle{width:100%;padding:12px 0;margin-top:14px;}
    nav.links a::after{display:none;}
    .nav-toggle{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:5px;
      width:32px;height:32px;
      background:none;
      border:none;
      cursor:pointer;
    }
    .nav-toggle span{
      display:block;height:1.5px;width:100%;
      background:var(--ink);
    }
  }

  /* ---------- Sections ---------- */
  section{
    padding:clamp(64px,10vw,120px) 0;
    scroll-margin-top:calc(93px - 0.75 * clamp(64px,10vw,120px));
  }
  section + section{
    border-top:1px solid var(--line);
  }
  /* Compact section padding -- used on index.html's summary sections,
     which felt overly empty at the default section padding. */
  /* index.html only: Hero + the three summary sections share one target
     height so the four "categories" read as a uniform row of blocks. */
  section.section-compact{
    padding:clamp(32px,5vw,60px) 0;
    min-height:420px;
    display:flex;
    align-items:center;
    scroll-margin-top:93px;
    scroll-margin-top:var(--header-h, 93px);
  }
  section.section-compact > .wrap{width:100%;}

  /* Detail pages (about/expertise/approach/contact): half the default
     top padding so content sits closer to the header. */
  section.section-detail{
    padding-top:clamp(32px,5vw,60px);
  }

  /* Hero */
  .hero{
    position:relative;
    padding:0;
    min-height:640px;
    display:flex;
    align-items:center;
    scroll-margin-top:93px;
    scroll-margin-top:var(--header-h, 93px);
    background:var(--bg);
  }
  .hero .wrap{
    width:100%;
    padding-top:clamp(44px,7vw,76px);
    padding-bottom:clamp(44px,7vw,76px);
  }
  /* Frame around the hero copy — right edge is split in two, with a gap at
     the middle, and stretches out to meet the wrap's own right edge (the
     same edge the nav bar's EN toggle sits on). */
  .hero-frame{
    position:relative;
    border-top:1px solid var(--accent);
    border-left:1px solid var(--accent);
    border-bottom:1px solid var(--accent);
    padding:clamp(42px,6vw,72px);
  }
  .hero-frame::before,
  .hero-frame::after{
    content:"";
    position:absolute;
    right:0;
    width:1px;
    background:var(--accent);
  }
  .hero-frame::before{top:0;height:calc(50% - 66px);}
  .hero-frame::after{bottom:0;height:calc(50% - 66px);}
  .hero .kicker{
    font-family:"Noto Serif KR",serif;
    font-size:12.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
    margin-bottom:20px;
  }
  .hero h1{
    font-size:clamp(21px,3.1vw,32px);
    line-height:1.42;
    color:var(--ink);
    margin:0 0 28px;
  }
  .hero .lede{
    max-width:44em;
    font-size:18px;
    line-height:1.85;
    margin-bottom:36px;
  }
  .hero-cta{
    display:flex;
    align-items:center;
    gap:28px;
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:14.5px;
  }
  .hero-cta a:not(.btn){
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--ink);
    border-bottom:1px solid var(--line-strong);
    padding-bottom:3px;
    transition:border-color .2s ease, color .2s ease;
  }
  .hero-cta a:not(.btn):hover{color:var(--accent);border-color:var(--accent);}

  /* About */
  .split{
    display:block;
  }
  .split .head{margin-bottom:28px;}
  .split h2{
    font-size:clamp(24px,3vw,32px);
    line-height:1.4;
    margin-top:18px;
  }
  .about-body{margin-top:0;}
  .about-body p{
    max-width:56em;
    color:var(--ink-soft);
    margin-bottom:22px;
    text-align:justify;
  }
  .about-body p:last-child{margin-bottom:0;}
  .about-body strong{color:var(--ink);font-weight:600;}

  /* Expertise */
  .expertise-intro{
    display:grid;
    grid-template-columns:minmax(180px,280px) 1fr;
    gap:clamp(32px,5vw,72px);
    margin-bottom:56px;
    align-items:start;
  }
  .expertise-intro > div:last-child{margin-top:44px;}
  @media (max-width:760px){
    .expertise-intro{grid-template-columns:1fr;}
    .expertise-intro > div:last-child{margin-top:0;}
  }
  .expertise-intro h2{
    font-size:clamp(24px,3vw,32px);
    line-height:1.4;
    margin-top:18px;
  }
  .expertise-intro .lede{max-width:52em;font-size:16.5px;margin-top:0;text-align:justify;}
  .expertise-intro .lede + .lede{margin-top:10px;}

  .expertise-list{}
  .expertise-row{
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    gap:16px;
    padding:15px 0;
  }
  .expertise-intro--tight{margin-bottom:20px;}
  @media (max-width:760px){.expertise-row{grid-template-columns:1fr;gap:8px;}}
  .expertise-row .num,
  .principle .num{
    font-family:"Noto Serif KR",serif;
    font-size:20px;
    font-weight:600;
    color:var(--accent);
    line-height:1;
  }
  .expertise-row .en{
    font-family:"Noto Serif KR",serif;
    font-weight:700;
    font-size:17.5px;
    line-height:1.4;
    margin-bottom:10px;
  }
  .expertise-row .kr{
    font-family:"Noto Serif KR",serif;
    font-weight:500;
    font-size:13.5px;
    color:var(--ink-faint);
    margin-bottom:12px;
  }
  .expertise-row .desc{
    color:var(--ink-soft);
    font-size:15px;
    line-height:1.75;
    margin:0 0 12px;
  }
  .expertise-row .keys{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.8;
    font-family:"Noto Serif KR",serif;
    margin-top:14px;
  }
  .expertise-row .key-label{
    display:block;
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:8px;
  }
  /* index.html summary grid -- 2x2, no numbers, no desc/keys */
  .expertise-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 40px;
  }
  @media (max-width:760px){.expertise-grid{grid-template-columns:1fr;}}
  .expertise-cell{
    padding-bottom:6px;
  }
  .expertise-cell .en{
    font-family:"Noto Serif KR",serif;
    font-weight:700;
    font-size:16.5px;
    line-height:1.35;
    margin-bottom:4px;
    color:var(--ink-soft);
  }
  .expertise-cell .kr{
    font-family:"Noto Serif KR",serif;
    font-weight:500;
    font-size:13px;
    color:var(--ink-faint);
  }

  /* How we work */
  .hww-top{
    display:grid;
    grid-template-columns:minmax(180px,280px) 1fr;
    gap:clamp(32px,5vw,72px);
    margin-bottom:56px;
    align-items:start;
  }
  .hww-top > div:last-child{margin-top:44px;}
  @media (max-width:760px){
    .hww-top{grid-template-columns:1fr;}
    .hww-top > div:last-child{margin-top:0;}
  }
  .hww-top h2{font-size:clamp(24px,3vw,32px);line-height:1.4;margin-top:18px;}
  .hww-top .lede{max-width:52em;font-size:16.5px;margin-top:0;text-align:justify;}
  .hww-top .lede + .lede{margin-top:10px;}

  .principles{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px 56px;
  }
  @media (max-width:760px){.principles{grid-template-columns:1fr;gap:36px;}}
  .principle .name{
    font-family:"Noto Serif KR",serif;
    font-weight:700;
    font-size:17.5px;
    margin:10px 0 6px;
  }
  .principle .desc{
    color:var(--ink-soft);
    font-size:15px;
    line-height:1.75;
  }

  /* Contact */
  #contact h2{
    color:var(--ink);
    font-size:clamp(24px,3vw,32px);
    line-height:1.4;
    margin:20px 0 22px;
  }
  /* Index-page Contact summary only: "함께 풀어가겠습니다." is one character
     longer than Approach's longest line, so at the shared 32px cap it wraps
     a third time inside the standard 280px column. Scoped by a class used
     only on the index-page headline (contact.html's own h2 keeps 32px), so
     the column width stays identical across all three summary sections and
     their right-column text stays aligned. */
  #contact h2.contact-h2--tight{font-size:clamp(22px,2.6vw,28px);}
  #contact .lede{
    color:var(--ink-soft);
    max-width:none;
    font-size:16.5px;
    margin-bottom:44px;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:32px;
    align-items:end;
    padding-top:36px;
  }
  @media (max-width:640px){.contact-grid{grid-template-columns:1fr;align-items:start;}}
  .contact-grid .btn{margin-top:0;}
  .contact-info{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:15px;
  }
  .contact-info .co{font-family:"Noto Serif KR",serif;font-weight:700;font-size:19px;color:var(--ink);}
  .contact-info .row{display:grid;grid-template-columns:64px 1fr;gap:14px;}
  .contact-info .muted{color:var(--ink-faint);}
  .contact-info a{
    color:var(--ink);
    text-decoration:none;
  }
  .contact-info a:hover{color:var(--accent);}

  /* Footer */
  footer{
    padding:32px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-size:13px;
    color:var(--ink-faint);
    font-family:"Noto Serif KR",serif;
  }
  footer .fmark{height:16px;opacity:.85;}

  /* Reveal */
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.in{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }


  /* ---------- Multi-page additions ---------- */
  .section-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:24px;
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid var(--line-strong);
    padding-bottom:3px;
    transition:border-color .2s ease, color .2s ease;
  }
  .section-link:hover{color:var(--accent);border-color:var(--accent);}

  nav.links a.is-current{color:var(--ink);}
  nav.links a.is-current::after{right:0;}

  .section-highlight{background:var(--bg-alt);}

  /* Detail pages: intro block stacks (title above content) instead of the
     two-column layout index.html's compact summaries use for the same
     .expertise-intro / .hww-top markup. */
  .detail-stack{
    display:block;
  }
  .detail-stack > div:first-child{margin-bottom:28px;}
  .detail-stack > div:last-child{margin-top:0;}

  /* Back-to-home link at the bottom of every detail page. */
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:56px;
    font-family:"Noto Serif KR",serif;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid var(--line-strong);
    padding-bottom:3px;
    transition:border-color .2s ease, color .2s ease;
  }
  .back-link:hover{color:var(--accent);border-color:var(--accent);}