:root{
    --navy:#00538d;
    --navy-dark:#00385f;
    --navy-deep:#001b30;
    --gray:#8b98a3;
    --ink:#1c2126;
    --paper:#f6f7f8;
    --accent-gold:#e0a94d;
    --card-gray:#5a5657; /* 從名片色帶取樣的深灰色 */
    --line: rgba(255,255,255,.14);
    --line-light:#e6e8ea;
    --maxw: 1180px;
    --sidenav-w: 76px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:auto;}
  body{
    font-family:'Noto Sans TC','Jost',sans-serif;
    background:var(--paper);
    color:var(--ink);
    overflow-x:hidden;
    line-height:1.8;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;/* padding:0 6vw 0 calc(6vw + var(--sidenav-w)); */}
  ::selection{background:var(--navy);color:#fff;}

  /* ---------- SIDE NAV ---------- */
  /* Fixed left rail, full page height, own opaque background so it stays legible
     over every section (navy hero, white about, dark advantages, ...) regardless
     of what scrolls behind it. Menu labels are rotated -90deg (counter-clockwise)
     so they read bottom-to-top, stacked vertically. */
  #sideNav{
    position:fixed;top:0;left:0;bottom:0;width:var(--sidenav-w);z-index:200;
    background:var(--navy-deep);
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    padding:26px 0;
  }
  #sideNav .side-logo{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:50%;background:#e4e6e8;flex-shrink:0;
  }
  #sideNav .side-logo svg{width:36px;height:36px;display:block;transform-origin:50% 85%;}
  #sideNav .side-logo:hover svg{animation:logoShake .5s ease;}
  @keyframes logoShake{
    0%,100%{transform:rotate(0);}
    20%{transform:rotate(-12deg);}
    40%{transform:rotate(10deg);}
    60%{transform:rotate(-7deg);}
    80%{transform:rotate(4deg);}
  }
  #sideNav .side-menu{list-style:none;display:flex;flex-direction:column;align-items:center;gap:36px;}
  #sideNav .side-menu a{
    /* upright vertical text (characters stacked top-to-bottom, not rotated —
       e.g. 首/頁 reads straight down), rather than sideways rotated latin text */
    writing-mode:vertical-rl;text-orientation:upright;
    font-size:1.2rem;letter-spacing:.15em;font-weight:500;color:rgba(255,255,255,.62);
    transition:color .3s;position:relative;
  }
  #sideNav .side-menu a::after{
    content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent-gold);
    transition:width .3s ease;
  }
  #sideNav .side-menu a:hover,#sideNav .side-menu a.active{color:#fff;}
  #sideNav .side-menu a:hover::after,#sideNav .side-menu a.active::after{width:100%;}
  #sideNav .side-foot{writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.35);}
  #navToggle{display:none;background:none;border:none;cursor:pointer;z-index:210;}
  #navToggle span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.3s;}
  /* mobile-only additions: on desktop the wrapper is transparent to layout
     (its children — the rotated menu — stay direct flex items of #sideNav,
     unchanged from before) and the English labels / full logo stay hidden */
  .mobile-panel{display:contents;}
  .mobile-panel-logo{display:none;}
  .side-menu-en{display:none;}

  /* ---------- HERO ---------- */
  #hero{
    position:relative;height:100vh;min-height:640px;overflow:hidden;
    background:radial-gradient(ellipse at 30% 20%, var(--navy) 0%, var(--navy-dark) 45%, var(--navy-deep) 100%);
    /* .hero-mark (bottle) and .hero-content (headline) are both position:absolute
       now, positioned independently — no flex/centering coupling between them, so
       moving one can never drag the other along. */
  }
  .grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
    background-size:3px 3px;}
  /* 深灰／深藍交界,精準卡在「感動的源頭來自於誠懇」與「魔瓶視覺設計有限公司」兩行中間(由 JS 量測後寫入 top) */
  .hero-graycut{
    position:absolute;left:50%;transform:translateX(-50%);width:100vw;
    /* fixed at 2/3 down the hero, so the band itself always covers ~1/3 of the
       screen height; .hero-content is nudged by JS to meet this line instead of
       the other way around (see positionHeroContent) */
    top:66.67%;bottom:0;z-index:1;
    /* slight transparency + a soft top-to-bottom gradient instead of a flat fill,
       so it reads as a layer sitting over the navy rather than a hard-pasted block */
    background:linear-gradient(180deg, rgba(90,86,87,.93) 0%, rgba(72,69,70,.97) 100%);
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  }
  .h1-line1,.h1-line2{display:block;}
  /* zero-size marker sandwiched between the two lines: its own offsetTop IS the seam
     between them (no averaging two separate heights, so no room for rounding drift) */
  .h1-split{display:block;height:0;line-height:0;font-size:0;overflow:hidden;}
  /* headline block: horizontally centered with left/right:auto-margin (NOT a
     transform), because GSAP already owns this element's transform for the
     intro/scroll-parallax animation — mixing a CSS %-transform in would risk
     GSAP baking in a stale pixel offset when it first parses the transform.
     `top` is set by JS (positionHeroContent) to land the line seam on the gray
     boundary; nothing here couples it to the brand mark's position. */
  .hero-content{
    position:absolute;left:var(--sidenav-w);right:0;margin:0 auto;width:min(94vw,900px);
    z-index:5;text-align:center;color:#fff;padding:0 20px;
  }

  /* brand mark: centered on its own within the navy zone (the top 2/3 of the hero,
     above the fixed gray band) — fully independent of the headline below it.
     Offset half the sidebar width so it centers in the VISIBLE area, not the
     full viewport (the sidebar covers the left var(--sidenav-w) permanently). */
  .hero-mark{
    position:absolute;left:calc(50% + (var(--sidenav-w) / 2));top:45%;
    transform:translate(-50%,-50%);z-index:2;
  }
  /* ---- brand mark: the "O" bottle shakes, then pops ideas out, forever ---- */
  .bottle-wrap{position:relative;width:170px;height:190px;}
  .bottle-shake{position:absolute;inset:0;transform-origin:50% 88%;}
  .bottle-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transform:scale(.6);}
  .bottle-shape{fill:url(#bottleGrad);}
  .bottle-glow{filter:blur(18px);opacity:.55;}
  /* spark-pos: all launch from the same point at the bottle neck — the
     scatter/arc itself is done entirely by the JS timeline below (parabolic
     rise + fall per star), not by a static per-element offset */
  .spark-pos{position:absolute;width:22px;height:22px;top:14%;left:50%;pointer-events:none;}
  .spark-inner{width:100%;height:100%;opacity:0;display:block;}
  .spark-inner path{fill:var(--accent-gold);}
  .spark-inner.c-white path{fill:#fff;}
  .spark-inner.c-blue path{fill:#7ab4ff;}
  .spark-inner.c-pink path{fill:#f2a6c1;}
  .spark-inner.c-mint path{fill:#7fd9b6;}
  .spark-inner.c-yellow path{fill:#f2d675;}

  .hero-content h1{
    font-size:clamp(28px,4.4vw,54px);font-weight:700;letter-spacing:.04em;line-height:1.5;
    opacity:0;
  }
  .hero-content h1 b{color:var(--accent-gold);font-weight:900;}
  .hero-content p{
    margin:10px auto 0;font-size:clamp(13px,1.4vw,16px);letter-spacing:.2em;color:rgba(255,255,255,.7);
    text-transform:uppercase;opacity:0;
    text-align:center;text-align-last:justify; /* width is set by JS to match the headline exactly;
      text-align-last stretches the word gaps so the text fills that width edge-to-edge */
    display:none; /* prepared (sizing/wrapping logic all in place) but not shown yet — turn back on by
      removing this line when it's ready to appear */
  }
  .hero-content p .sub-tail{white-space:nowrap;}
  @media (max-width:640px){
    .hero-content p{width:auto !important;text-align-last:center;}
    .hero-content p .sub-tail{display:block;margin-top:2px;}
  }
  .scroll-cue{
    position:absolute;bottom:36px;left:calc(50% + (var(--sidenav-w) / 2));transform:translateX(-50%);
    color:#fff;opacity:0;z-index:5;
    display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;
  }
  .scroll-cue .line{width:1px;height:40px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;}
  .scroll-cue .line::after{content:'';position:absolute;top:-40px;left:0;width:100%;height:40px;background:#fff;animation:cue 1.8s infinite;}
  @keyframes cue{to{top:40px;}}

  /* ---------- SECTION GENERIC ---------- */
  section{position:relative;padding:130px 0;}
  .kicker{
    display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.3em;
    color:var(--navy);text-transform:uppercase;font-weight:600;margin-bottom:18px;
  }
  .kicker::before{content:'';width:28px;height:1px;background:var(--navy);}
  h2.sec-title{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:.03em;margin-bottom:26px;}
  .sec-lead{color:#555;font-size:16px;}

  /* ---------- ABOUT ---------- */
  #about{background:#fff;}
  /* the three paragraphs now run the full width of the section (no more narrow
     column squeezed beside the timeline block); the timeline sits below them
     as a wide horizontal band instead of a side column */
  .about-grid{display:flex;flex-direction:column;gap:44px;}
  .quote-block{
    font-size:clamp(20px,2.2vw,28px);font-weight:500;color:var(--navy-dark);line-height:1.85;
    padding-left:26px;border-left:3px solid var(--accent-gold);margin:34px 0;
  }
  .about-copy p{margin-bottom:18px;color:#4a4f54;font-size:1rem;}
  .timeline{background:var(--paper);border-radius:6px;padding:36px 40px;}
  .timeline-top{display:flex;align-items:center;gap:48px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #dcdfe2;}
  .timeline .yr{font-size:46px;font-weight:900;color:var(--navy);letter-spacing:.02em;white-space:nowrap;}
  .timeline .yr span{font-size:18px;font-weight:500;color:var(--gray);margin-left:8px;}
  .timeline p{color:#666;font-size:1rem;max-width:550px;}
  /* four stat cells across the full width, separated by vertical divider lines */
  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;}
  .stat-row div{text-align:center;padding:0 18px;border-left:1px solid #dcdfe2;}
  .stat-row div:first-child{border-left:none;padding-left:0;}
  .stat-row div b{display:block;font-size:26px;color:var(--navy-dark);font-weight:800;}
  .stat-row div span{font-size:12.5px;color:#888;letter-spacing:.05em;}

  /* ---------- ADVANTAGES ---------- */
  #advantages{background:var(--navy-deep);color:#fff;}
  #advantages .kicker{color:var(--accent-gold);}
  #advantages .kicker::before{background:var(--accent-gold);}
  #advantages h2.sec-title{color:#fff;}
  #advantages .sec-lead{color:rgba(255,255,255,.6);}
  .adv-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .adv-card{
    position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:10px;
    padding:36px 30px;text-align:left;transition:transform .35s ease, background .35s ease, border-color .35s ease;
  }
  .adv-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);}
  /* large icon sits as a faint background motif in the card's top-right corner */
  .adv-card .adv-bg-icon{
    position:absolute;top:-64px;right:-64px;width:220px;height:220px;z-index:0;pointer-events:none;
    stroke:rgba(255,255,255,.07);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
  }
  /* circular badge now carries the 01–05 index number */
  .adv-card .num-badge{
    position:relative;z-index:1;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.07);
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  }
  .adv-card .num-badge .num{font-size:15px;color:var(--accent-gold);letter-spacing:.03em;font-weight:700;}
  .adv-card h3{position:relative;z-index:1;margin:0 0 14px;font-size:18px;font-weight:700;line-height:1.5;}
  .adv-card p{position:relative;z-index:1;font-size:1rem;color:rgba(255,255,255,.55);}

  /* ---------- SERVICES ---------- */
  /* ---------- team ---------- */
  #team{background:#f4f5f6;}
  .team-photo-wrap{margin:50px 0 64px;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.08);}
  .team-photo-wrap img{display:block;width:100%;height:auto;}
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .team-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05);}
  .team-photo{width:100%;aspect-ratio:4/5;background:linear-gradient(180deg,#eef0f2,#e4e6e9);overflow:hidden;}
  .team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
  .team-content{padding:26px 32px 34px;}
  .team-card .team-name{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:3px;}
  .team-card .team-name span{font-weight:500;color:var(--gray);font-size:14px;margin-left:6px;}
  .team-card .team-role{
    display:inline-block;font-size:12.5px;color:var(--navy);font-weight:700;letter-spacing:.04em;
    background:rgba(0,83,141,.08);border-radius:20px;padding:4px 12px;margin-bottom:20px;
  }
  .team-card ul{list-style:none;padding:0;margin:0;}
  .team-card ul li{position:relative;padding-left:16px;font-size:13.5px;color:#555;line-height:1.75;margin-bottom:9px;}
  .team-card ul li:last-child{margin-bottom:0;}
  .team-card ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--accent-gold);border-radius:50%;}
  #services{background:#fff;}
  .svc-grid{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
  .svc-card{
    border:1px solid #e6e8ea;border-radius:8px;padding:38px 28px;transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .svc-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,60,100,.12);border-color:transparent;}
  .svc-card .ico{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;margin-bottom:24px;}
  .svc-card h3{font-size:17px;font-weight:700;margin-bottom:12px;}
  .svc-card ul{list-style:none;color:#666;font-size:13.5px;}
  .svc-card ul li{margin-bottom:7px;padding-left:14px;position:relative;}
  .svc-card ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--accent-gold);border-radius:50%;}
  a.svc-card{display:block;color:inherit;text-decoration:none;}
  .svc-more{display:inline-block;margin-top:18px;font-size:12.5px;color:var(--navy);font-weight:600;letter-spacing:.05em;}
  .svc-card-link:hover .svc-more{text-decoration:underline;}

  /* ---------- PORTFOLIO ---------- */
  #work{background:var(--paper);}
  .work-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;}
  .work-more{font-size:13.5px;font-weight:700;color:var(--navy);letter-spacing:.03em;white-space:nowrap;}
  .work-more:hover{text-decoration:underline;}

  /* bento-style grid (ref: frog.co/work) — tiles vary in area to break the
     uniform-card monotony; image-forward with the caption overlaid at the
     bottom rather than in a separate body block, so tiles of different
     heights still read consistently */
  .work-grid{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:20px;}
  .work-card{
    position:relative;display:block;grid-column:span 1;grid-row:span 1;color:#fff;
    border-radius:10px;overflow:hidden;box-shadow:0 6px 24px rgba(20,40,60,.08);
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .work-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(20,40,60,.2);}
  .work-card.size-lg{grid-column:span 2;grid-row:span 2;}
  .work-card.size-wide{grid-column:span 2;grid-row:span 1;}
  .work-card.size-tall{grid-column:span 1;grid-row:span 2;}
  .work-card.size-hero{grid-column:span 3;grid-row:span 3;}
  .work-card.size-band{grid-column:span 3;grid-row:span 2;}
  .work-thumb{position:absolute;inset:0;transition:transform .5s ease;}
  .work-card:hover .work-thumb{transform:scale(1.06);}
  .work-card::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.78) 100%);
  }
  .work-tag{
    position:absolute;top:14px;left:14px;font-size:10.5px;background:rgba(255,255,255,.2);
    padding:4px 11px;border-radius:20px;letter-spacing:.1em;z-index:2;
  }
  .work-overlay{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2;}
  .work-overlay h3{font-size:16px;font-weight:700;line-height:1.4;}
  .work-overlay p{
    margin-top:6px;font-size:12px;color:rgba(255,255,255,.8);display:none;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .work-card.size-lg .work-overlay p,.work-card.size-hero .work-overlay p,.work-card.size-band .work-overlay p,.work-card.size-tall .work-overlay p{display:-webkit-box;}

  .more-works{margin-top:70px;border-top:1px solid #dfe2e5;padding-top:44px;}
  .more-works h4{font-size:14px;letter-spacing:.15em;color:#888;margin-bottom:26px;text-transform:uppercase;}
  .more-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
  .more-filter-btn{
    font-size:12.5px;padding:7px 16px;border-radius:20px;border:1px solid #d8dbde;background:#fff;
    color:#666;cursor:pointer;font-family:inherit;transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .more-filter-btn:hover{border-color:var(--navy);color:var(--navy);}
  .more-filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .more-list{columns:3;column-gap:40px;}
  .more-list a{
    display:block;font-size:14px;color:#3d454b;padding:9px 0;border-bottom:1px dashed #e2e4e6;
    break-inside:avoid;transition:color .25s;
  }
  .more-list a:hover{color:var(--navy);}
  .more-list a.filtered-out{display:none;}
  .more-empty{display:none;color:#999;font-size:13.5px;padding:20px 0;}
  .more-empty.show{display:block;}

  /* ---------- INSIGHTS ---------- */
  #insights{background:#fff;}
  .insights-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;}
  .insights-more{font-size:13.5px;font-weight:700;color:var(--navy);letter-spacing:.03em;white-space:nowrap;}
  .insights-more:hover{text-decoration:underline;}
  .insights-carousel{margin-top:56px;}
  /* extra vertical padding (offset by a matching negative margin) gives the
     hover shadow/lift room to render without the horizontal overflow:hidden
     that hides off-screen carousel pages also clipping it off */
  .insights-viewport{overflow:hidden;padding:20px 0 60px;margin:-20px 0 -60px;}
  .insights-track{display:flex;transition:transform .5s ease;}
  .insights-track .insight-card{flex:0 0 calc((100% - 56px)/3);margin-right:28px;}
  .insights-track .insight-card:last-child{margin-right:0;}
  .insight-card{
    display:block;border:1px solid #e6e8ea;border-radius:8px;overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .insight-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,60,100,.12);border-color:transparent;}
  .insights-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:36px;}
  .insights-arrow{
    width:42px;height:42px;border-radius:50%;border:1px solid #dfe2e5;background:#fff;color:var(--navy);
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;
    transition:background .25s ease,border-color .25s ease,color .25s ease;flex-shrink:0;
  }
  .insights-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
  .insights-dots{display:flex;gap:8px;}
  .insights-dot{width:7px;height:7px;border-radius:50%;background:#d8dbde;cursor:pointer;transition:background .25s ease,transform .25s ease;}
  .insights-dot.active{background:var(--navy);transform:scale(1.35);}
  .insight-thumb{height:150px;padding:16px;}
  .insight-tag{
    display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:11px;
    letter-spacing:.15em;padding:5px 12px;border-radius:20px;
  }
  .insight-body{padding:24px 22px 28px;}
  .insight-date{font-size:12px;letter-spacing:.1em;color:var(--gray);}
  .insight-body h3{margin:10px 0;font-size:17px;font-weight:700;line-height:1.5;}
  .insight-body p{font-size:13.5px;color:#666;}

  /* ---------- BRANDS ---------- */
  /* styled like a footer strip (ref: sf.mfamily.com.tw) — centered, minimal,
     logos shown desaturated until hovered so they read as a quiet, unified list */
  #brands{background:var(--paper);overflow:hidden;position:relative;}
  .brand-wrap{text-align:center;}
  .brand-wrap .kicker{justify-content:center;}
  .brand-wrap .kicker::before{display:none;}
  .brand-wrap .sec-lead{margin:0 auto;}
  .brand-row{margin-top:56px;display:flex;justify-content:center;align-items:flex-start;gap:56px;flex-wrap:wrap;}
  .brand-item{
    display:flex;flex-direction:column;align-items:center;gap:8px;width:148px;position:relative;
    filter:grayscale(1);opacity:.7;transition:filter .3s ease, opacity .3s ease, transform .3s ease;
  }
  .brand-item:hover{filter:grayscale(0);opacity:1;transform:translateY(-4px);}
  .brand-item img{width:168px;height:auto;}
  .brand-item span{font-size:15px;letter-spacing:.08em;color:var(--ink);font-weight:500;margin-top:6px;}
  .brand-item small{font-size:11px;letter-spacing:.03em;color:var(--gray);font-weight:400;}
  .brand-item-soon{cursor:default;}
  .brand-soon-tag{
    font-style:normal;font-size:10px;letter-spacing:.1em;color:#fff;background:var(--gray);
    padding:3px 11px;border-radius:20px;margin-top:4px;
  }

  /* ---------- CONTACT ---------- */
  #contact{background:var(--navy-dark);color:#fff;overflow:hidden;position:relative;}
  #contact .grain{opacity:.04;}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;position:relative;z-index:2;}
  #contact .kicker{color:var(--accent-gold);}
  #contact .kicker::before{background:var(--accent-gold);}
  #contact h2.sec-title{color:#fff;}
  .contact-info p{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:50px;max-width:420px;}
  .contact-logo{position:relative;display:inline-block;}
  .contact-logo svg{height:72px;width:auto;display:block;}
  /* the shine band is clipped with an inline SVG clip-path built from the
     logo's own letter/icon outlines, so it only ever renders inside those
     shapes — no external file reference, so it isn't at the mercy of the
     browser's file:// loading rules for CSS mask-image */
  .logo-shine-band{
    animation:logoShineSweep 4.5s ease-in-out infinite;
    transform-origin:0 0;
  }
  @keyframes logoShineSweep{
    0%{transform:translateX(0) skewX(-20deg);}
    35%{transform:translateX(210px) skewX(-20deg);}
    100%{transform:translateX(210px) skewX(-20deg);}
  }
  .info-line{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
  .info-line .lbl{width:70px;flex-shrink:0;font-size:12px;letter-spacing:.15em;color:var(--accent-gold);text-transform:uppercase;padding-top:2px;}
  .info-line .val{font-size:15.5px;}
  .map-frame{border-radius:8px;overflow:hidden;height:100%;min-height:320px;border:1px solid var(--line);}
  .map-frame iframe{width:100%;height:100%;min-height:320px;border:0;filter:grayscale(.3) contrast(1.05);}

  footer{background:var(--navy-deep);color:rgba(255,255,255,.5);padding:30px 0;font-size:12.5px;}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(40px);}

  /* ---------- responsive ---------- */
  @media(max-width:980px){
    .adv-grid{grid-template-columns:repeat(2,1fr);}
    .svc-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:1fr;gap:24px;}
    .work-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}
    .work-card.size-lg,.work-card.size-wide,.work-card.size-tall,.work-card.size-hero,.work-card.size-band{grid-column:span 2;grid-row:span 1;}
    .insights-track .insight-card{flex:0 0 calc((100% - 28px)/2);margin-right:28px;}
    .contact-grid{grid-template-columns:1fr;}
    .more-list{columns:2;}
  }
  @media(max-width:640px){
    /* the rotated side rail doesn't work at phone width — collapse it into a
       normal top bar (logo + hamburger). The header bar itself stays fixed and
       opaque at all times; the menu slides in BELOW it as its own panel, so the
       hamburger/close button always sits on the solid navy bar and is never
       hidden behind (or invisible against) the white panel. */
    #sideNav{
      flex-direction:row;justify-content:space-between;align-items:center;
      top:0;left:0;right:0;bottom:auto;width:100%;height:64px;padding:0 6vw;
    }
    #sideNav .side-logo{width:38px;height:38px;}
    #sideNav .side-logo svg{width:28px;height:28px;}
    #sideNav .side-foot{display:none;}
    /* the panel (not the <ul> itself) now owns the fixed positioning/slide, so
       it can hold both the nav list AND the full logo at its bottom */
    #sideNav .mobile-panel{
      display:flex;flex-direction:column;justify-content:space-between;
      position:fixed;top:64px;right:0;height:calc(100vh - 64px);width:78vw;max-width:340px;
      background:#fff;padding:26px 44px 32px;overflow-y:auto;
      transform:translateX(100%);transition:transform .35s ease;box-shadow:-10px 0 40px rgba(0,0,0,.15);
    }
    #sideNav .mobile-panel.open{transform:translateX(0);}
    #sideNav .side-menu{display:block;width:100%;}
    #sideNav .side-menu li{width:100%;border-bottom:1px solid #e6e8ea;}
    #sideNav .side-menu li:first-child{border-top:1px solid #e6e8ea;}
    #sideNav .side-menu a{
      writing-mode:horizontal-tb;display:flex;align-items:baseline;color:var(--ink);font-size:18px;
      letter-spacing:.08em;padding:14px 0;
    }
    /* the dynamic hover underline doesn't apply here — the li border above is
       already a permanent underline per item, so drop the animated ::after */
    #sideNav .side-menu a::after{display:none;}
    /* the generic desktop rule turns .active white for contrast on navy — on the
       white mobile panel that would be invisible, so override back to a visible
       color and use weight instead to mark the current section */
    #sideNav .side-menu a.active{color:var(--navy);font-weight:700;}
    .side-menu-en{
      display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.06em;
      color:var(--gray);text-transform:uppercase;font-weight:400;
    }
    .mobile-panel-logo{display:flex;justify-content:center;padding-top:26px;}
    .mobile-panel-logo svg{height:24px;width:auto;}

    /* dimmed backdrop behind the panel — tap it (or Esc) to close */
    .nav-backdrop{
      position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);
      opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:190;
    }
    .nav-backdrop.open{opacity:1;pointer-events:auto;}

    /* hamburger morphs into an × while the panel is open, so it always reads as
       a toggle rather than becoming a mystery icon once the menu is showing */
    #navToggle{display:block;}
    #navToggle span{background:#fff;transition:transform .3s ease, opacity .3s ease;}
    #navToggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
    #navToggle.active span:nth-child(2){opacity:0;}
    #navToggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

    .wrap{padding:0 6vw;}
    .hero-content{left:0;}
    .hero-mark{left:50%;}
    .scroll-cue{left:50%;}
    section{padding:90px 0;}
    .adv-grid{grid-template-columns:1fr 1fr;}
    .svc-grid{grid-template-columns:1fr;}
    .team-photo-wrap{margin:34px 0 40px;}
    .work-grid{grid-template-columns:1fr;grid-auto-rows:220px;}
    .work-card.size-lg,.work-card.size-wide,.work-card.size-tall,.work-card.size-hero,.work-card.size-band{grid-column:span 1;grid-row:span 1;}
    .work-head{align-items:flex-start;}
    .more-list{columns:1;}
    .info-line{flex-direction:column;gap:4px;}
    .insights-track .insight-card{flex:0 0 100%;margin-right:0;}
    .insights-head{align-items:flex-start;}
    .brand-row{flex-direction:column;gap:36px;}
    .timeline-top{flex-direction:column;align-items:flex-start;gap:16px;}
    .stat-row{grid-template-columns:repeat(2,1fr);row-gap:24px;}
    .stat-row div:nth-child(3){border-left:none;}
  }

  /* ---------- back to top (scroll-progress ring) ---------- */
  .back-to-top{
    position:fixed;right:28px;bottom:28px;width:56px;height:56px;z-index:150;
    cursor:pointer;opacity:0;pointer-events:none;border:none;background:none;padding:0;
    transition:opacity .3s ease;
  }
  .back-to-top.show{opacity:1;pointer-events:auto;}
  .btt-ring{position:absolute;inset:0;width:56px;height:56px;}
  .btt-ring-bg{fill:#fff;stroke:#e6e8ea;stroke-width:4;}
  .btt-ring-progress{
    fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round;
    stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .1s linear;
  }
  .btt-arrow{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--navy);transition:color .25s ease;
  }
  .btt-arrow svg{width:30px;height:30px;display:block;}
  .back-to-top:hover .btt-ring-bg{fill:var(--navy);}
  .back-to-top:hover .btt-arrow{color:#fff;}
  @media(max-width:640px){
    .back-to-top{right:18px;bottom:18px;width:48px;height:48px;}
    .btt-ring{width:48px;height:48px;}
  }

  /* =========================================================================
     SUB-PAGE TEMPLATES (service-hosting / insights-list / insight-detail /
     work-list / work-detail) — these pages reuse the side nav, back-to-top
     button and footer above, but are their own simpler "inner page" layout
     (a thin back-link header instead of the homepage's full hero, etc.).
     Rules below are scoped to body.subpage so they never leak into index.php,
     which relies on the base rules above (bare html/body/section/footer
     selectors) for its own full-page section rhythm. ========================= */
  body.subpage{
    background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased;
  }

  /* ---------- back header (shared by all 5 sub-pages) ---------- */
  header.page-head{padding:26px 0;border-bottom:1px solid var(--line-light);}
  .back-link{
    display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);
    letter-spacing:.03em;
  }
  .back-link:hover{text-decoration:underline;}
  .back-link .arrow{font-size:17px;line-height:1;transition:transform .25s ease;}
  .back-link:hover .arrow{transform:translateX(-4px);}

  /* ---------- page hero (shared by insights-list.php + work-list.php) ---------- */
  .list-hero{padding:56px 0 40px;}
  .list-hero .kicker{
    display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.2em;color:var(--accent-gold);
    font-weight:600;margin-bottom:16px;
  }
  .list-hero .kicker::before{content:'';width:26px;height:2px;background:var(--accent-gold);}
  .list-hero h1{font-size:clamp(26px,4vw,38px);font-weight:900;color:var(--navy-deep);margin-bottom:14px;}
  .list-hero p{font-size:15px;color:#666;max-width:600px;}

  @media(max-width:640px){
    .page-head{padding-top:80px;}
  }

  /* ---------- service-hosting.php ---------- */
  /* generic section rhythm for this template only — scoped so it can't
     override index.php's own bare `section{padding:130px 0}` rule above */
  body.page-hosting section{padding:44px 0;border-top:1px solid var(--line-light);}
  body.page-hosting section h2{font-size:20px;font-weight:700;color:var(--navy-deep);margin-bottom:22px;}
  body.page-hosting section h2 span{color:var(--accent-gold);}

  .svc-hero{padding:64px 0 44px;}
  .svc-hero .kicker{
    display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.2em;color:var(--accent-gold);
    font-weight:600;margin-bottom:18px;
  }
  .svc-hero .kicker::before{content:'';width:26px;height:2px;background:var(--accent-gold);}
  .svc-hero h1{font-size:clamp(28px,4vw,42px);font-weight:900;color:var(--navy-deep);line-height:1.35;margin-bottom:20px;}
  .svc-hero p{font-size:16px;color:#555;max-width:640px;}

  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  .feature-item{border:1px solid var(--line-light);border-radius:8px;padding:24px 22px;}
  .feature-item h3{font-size:15.5px;font-weight:700;margin-bottom:8px;color:var(--navy-dark);}
  .feature-item p{font-size:13.5px;color:#666;}

  .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .compare-card{background:var(--paper);border-radius:8px;padding:28px 26px;}
  .compare-card h3{font-size:16px;font-weight:700;color:var(--navy-dark);margin-bottom:14px;}
  .compare-card ul{list-style:none;color:#555;font-size:13.5px;}
  .compare-card ul li{margin-bottom:9px;padding-left:16px;position:relative;}
  .compare-card ul li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--accent-gold);border-radius:50%;}

  .audience-list{list-style:none;color:#555;font-size:14.5px;}
  .audience-list li{margin-bottom:10px;padding-left:20px;position:relative;}
  .audience-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent-gold);font-weight:700;}

  .process-steps{counter-reset:step;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .process-steps li{position:relative;padding-top:44px;}
  .process-steps li::before{
    counter-increment:step;content:counter(step);position:absolute;top:0;left:0;
    width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  }
  .process-steps h3{font-size:14.5px;font-weight:700;margin-bottom:6px;color:var(--navy-dark);}
  .process-steps p{font-size:13px;color:#777;}

  .cta-block{background:var(--navy-deep);color:#fff;border-radius:10px;padding:44px 40px;text-align:center;margin:50px 0 70px;}
  .cta-block h2{color:#fff;margin-bottom:12px;}
  .cta-block p{color:rgba(255,255,255,.65);font-size:14.5px;margin-bottom:26px;}
  .cta-btn{
    display:inline-block;background:var(--accent-gold);color:var(--navy-deep);font-weight:700;font-size:14px;
    padding:14px 34px;border-radius:30px;text-decoration:none;letter-spacing:.05em;transition:transform .25s ease;
  }
  .cta-btn:hover{transform:translateY(-3px);}

  @media(max-width:720px){
    .feature-grid,.compare-grid{grid-template-columns:1fr;}
    .process-steps{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:480px){
    .process-steps{grid-template-columns:1fr;}
  }

  /* ---------- insights-list.php ---------- */
  .article-list{padding-bottom:70px;}
  .list-page-grid{display:grid;grid-template-columns:1fr 280px;gap:60px;align-items:start;}
  .article-list-col{min-width:0;}
  .article-row{
    display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px 0;
    border-top:1px solid var(--line-light);align-items:center;
  }
  .article-row:last-child{border-bottom:1px solid var(--line-light);}
  .article-thumb{
    height:140px;border-radius:8px;display:flex;align-items:flex-start;justify-content:flex-end;
    padding:12px;
  }
  /* scoped to .article-thumb: insight-detail.php's standalone hero tag reuses
     the .article-tag class name for a different (solid pill) look, so the two
     are kept apart by ancestor context rather than sharing one flat rule */
  .article-thumb .article-tag{
    display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:11px;
    letter-spacing:.15em;padding:5px 12px;border-radius:20px;
  }
  .article-meta{font-size:12px;letter-spacing:.1em;color:var(--gray);margin-bottom:10px;}
  .article-row h2{font-size:19px;font-weight:700;margin-bottom:10px;line-height:1.5;}
  .article-row h2 a:hover{color:var(--navy);}
  .article-row p{font-size:14px;color:#666;margin-bottom:14px;max-width:560px;}
  .article-more{font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:.05em;}
  .article-more:hover{text-decoration:underline;}
  .no-results{display:none;padding:50px 0;color:var(--gray);font-size:14px;text-align:center;border-top:1px solid var(--line-light);}
  .no-results.show{display:block;}

  .list-sidebar{position:sticky;top:26px;}
  .sidebar-block{margin-bottom:38px;}
  .sidebar-block h3{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-bottom:16px;font-weight:700;}
  .search-box{position:relative;}
  .search-box input{
    width:100%;padding:11px 38px 11px 14px;border:1px solid var(--line-light);border-radius:6px;
    font-size:14px;font-family:inherit;color:var(--ink);
  }
  .search-box input:focus{outline:none;border-color:var(--navy);}
  .search-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--gray);font-size:15px;pointer-events:none;}
  .category-list{list-style:none;}
  .category-list li{border-bottom:1px solid var(--line-light);}
  .category-list li:first-child{border-top:1px solid var(--line-light);}
  .cat-btn{
    display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;
    cursor:pointer;padding:11px 2px;font-size:14px;color:#555;font-family:inherit;text-align:left;
    transition:color .2s ease;
  }
  .cat-btn span{color:var(--gray);font-size:12.5px;}
  .cat-btn:hover{color:var(--navy);}
  .cat-btn.active{color:var(--navy);font-weight:700;}

  @media(max-width:900px){
    .list-page-grid{grid-template-columns:1fr;gap:0;}
    .list-sidebar{position:static;order:-1;margin-bottom:44px;padding-bottom:36px;border-bottom:1px solid var(--line-light);}
  }
  @media(max-width:720px){
    .article-row{grid-template-columns:1fr;gap:18px;}
    .article-thumb{height:120px;}
  }

  /* ---------- insight-detail.php ---------- */
  .article-hero{padding:48px 0 0;}
  /* standalone hero pill — see the .article-thumb .article-tag note above for
     why this is kept separate from insights-list.php's overlay tag */
  .article-hero .article-tag{
    display:inline-block;background:var(--navy);color:#fff;font-size:11.5px;
    letter-spacing:.15em;padding:6px 14px;border-radius:20px;margin-bottom:20px;
  }
  .article-hero h1{font-size:clamp(26px,4vw,36px);font-weight:900;color:var(--navy-deep);line-height:1.5;margin-bottom:18px;}
  .article-meta-row{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--gray);margin-bottom:34px;}
  .article-meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--gray);}
  .article-cover{height:260px;border-radius:10px;margin-bottom:40px;}
  .article-body{padding-bottom:20px;}
  .article-body p{font-size:16px;color:#3a3f44;margin-bottom:22px;}

  .share-block{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:30px 0 60px;border-top:1px solid var(--line-light);margin-top:20px;
  }
  .share-label{font-size:13px;color:var(--gray);letter-spacing:.05em;margin-right:4px;}
  .share-btn{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line-light);background:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s ease, border-color .25s ease;
    font-size:14px;color:var(--navy-dark);
  }
  .share-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
  .share-btn.copied{background:var(--accent-gold);border-color:var(--accent-gold);color:#fff;}

  .article-nav{
    display:flex;justify-content:space-between;gap:20px;padding:30px 0 60px;border-top:1px solid var(--line-light);
  }
  .article-nav a{font-size:13.5px;font-weight:700;color:var(--navy);max-width:45%;}
  .article-nav a:hover{text-decoration:underline;}
  .article-nav .next{text-align:right;margin-left:auto;}
  @media(max-width:640px){
    .article-nav{flex-direction:column;}
    .article-nav .next{text-align:left;margin-left:0;}
  }

  /* ---------- work-list.php ---------- */
  .work-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
  .work-filter-btn{
    font-size:12.5px;padding:7px 16px;border-radius:20px;border:1px solid #d8dbde;background:#fff;
    color:#666;cursor:pointer;font-family:inherit;transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .work-filter-btn:hover{border-color:var(--navy);color:var(--navy);}
  .work-filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .work-empty{display:none;color:#999;font-size:13.5px;padding:20px 0;}
  .work-empty.show{display:block;}

  /* masonry (waterfall) work grid — a different layout from the homepage's
     bento .work-grid, so its card/thumb rules are scoped under .work-masonry
     rather than redefining the shared `.work-card`/`.work-thumb` class names */
  .work-list-section{padding-bottom:80px;}
  .work-masonry{column-count:3;column-gap:24px;}
  .work-masonry .work-card{
    position:relative;display:block;color:#fff;border-radius:10px;overflow:hidden;
    box-shadow:0 6px 24px rgba(20,40,60,.08);transition:transform .4s ease, box-shadow .4s ease;
    break-inside:avoid;margin-bottom:24px;
  }
  .work-masonry .work-card.filtered-out{display:none;}
  .work-masonry .work-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(20,40,60,.2);}
  .work-masonry .work-thumb{width:100%;display:block;transition:transform .5s ease;}
  .work-masonry .work-card:hover .work-thumb{transform:scale(1.06);}
  .work-masonry .work-overlay p{display:-webkit-box;}

  @media(max-width:980px){
    .work-masonry{column-count:2;}
  }
  @media(max-width:640px){
    .work-masonry{column-count:1;}
  }

  /* ---------- work-detail.php ---------- */
  .case-hero{padding:48px 0 0;}
  .case-tag{
    display:inline-block;background:var(--navy);color:#fff;font-size:11.5px;
    letter-spacing:.15em;padding:6px 14px;border-radius:20px;margin-bottom:20px;
  }
  .case-hero h1{font-size:clamp(26px,4vw,36px);font-weight:900;color:var(--navy-deep);line-height:1.5;margin-bottom:18px;}
  .case-meta-row{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--gray);margin-bottom:34px;}
  .case-meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--gray);}
  .case-cover{height:340px;border-radius:10px;margin-bottom:40px;}
  .case-body{padding-bottom:20px;}
  .case-body p{font-size:16px;color:#3a3f44;margin-bottom:22px;}
  .case-link{
    display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);
    margin-bottom:10px;
  }
  .case-link:hover{text-decoration:underline;}

  .case-nav{
    display:flex;justify-content:space-between;gap:20px;padding:30px 0 60px;border-top:1px solid var(--line-light);margin-top:20px;
  }
  .case-nav a{font-size:13.5px;font-weight:700;color:var(--navy);max-width:45%;}
  .case-nav a:hover{text-decoration:underline;}
  .case-nav .next{text-align:right;margin-left:auto;}
  @media(max-width:640px){
    .case-nav{flex-direction:column;}
    .case-nav .next{text-align:left;margin-left:0;}
  }