/* ========== Design Tokens (PRD §5) ========== */
  :root {
    --ink:            #0B1117;      /* 最深墨，近黑，用于主导航/页脚底 */
    --ink-2:          #101820;      /* 深海蓝，主色 */
    --ink-3:          #1A2530;      /* 冷灰蓝，次级深色 */
    --line:           #DEE3E8;      /* 极细分割线 */
    --line-soft:      #EDEFF2;      /* 超浅灰，模块底 */
    --paper:          #F7F8FA;      /* 超浅冷灰 */
    --bg:             #FFFFFF;
    --text:           #111111;      /* 主标题 */
    --text-2:         #3B4551;      /* 正文 */
    --text-3:         #8892A0;      /* 辅助字 */
    --accent:         #5C7C99;      /* 冰蓝强调色 */
    --accent-ink:     #3C5A77;      /* hover 深一档 */

    --fs-hero:        clamp(48px, 9vw, 148px);
    --fs-display:     clamp(36px, 5.2vw, 76px);
    --fs-h2:          clamp(28px, 3.4vw, 48px);
    --fs-h3:          clamp(20px, 1.6vw, 24px);
    --fs-body:        15px;
    --fs-small:       12px;

    --gutter:         clamp(20px, 4vw, 72px);
    --section-y:      clamp(80px, 11vw, 180px);

    --ease:           cubic-bezier(.2,.7,.2,1);
    --dur:            .6s;
  }

  /* ========== Reset ========== */
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{
    font-family:'Inter','PingFang SC','Helvetica Neue','Microsoft YaHei',Arial,sans-serif;
    font-weight:300;
    font-size:var(--fs-body);
    line-height:1.7;
    color:var(--text-2);
    background:var(--bg);
    letter-spacing:.01em;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
  h1,h2,h3,h4{color:var(--text);font-weight:300;letter-spacing:-.01em;margin:0}
  ::selection{background:var(--ink-2);color:#fff}

  /* ========== Container ========== */
  .wrap{
    width:100%;
    max-width:1680px;
    margin:0 auto;
    padding:0 var(--gutter);
  }

  /* ========== Utility ========== */
  .eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--text-3);font-weight:400;
  }
  .eyebrow::before{
    content:"";width:28px;height:1px;background:var(--accent);
  }
  .serif{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300}

  /* ========== Navigation (F01) ========== */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:88px;
    display:flex;align-items:center;
    padding:0 var(--gutter);
    transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(11,17,23,.72);
    backdrop-filter:saturate(140%) blur(18px);
    -webkit-backdrop-filter:saturate(140%) blur(18px);
    border-bottom-color:rgba(255,255,255,.06);
  }
  .nav-inner{
    width:100%;max-width:1680px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    display:inline-flex;align-items:center;
    transition:opacity .3s var(--ease);
  }
  .logo:hover{opacity:.82}
  .logo img{
    height:36px;width:auto;display:block;
    filter:brightness(0) invert(1);
  }
  @media (max-width:520px){.logo img{height:30px}}
  .nav-links{
    display:flex;align-items:center;gap:clamp(18px,2.8vw,44px);
  }
  .nav-links a{
    position:relative;
    color:rgba(255,255,255,.78);
    font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:300;
    padding:8px 0;
    transition:color .3s var(--ease);
  }
  .nav-links a:hover{color:#fff}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .45s var(--ease);
  }
  .nav-links a:hover::after,
  .nav-links a.active::after{transform:scaleX(1)}
  .nav-links a.active{color:#fff}

  .nav-cta{
    font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#fff;
    padding:12px 22px;border:1px solid rgba(255,255,255,.28);
    transition:background-color .35s var(--ease), border-color .35s var(--ease);
  }
  .nav-cta:hover{background:var(--accent);border-color:var(--accent)}

  .nav-toggle{display:none;width:28px;height:28px;position:relative;color:#fff}
  .nav-toggle span{position:absolute;left:0;right:0;height:1px;background:#fff;transition:transform .35s var(--ease), top .35s var(--ease), opacity .2s}
  .nav-toggle span:nth-child(1){top:10px}
  .nav-toggle span:nth-child(2){top:17px}
  .nav-toggle.open span:nth-child(1){top:14px;transform:rotate(45deg)}
  .nav-toggle.open span:nth-child(2){top:14px;transform:rotate(-45deg)}

  /* ========== HERO ========== */
  .hero{
    position:relative;
    height:100vh;min-height:720px;
    color:#fff;
    overflow:hidden;
    background:#0B1117;
  }
  .hero-media{position:absolute;inset:0;z-index:0}
  .hero-media img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.06);
    animation:slowZoom 18s ease-out forwards;
    filter:brightness(.55) saturate(.85) contrast(1.05);
  }
  @keyframes slowZoom{to{transform:scale(1)}}
  .hero-media::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(11,17,23,.55) 0%, rgba(11,17,23,0) 30%, rgba(11,17,23,.8) 100%),
      linear-gradient(90deg, rgba(11,17,23,.45) 0%, rgba(11,17,23,0) 55%);
  }
  .hero-inner{
    position:relative;z-index:2;
    height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 var(--gutter) clamp(48px,8vw,120px);
    max-width:1680px;margin:0 auto;
  }
  .hero h1{
    color:#fff;
    font-size:var(--fs-hero);
    line-height:.95;
    font-weight:200;
    letter-spacing:-.02em;
    margin:0 0 28px;
    max-width:14ch;
  }
  .hero h1 em{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    color:#E7EEF5;
  }
  .hero-sub{
    display:flex;align-items:flex-end;gap:clamp(24px,5vw,80px);flex-wrap:wrap;
    padding-top:28px;border-top:1px solid rgba(255,255,255,.14);
    max-width:960px;
  }
  .hero-sub p{
    color:rgba(255,255,255,.78);max-width:480px;
    font-weight:300;margin:0;line-height:1.75;
  }
  .hero-meta{
    display:flex;gap:clamp(18px,3vw,48px);
    color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  }
  .hero-meta span strong{display:block;color:#fff;font-weight:400;font-size:14px;letter-spacing:.1em;margin-top:6px}

  .hero-corner{
    position:absolute;top:50%;right:var(--gutter);transform:translateY(-50%);
    z-index:2;
    writing-mode:vertical-rl;
    color:rgba(255,255,255,.5);
    font-size:11px;letter-spacing:.4em;text-transform:uppercase;
    display:flex;align-items:center;gap:16px;
  }
  .hero-corner::before,.hero-corner::after{
    content:"";width:1px;height:40px;background:rgba(255,255,255,.2);
  }

  .scroll-ind{
    position:absolute;left:var(--gutter);bottom:28px;z-index:2;
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);
    display:flex;align-items:center;gap:12px;
  }
  .scroll-ind::after{
    content:"";width:48px;height:1px;background:rgba(255,255,255,.4);
    animation:scrollLine 2.4s var(--ease) infinite;
  }
  @keyframes scrollLine{
    0%{transform:scaleX(0);transform-origin:left}
    50%{transform:scaleX(1);transform-origin:left}
    51%{transform-origin:right}
    100%{transform:scaleX(0);transform-origin:right}
  }

  /* ========== Section base ========== */
  section{padding:var(--section-y) 0;position:relative}
  .section-head{
    display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,6vw,120px);
    align-items:end;
    margin-bottom:clamp(60px,8vw,120px);
  }
  .section-head h2{
    font-size:var(--fs-display);
    line-height:1.02;
    letter-spacing:-.02em;
    font-weight:200;
    max-width:14ch;
  }
  .section-head h2 em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;color:var(--accent-ink)}
  .section-head .right{max-width:520px;color:var(--text-2);line-height:1.85;justify-self:end}
  .section-head .eyebrow{margin-bottom:22px}
  @media (max-width:860px){
    .section-head{grid-template-columns:1fr;gap:32px}
    .section-head .right{justify-self:start}
  }

  /* ========== About / Stats (F02) ========== */
  .about{background:var(--bg)}
  .about-grid{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(40px,6vw,100px);align-items:center;
  }
  .about-media{
    position:relative;
    aspect-ratio: 4/5;
    overflow:hidden;
    border-radius:2px;
  }
  .about-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .about-media:hover img{transform:scale(1.04)}
  .about-media::after{
    content:"A/H";position:absolute;right:18px;bottom:14px;
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:#fff;opacity:.8;
  }
  .about-body h3{
    font-size:var(--fs-h2);
    font-weight:200;line-height:1.1;
    margin-bottom:32px;
    letter-spacing:-.01em;
  }
  .about-body p{
    color:var(--text-2);line-height:1.95;margin:0 0 20px;max-width:52ch;
  }
  .about-signature{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:22px;color:var(--ink-3);margin-top:32px;
  }

  /* Stats */
  .stats{
    margin-top:clamp(80px,10vw,140px);
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
  }
  .stat{
    padding:clamp(36px,5vw,60px) clamp(16px,3vw,36px);
    border-right:1px solid var(--line);
    position:relative;
  }
  .stat:last-child{border-right:none}
  .stat b{
    display:block;
    font-size:clamp(54px,7vw,108px);
    font-weight:200;
    color:var(--ink-2);
    letter-spacing:-.03em;line-height:1;
    font-feature-settings:"tnum";
  }
  .stat b sup{font-size:.4em;vertical-align:top;color:var(--accent);font-weight:300;margin-left:4px}
  .stat .lbl{
    margin-top:18px;
    color:var(--text-3);
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  }
  .stat .desc{margin-top:8px;color:var(--text-2);font-size:14px}
  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
  }
  @media (max-width:520px){
    .stats{grid-template-columns:1fr}
    .stat{border-right:none;border-bottom:1px solid var(--line)}
  }

  /* ========== Services (F03) ========== */
  .services{background:var(--paper)}
  .svc-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .svc{
    background:#fff;
    padding:clamp(32px,4vw,56px) clamp(24px,3vw,44px);
    min-height:clamp(360px,40vw,480px);
    display:flex;flex-direction:column;justify-content:space-between;
    position:relative;overflow:hidden;
    transition:background-color .5s var(--ease);
  }
  .svc .num{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    color:var(--accent);font-size:18px;font-weight:300;
  }
  .svc h3{
    font-size:clamp(26px,2.4vw,34px);
    font-weight:300;margin-top:auto;line-height:1.1;
    transition:color .4s var(--ease);
  }
  .svc h3 small{
    display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--text-3);margin-top:10px;font-weight:400;
  }
  .svc p{
    margin:18px 0 0;color:var(--text-2);font-size:14px;line-height:1.85;
    opacity:.9;
  }
  .svc .arrow{
    margin-top:24px;display:inline-flex;align-items:center;gap:10px;
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
    transition:color .35s var(--ease), gap .35s var(--ease);
  }
  .svc .arrow::after{content:"→";transition:transform .35s var(--ease)}
  .svc::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(16,24,32,0) 0%, var(--ink-2) 120%);
    opacity:0;transition:opacity .55s var(--ease);z-index:0;
  }
  .svc > *{position:relative;z-index:1}
  .svc:hover{background:var(--ink-2)}
  .svc:hover h3,.svc:hover .arrow{color:#fff}
  .svc:hover p,.svc:hover h3 small{color:rgba(255,255,255,.72)}
  .svc:hover .num{color:var(--accent)}
  .svc:hover .arrow{gap:16px}
  @media (max-width:1040px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:540px){.svc-grid{grid-template-columns:1fr}}

  /* ========== Culture (摄影压图 · 以人为本) ========== */
  .culture{
    position:relative;padding:0;
    min-height:min(92vh,820px);
    display:flex;align-items:center;justify-content:center;
    color:#fff;overflow:hidden;background:#0B1117;
  }
  .culture img.bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:brightness(.45) saturate(.85);
    transform:scale(1.02);transition:transform 3s var(--ease);
  }
  .culture:hover img.bg{transform:scale(1.06)}
  .culture::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,17,23,.4) 0%, rgba(11,17,23,.1) 40%, rgba(11,17,23,.7) 100%);
  }
  .culture-inner{
    position:relative;z-index:2;text-align:center;padding:var(--gutter);
    max-width:1200px;
  }
  .culture .eyebrow{color:rgba(255,255,255,.7);justify-content:center;display:inline-flex}
  .culture .eyebrow::before{background:var(--accent)}
  .culture h2{
    color:#fff;font-size:clamp(56px,10vw,168px);
    font-weight:200;line-height:.98;letter-spacing:-.03em;
    margin:28px 0 36px;
  }
  .culture h2 em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;color:#CBD7E3}
  .culture p{
    color:rgba(255,255,255,.82);max-width:640px;margin:0 auto;
    font-size:16px;line-height:1.9;font-weight:300;
  }
  .culture .tags{
    margin-top:48px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  }
  .culture .tags span{
    position:relative;overflow:hidden;isolation:isolate;
    padding:10px 22px;border:1px solid rgba(255,255,255,.25);border-radius:999px;
    font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    background:rgba(255,255,255,.04);
    cursor:default;
    transition:
      transform .5s var(--ease),
      border-color .5s var(--ease),
      background-color .5s var(--ease),
      color .5s var(--ease),
      letter-spacing .5s var(--ease),
      box-shadow .5s var(--ease);
  }
  .culture .tags span::after{
    content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.12) 45%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,.12) 55%,
      rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);pointer-events:none;
    transition:left .9s var(--ease);
  }
  .culture .tags span:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.09);
    color:#fff;
    letter-spacing:.22em;
    box-shadow:
      0 12px 28px -14px rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .culture .tags span:hover::after{left:130%}
  @media (prefers-reduced-motion:reduce){
    .culture .tags span,
    .culture .tags span::after{transition:none}
    .culture .tags span:hover{transform:none;letter-spacing:.18em}
  }

  /* ========== Works (F04) ========== */
  .works{background:var(--bg)}
  .filter-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;
    margin-bottom:56px;
  }
  .pills{display:flex;gap:10px;flex-wrap:wrap}
  .pill{
    padding:10px 22px;border:1px solid var(--line);border-radius:999px;
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-2);font-weight:400;
    transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
    background:#fff;
  }
  .pill:hover{border-color:var(--ink-2);color:var(--ink-2)}
  .pill.active{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
  .works-count{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
  .works-count b{color:var(--ink-2);font-weight:400}

  .grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(16px,1.6vw,28px);
  }
  .card{
    position:relative;overflow:hidden;
    border-radius:6px;
    cursor:pointer;
    background:#111;
    isolation:isolate;
  }
  .card img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1.1s var(--ease), filter .6s var(--ease);
  }
  .card:hover img{transform:scale(1.06);filter:saturate(1.08)}
  .card-meta{
    position:absolute;left:18px;top:18px;z-index:3;
    display:flex;gap:8px;
  }
  .card-tag{
    padding:6px 14px;
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    backdrop-filter:blur(10px) saturate(160%);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  }
  .card-info{
    position:absolute;inset:auto 0 0 0;z-index:2;
    padding:24px 22px 22px;color:#fff;
    background:linear-gradient(180deg, rgba(11,17,23,0) 0%, rgba(11,17,23,.78) 100%);
    transition:transform .6s var(--ease), opacity .4s var(--ease);
  }
  .card-info h4{color:#fff;font-size:20px;font-weight:400;letter-spacing:.01em;margin:0}
  .card-info .ln{
    display:flex;gap:18px;margin-top:8px;
    font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.78);
  }
  .card-info .ln span{display:inline-flex;align-items:center;gap:6px}
  .card-info .ln span::before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%}

  /* Glass overlay on hover */
  .card-glass{
    position:absolute;inset:0;z-index:4;
    display:flex;align-items:flex-end;
    padding:28px;
    opacity:0;transform:translateY(16px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
    background:
      linear-gradient(180deg, rgba(11,17,23,.1) 0%, rgba(11,17,23,.55) 100%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(255,255,255,.08);
  }
  .card:hover .card-glass{opacity:1;transform:translateY(0)}
  .card:hover .card-info{opacity:0;transform:translateY(16px)}
  .card-glass .inner{width:100%;color:#fff}
  .card-glass .t{
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);
    margin-bottom:10px;
  }
  .card-glass h4{color:#fff;font-size:24px;font-weight:300;line-height:1.15;letter-spacing:-.005em;margin:0 0 18px}
  .card-glass dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:13px}
  .card-glass dt{color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;font-size:11px;align-self:center}
  .card-glass dd{margin:0;color:#fff;font-weight:400}
  .card-glass .view{
    display:inline-flex;align-items:center;gap:10px;
    margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  }
  .card-glass .view::after{content:"→";transition:transform .3s var(--ease)}
  .card:hover .card-glass .view::after{transform:translateX(6px)}

  /* Matrix layout (瀑布式矩阵) */
  .c-7x8{grid-column:span 7;aspect-ratio: 16/11}
  .c-5x8{grid-column:span 5;aspect-ratio: 4/3.4}
  .c-4x6{grid-column:span 4;aspect-ratio: 3/4}
  .c-8x6{grid-column:span 8;aspect-ratio: 16/9}
  .c-6x6{grid-column:span 6;aspect-ratio: 4/3}
  .c-12x6{grid-column:span 12;aspect-ratio: 21/8}

  @media (max-width:980px){
    .c-7x8,.c-5x8,.c-8x6,.c-6x6{grid-column:span 12;aspect-ratio:16/11}
    .c-4x6{grid-column:span 6;aspect-ratio:3/4}
    .c-12x6{grid-column:span 12;aspect-ratio:16/9}
  }
  @media (max-width:560px){
    .c-4x6{grid-column:span 12;aspect-ratio:4/3}
  }

  /* ========== Process (F05) ========== */
  .process{background:var(--paper)}
  .proc-list{
    border-top:1px solid var(--line);
  }
  .proc-row{
    display:grid;grid-template-columns:90px 1fr 1fr 1fr;
    gap:clamp(20px,3vw,40px);
    padding:32px 0;
    border-bottom:1px solid var(--line);
    align-items:center;
    transition:padding .35s var(--ease);
    position:relative;
  }
  .proc-row::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:0;
    background:var(--ink-2);transition:width .45s var(--ease);
  }
  .proc-row:hover{padding-left:24px}
  .proc-row:hover::before{width:3px}
  .proc-num{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    color:var(--accent);font-size:32px;font-weight:300;
  }
  .proc-title{
    font-size:clamp(22px,2vw,28px);color:var(--ink-2);font-weight:300;
  }
  .proc-title small{display:block;color:var(--text-3);font-size:11px;letter-spacing:.26em;text-transform:uppercase;margin-top:8px;font-weight:400}
  .proc-desc{color:var(--text-2);font-size:14px;line-height:1.75}
  .proc-out{
    display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  }
  .proc-out span{
    font-size:11px;letter-spacing:.18em;color:var(--text-3);
    padding:6px 12px;border:1px solid var(--line);border-radius:999px;
    background:#fff;
  }
  @media (max-width:860px){
    .proc-row{grid-template-columns:60px 1fr;gap:20px}
    .proc-desc,.proc-out{grid-column:span 2;padding-left:60px}
    .proc-out{justify-content:flex-start}
  }
  @media (max-width:560px){
    .proc-desc,.proc-out{padding-left:0;grid-column:1 / -1}
  }

  /* ========== News (F06) · Editorial Layout ========== */
  .news{background:var(--bg)}

  /* Featured story */
  .news-feature{
    position:relative;display:grid;
    grid-template-columns:1.2fr 1fr;gap:0;
    overflow:hidden;border-radius:6px;
    min-height:clamp(380px,44vw,560px);
    margin-bottom:clamp(48px,5vw,72px);
    color:#fff;background:#0B1117;
    transition:transform .6s var(--ease);
  }
  .news-feature:hover{transform:translateY(-2px)}
  .news-feature-img{position:relative;overflow:hidden;min-height:320px}
  .news-feature-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1.2s var(--ease), filter .6s var(--ease);
    filter:brightness(.92) saturate(.95);
  }
  .news-feature:hover .news-feature-img img{transform:scale(1.04);filter:brightness(1) saturate(1)}
  .news-feature-img::after{
    content:"Featured";position:absolute;left:22px;top:22px;z-index:2;
    padding:8px 16px;
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    backdrop-filter:blur(10px) saturate(160%);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#fff;
  }
  .news-feature-body{
    background:var(--ink-2);
    padding:clamp(36px,4vw,64px);
    display:flex;flex-direction:column;justify-content:space-between;
    position:relative;
  }
  .news-feature .eyebrow-f{
    display:inline-flex;align-items:center;gap:12px;
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--accent);font-weight:400;margin-bottom:22px;
  }
  .news-feature .eyebrow-f::before{content:"";width:28px;height:1px;background:var(--accent)}
  .news-feature h3{
    font-size:clamp(24px,2.6vw,40px);
    font-weight:300;line-height:1.25;color:#fff;
    letter-spacing:-.01em;margin:0 0 24px;
  }
  .news-feature h3 em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;color:#CBD7E3}
  .news-feature p{
    color:rgba(255,255,255,.72);
    font-size:15px;line-height:1.85;margin:0 0 28px;max-width:44ch;
  }
  .news-feature .meta{
    display:flex;gap:24px;flex-wrap:wrap;
    font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(255,255,255,.5);
    padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
    margin-bottom:22px;
  }
  .news-feature .meta b{color:#fff;font-weight:400;margin-left:6px;font-feature-settings:"tnum"}
  .news-feature .arrow{
    display:inline-flex;align-items:center;gap:14px;
    font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#fff;
    transition:gap .35s var(--ease);align-self:flex-start;
  }
  .news-feature .arrow::after{content:"→";color:var(--accent);transition:transform .35s var(--ease)}
  .news-feature:hover .arrow{gap:20px}
  .news-feature:hover .arrow::after{transform:translateX(4px)}

  /* 3-card grid */
  .news-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(24px,2.4vw,40px);
  }
  .news-card{
    display:flex;flex-direction:column;position:relative;
    transition:transform .4s var(--ease);
  }
  .news-card:hover{transform:translateY(-4px)}
  .news-card-thumb{
    aspect-ratio:4/3;overflow:hidden;border-radius:4px;
    background:#0B1117;position:relative;
  }
  .news-card-thumb img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1s var(--ease), filter .5s var(--ease);
  }
  .news-card:hover .news-card-thumb img{transform:scale(1.05);filter:saturate(1.08)}
  .news-card-thumb .datebox{
    position:absolute;left:16px;top:16px;z-index:2;
    display:flex;align-items:baseline;gap:8px;
    padding:8px 14px;
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    backdrop-filter:blur(10px) saturate(160%);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;color:#fff;
  }
  .news-card-thumb .datebox .d{font-size:14px;font-weight:400;font-feature-settings:"tnum"}
  .news-card-thumb .datebox .m{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
  .news-card-body{
    padding:22px 2px 0;
    display:flex;flex-direction:column;gap:12px;flex:1;
  }
  .news-card .tag{
    font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  }
  .news-card h4{
    font-size:clamp(17px,1.4vw,20px);
    color:var(--ink-2);font-weight:400;
    line-height:1.45;letter-spacing:-.005em;margin:0;
    transition:color .3s var(--ease);
  }
  .news-card:hover h4{color:var(--accent-ink)}
  .news-card p{
    color:var(--text-2);margin:0;font-size:13px;line-height:1.75;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .news-card .bottom{
    margin-top:auto;padding-top:14px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-3);border-top:1px solid var(--line);
  }
  .news-card .bottom .read{
    display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);
    transition:gap .3s var(--ease);
  }
  .news-card .bottom .read::after{content:"→";color:var(--accent)}
  .news-card:hover .bottom .read{gap:12px}

  @media (max-width:900px){
    .news-feature{grid-template-columns:1fr}
    .news-feature-img{aspect-ratio:16/9;min-height:240px}
    .news-grid{grid-template-columns:1fr 1fr;gap:24px}
  }
  @media (max-width:560px){
    .news-grid{grid-template-columns:1fr}
  }

  .news-more{margin-top:72px;text-align:center}

  /* ========== Ghost Button ========== */
  .btn{
    display:inline-flex;align-items:center;gap:14px;
    padding:18px 34px;
    border:1px solid var(--ink-2);color:var(--ink-2);
    font-size:12px;letter-spacing:.28em;text-transform:uppercase;
    background:transparent;
    transition:background-color .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
  }
  .btn::after{content:"→";transition:transform .35s var(--ease)}
  .btn:hover{background:var(--ink-2);color:#fff;gap:20px}
  .btn-invert{border-color:rgba(255,255,255,.4);color:#fff}
  .btn-invert:hover{background:#fff;color:var(--ink-2)}

  /* ========== CTA Contact ========== */
  .cta{
    background:var(--ink-2);
    color:#fff;position:relative;overflow:hidden;
  }
  .cta::before{
    content:"HONGLAN";
    position:absolute;left:-2%;bottom:-20%;
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:clamp(180px,28vw,480px);font-weight:300;
    color:rgba(255,255,255,.04);letter-spacing:-.04em;line-height:1;
    pointer-events:none;
  }
  .cta-inner{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,100px);align-items:center;
  }
  .cta h2{color:#fff;font-size:var(--fs-display);line-height:1.02;font-weight:200;letter-spacing:-.02em}
  .cta h2 em{font-family:'Cormorant Garamond',serif;font-style:italic;color:#CBD7E3}
  .cta-right p{color:rgba(255,255,255,.72);margin:0 0 28px;max-width:42ch}
  .cta-right .phone{
    font-family:'Inter','PingFang SC',system-ui,sans-serif;
    font-size:clamp(26px,2.6vw,38px);color:#fff;font-weight:200;
    letter-spacing:.08em;margin-bottom:18px;
    font-feature-settings:"tnum" 1,"lnum" 1;
  }
  @media (max-width:860px){.cta-inner{grid-template-columns:1fr}}

  /* ========== Footer (F07) ========== */
  footer{
    background:#080D13;color:rgba(255,255,255,.6);
    padding:clamp(60px,7vw,100px) 0 40px;
    border-top:1px solid rgba(255,255,255,.05);
  }
  .f-top{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
    gap:clamp(32px,4vw,72px);
    padding-bottom:clamp(40px,5vw,72px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .f-brand b{color:#fff;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:28px;font-weight:400;letter-spacing:.02em}
  .f-brand img.f-logo{height:44px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
  .f-brand p{color:rgba(255,255,255,.55);margin:18px 0 24px;max-width:36ch;font-size:14px;line-height:1.8}
  .f-social{display:flex;gap:10px}
  .f-social a{
    width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);font-size:13px;
    transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .f-social a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  .f-col h5{color:#fff;font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;margin:0 0 22px}
  .f-col ul{list-style:none;padding:0;margin:0}
  .f-col li{margin-bottom:12px;font-size:13px}
  .f-col a{color:rgba(255,255,255,.6);transition:color .3s var(--ease)}
  .f-col a:hover{color:#fff}
  .f-bot{
    padding-top:28px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-size:12px;color:rgba(255,255,255,.38);letter-spacing:.05em;
  }
  .f-bot .ipv6{display:inline-flex;align-items:center;gap:8px}
  .f-bot .ipv6::before{
    content:"IPv6";font-size:9px;letter-spacing:.18em;
    padding:3px 8px;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.7);
  }
  @media (max-width:860px){
    .f-top{grid-template-columns:1fr 1fr}
    .f-brand{grid-column:1 / -1}
  }
  @media (max-width:520px){
    .f-top{grid-template-columns:1fr}
  }

  /* ========== Mobile Nav ========== */
  .mobile-menu{display:none}
  @media (max-width:900px){
    .nav-links, .nav-cta{display:none}
    .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
    .mobile-menu{
      display:block;
      position:fixed;top:88px;left:0;right:0;bottom:0;
      background:rgba(11,17,23,.98);
      backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
      z-index:99;
      padding:40px var(--gutter);
      transform:translateX(100%);transition:transform .5s var(--ease);
    }
    .mobile-menu.open{transform:translateX(0)}
    .mobile-menu a{
      display:block;padding:22px 0;color:#fff;font-size:22px;letter-spacing:.1em;
      border-bottom:1px solid rgba(255,255,255,.08);font-weight:200;
    }
  }

  /* ========== Reveal on scroll ========== */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
  .reveal.visible{opacity:1;transform:translateY(0)}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
    .reveal{opacity:1;transform:none}
  }