/* ============================================================
   首页 · 页头落到纸底上（第 46 轮）
   ============================================================
   页头的**结构和导航一个字没动**（Home / Capabilities / Guides /
   Company / FAQ / Get a quote，四个下拉面板全在），这里只解决一件事：
   header.css 里那套配色是给「深色照片首屏」配的 —— `.is-top` 状态下
   背景透明、logo 反白、导航吃浅色令牌。放到新首页的纸底上，
   导航字是浅灰压浅灰，几乎看不见（第一版渲出来就是这样）。

   所以：两种状态一律落到纸底，logo 用原色，导航文字回到墨色系。
   下面每条都排在 header.css 之后，同特异性下后者胜。
   ============================================================ */

header.site,
header.site.is-top{
  background:rgba(226,226,226,.92);
  border-bottom:1px solid rgba(12,12,12,.13);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:none;
  color-scheme:light;
}

/* logo：`.is-top` 那条 filter:brightness(0) invert(1) 会把彩色标反成白块 */
header.site .brand .logo,
header.site.is-top .brand .logo{filter:none;height:32px}

/* style.css 第 539 行的全局 a{text-decoration:none} 也没被抽进来
   （header.css 只收页头规则），于是浏览器默认下划线回来了 —— 下拉里
   每条链接都挂着一条线。这里补上，作用域只到页头。 */
header.site a{text-decoration:none}

/* 导航文字 */
nav.main a{color:#2E2E2E}
nav.main a:hover{background:rgba(12,12,12,.05);color:#0C0C0C}
nav.main a.on{color:#0C0C0C}
nav.main a.on::after,
header.site.is-top nav.main a.on::after{background:#42A646}

/* 报价按钮：**照抄页面里 .btn-primary 那套**（高 46 / 圆角 10 / #42A646 /
   0 10px 26px 阴影 / hover 提亮 + 上移 1px），页头里只是缩到 42 高。
   原来它是 style.css 的老样式（胶囊圆角 + inset 内阴影），和纸底
   新设计里的按钮不是一个东西 —— 用户 2026-10-21 点出来的。 */
nav.main a.cta{
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:0 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:650;
  letter-spacing:.01em;
  background:#42A646;
  color:#fff;
  box-shadow:0 10px 26px rgba(66,166,70,.24);
  border:0;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
nav.main a.cta:hover{
  background:#4CB950;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(66,166,70,.32);
}

/* 下拉面板：纸面 */
.nav-panel{
  background:#F2F2F2;
  border:1px solid rgba(12,12,12,.13);
  box-shadow:0 30px 60px -30px rgba(12,12,12,.45);
}
.nav-feat{background:rgba(12,12,12,.035);border-color:rgba(12,12,12,.13)}
.nav-feat:hover{background:rgba(66,166,70,.09);border-color:rgba(42,110,48,.24)}

/* 下拉左边的推荐卡：b / span 的色走 var(--ink) / var(--mute)，
   `.is-top` 那档把 --ink 换成了浅色（深色页头用），落到纸底上就是
   白字压白卡 —— 截图里那张卡的文字是看不见的。这里钉死墨色。
   另外 style.css 第 537 行有一条全局 img{height:auto}，header.css 只抽
   页头的规则、没带上它，结果 <img height="360"> 的属性值生效，
   4:3 的预览图被拉成 190×360 的长条。 */
.nav-feat b{color:#0C0C0C}
.nav-feat span{color:#686868}
.nav-feat img{height:auto}
.nav-cols a:hover{background:rgba(66,166,70,.09);color:#2A6E30}
.nav-cols a span{color:#686868}
.nav-cols p{color:#808080}

/* ≤1020px：两行页头。header.css 那一档又把 .is-top 强制回深底，
   纸底上那条也得跟着压掉，否则窄屏一进来就是一条深带。 */
@media(max-width:1020px){
  header.site,
  header.site.is-top{
    background:rgba(226,226,226,.97);
    border-bottom-color:rgba(12,12,12,.13);
  }
  header.site .brand .logo,
  header.site.is-top .brand .logo{filter:none;height:28px}
}

/* 锚点跳转的落点：demo 那套按 --head-h:72px 算的，站上页头是 84px，
   差 12px —— 点「What we do」会有一小条被页头吃掉。按 84 + 16 补齐。 */
section[id],.hero{scroll-margin-top:100px}


/* ============================================================
   手机折叠菜单（≤520px，第 59 轮）
   ------------------------------------------------------------
   原来手机上页头是**三行**：logo / Home Capabilities Guides / Company FAQ
   + 单独一行的 Get a quote，约 160px，占掉一屏的 19%，还没开始看正文。

   现在 ≤520 收成一个「≡ Menu」按钮：收起时页头只剩 logo 那一行（约 60px），
   点开在下面展开成竖排列表。是**往下推**而不是浮层盖住 —— 浮层要处理
   z-index、滚动锁、点空白关闭，零 JS 玩不干净，推下来够用。

   ⚠️ 三条硬约束，改之前先读：
     ① input + label 必须排在 nav.main 的**前面**（见 _work/_add_nav.py），
        展开靠 `~` 相邻兄弟选择器。挪到 nav 后面这条就永远打不开。
     ② 真正的复选框要留在文档流外但**可聚焦**（clip-path 那种写法），
        不能用 display:none —— 那样键盘和读屏就完全够不到这个开关了。
     ③ 断点 520 不是拍的：400–480 实测 CTA 会被挤到第三行；≤390 连
        五个文字链接都排不下。520 以上维持原来的两行页头，别往上挪。
   ============================================================ */

.nav-check{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%);
}
.nav-btn{display:none}

@media(max-width:520px){
  .nav-btn{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;
    padding:9px 13px;cursor:pointer;touch-action:manipulation;
    border:1px solid rgba(12,12,12,.16);border-radius:9px;
    background:rgba(255,255,255,.55);
    font-family:var(--font-mono,ui-monospace,monospace);
    font-size:11px;font-weight:600;line-height:1;
    letter-spacing:.14em;text-transform:uppercase;
    color:#2E2E2E;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;user-select:none;
  }
  .nav-btn .bars{display:flex;flex-direction:column;justify-content:center;gap:3.5px;width:13px;height:11px}
  .nav-btn .bars i{
    display:block;height:1.5px;border-radius:1px;background:currentColor;
    transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .16s linear;
  }
  .nav-check:checked ~ .nav-btn .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav-check:checked ~ .nav-btn .bars i:nth-child(2){opacity:0}
  .nav-check:checked ~ .nav-btn .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  /* 复选框本体看不见，键盘走到它时焦点环画在按钮上 */
  .nav-check:focus-visible ~ .nav-btn{outline:2px solid #2F7D35;outline-offset:3px}

  nav.main{display:none}
  .nav-check:checked ~ nav.main{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    width:100%;margin-top:var(--s-3,16px);
    border-top:1px solid rgba(12,12,12,.14);
  }
  /* ⚠️ width:100% 得显式写。`.nav-grp` 平时是 shrink-to-fit，光靠父级的
     align-items:stretch 撑不满 —— 第一版没写，Capabilities / Guides / Company
     那三行底下的细线只到文字右边就断了，和 Home / FAQ 的两条长短不一。 */
  .nav-check:checked ~ nav.main > a,
  .nav-check:checked ~ nav.main > .nav-grp{display:block;width:100%}

  .nav-check:checked ~ nav.main > a,
  .nav-check:checked ~ nav.main > .nav-grp > .nav-top{
    /* display:block 不能省：.nav-top 平时是 inline-flex（右端带 chevron），
       不换成 block 就是 shrink-to-fit，底下的细线只到文字右边就断。 */
    display:block;padding:15px 2px;
    border-bottom:1px solid rgba(12,12,12,.10);
    /* ⚠️ radius 必须清零。header.css 给 nav.main a 配了 --r-sm，那是给横排
       的悬停底色用的；只剩一条下边框时，圆角会把线的两端往上翘，渲出来
       像一个个浅 U 形小框，而不是行分隔线。 */
    border-radius:0;
    font-size:15px;line-height:1.2;color:var(--ink,#0C0C0C);
  }
  /* ⚠️ 首页（header.site.is-top）必须单独压一次颜色。它平时是压在首屏照片
     上的深底页头，链接色是浅的；≤1020 换成纸色背景之后，那套浅色就成了
     白字白底 —— 第一版在首页上整个菜单是隐形的。这里比那条规则高两档。 */
  header.site .nav-check:checked ~ nav.main > a,
  header.site .nav-check:checked ~ nav.main > .nav-grp > .nav-top{color:#0C0C0C}
  /* 当前页的绿色下划线在横排里是指示，竖排里会和行分隔线叠成两条。
     ⚠️ 选择器不能再写 `> a.on` —— Capabilities / Guides / Company 的当前项
     挂在外层 `.nav-grp` 里（`a.nav-top.on`），子孙选择器才盖得住；
     用子选择器时 contact 页那行会留一条 2px 的绿线在分隔线上。 */
  header.site .nav-check:checked ~ nav.main a.on::after{display:none}

  /* CTA 是最后一项，写成药丸、不铺满，也不要有分隔线
     （width:auto 必须写回来 —— 上面那条把直接子级 a 全设成了 100%） */
  .nav-check:checked ~ nav.main a.cta{
    display:inline-block;width:auto;align-self:flex-start;margin:16px 0 2px;
    padding:12px 22px;border-radius:999px;font-size:14px;
    border-bottom:0;
  }
  /* 展开动画：只在用户没要求减少动效时给 */
  @media(prefers-reduced-motion:no-preference){
    .nav-check:checked ~ nav.main{animation:navdrop .2s cubic-bezier(.32,.72,0,1)}
    @keyframes navdrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  }
}

/* ============================================================
   二级手风琴（2026-10-26 第 89 轮）
   ------------------------------------------------------------
   第 88 轮量出来的洞：≤1020 时 `.nav-panel{display:none}`，手机上
   Capabilities / Guides / Company 下面的二级链接在菜单里根本点不到。
   这里只在 ≤520（也就是汉堡菜单那一档）把它们展开成手风琴。

   写法就是第 59 轮 #nav-open 那一套，原样复制：
     ① `.nav-sub` 必须排在自己的 `.nav-top` / `.nav-panel` **前面**（靠 `~`）
     ② 复选框 clip-path 藏起来但**保持可聚焦**，不能 display:none
     ③ 展开用 `.nav-sub:checked ~ .nav-panel`，零 JS

   ⚠️ 特异性：`.nav-check:checked ~ nav.main > .nav-grp` 是 (0,4,1)，
      而 `.nav-grp` 只有 (0,1,0) —— 想把分组从 block 改成 grid 必须
      **原样带上那串前缀**，否则被 164 行那条压住，箭头和标题会分两行。
   ⚠️ 521–1020 没动：那一档是横排页头，抽屉在那里展开是另一种排版。
   ============================================================ */
.nav-sub{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%);
}
.nav-sub-btn{display:none}

@media(max-width:520px){
  /* 分组变成「标题 | 箭头」两格，箭头那一格高 100% 以便和标题同高 */
  .nav-check:checked ~ nav.main > .nav-grp{
    display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:stretch;
  }
  .nav-check:checked ~ nav.main > .nav-grp > .nav-top{grid-column:1}
  .nav-sub-btn{
    display:flex;grid-column:2;align-items:center;justify-content:center;
    cursor:pointer;touch-action:manipulation;
    border-bottom:1px solid rgba(12,12,12,.10);
    -webkit-tap-highlight-color:transparent;
  }
  /* CSS 画的箭头：比再插一个 SVG 省事，也不怕 .chev 在 ≤1020 被 display:none */
  .nav-sub-btn i{
    display:block;width:8px;height:8px;margin-top:-3px;
    border-right:1.5px solid #5B5B5B;border-bottom:1.5px solid #5B5B5B;
    transform:rotate(45deg);
    transition:transform .2s cubic-bezier(.32,.72,0,1);
  }
  .nav-sub:checked ~ .nav-sub-btn i{transform:rotate(-135deg);margin-top:3px}
  .nav-sub:focus-visible ~ .nav-sub-btn{outline:2px solid #2F7D35;outline-offset:-4px}

  /* 悬停桥在竖排里是块「隐形挡板」：它高 14px、挂在分组底部，
     收起时正好压在下一条菜单行（Blog / Company / CTA）的上沿，
     手指点在那一带会被它吃掉。桌面需要它（鼠标从链接走到抽屉不能断），
     手机没有 hover，直接关掉。 */
  .nav-check:checked ~ nav.main > .nav-grp::after{display:none}

  /* 展开后的抽屉：把桌面那套 fixed 浮层全部还原成文档流里的一块。
     ⚠️ top / right / width / z-index 都得显式清零 —— 桌面那条是
     `position:fixed; top:calc(--header-h - --nav-bridge); right:…; width:max-content`，
     只写 position:static 的话 top/right 仍在，会把 static 盒子顶偏。 */
  .nav-sub:checked ~ .nav-panel{
    display:block;grid-column:1 / -1;
    position:static;top:auto;right:auto;left:auto;bottom:auto;
    width:auto;max-width:none;z-index:auto;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    /* 底部只留 2px：展开区下面紧跟的就是下一行的分隔线，
       留 14px 会在「Production capacity」和「Guides」之间空出一条 40px 的缝 */
    margin:0;padding:0 0 2px;
    background:none;border:0;border-radius:0;box-shadow:none;
    /* 桌面那条 transition 带 `visibility 0s linear --dur-2` 的延迟，
       留着会让展开慢半拍；这里展开是瞬时的，动效交给下面的 keyframes */
    transition:none;
  }
  /* 左栏那张 feature 卡在手机上是纯负担：图 4:3、还占掉半屏，第一行就是父链接 */
  .nav-sub:checked ~ .nav-panel .nav-feat{display:none}
  /* 抽屉里的多栏一律收成一栏；副标题在手机上只会让每条变两行高 */
  .nav-sub:checked ~ .nav-panel .nav-cols,
  .nav-sub:checked ~ .nav-panel .nav-cols.tri{
    display:block;padding-left:2px;
  }
  .nav-sub:checked ~ .nav-panel .nav-cols > div{padding:0 0 2px}
  /* 第一组小标题离分组行太近就贴脸、太远就断开；6px 是看着正好的一档 */
  .nav-sub:checked ~ .nav-panel .nav-cols > div:first-child > p{margin-top:6px}
  .nav-sub:checked ~ .nav-panel .nav-cols p{
    margin:var(--s-3,14px) 0 2px;padding:0 14px;
    font-size:10.5px;letter-spacing:.12em;
  }
  .nav-sub:checked ~ .nav-panel .nav-cols a{
    padding:10px 14px;font-size:14px;line-height:1.3;border-radius:8px;
  }
  .nav-sub:checked ~ .nav-panel .nav-cols a span{display:none}
  @media(prefers-reduced-motion:no-preference){
    .nav-sub:checked ~ .nav-panel{animation:navsubdrop .18s cubic-bezier(.32,.72,0,1)}
    /* 自己定义一份，不借第 198 行那个 navdrop —— 那个 keyframes 嵌在
       另一个 @media 里，挪动顺序时会莫名其妙失效 */
    @keyframes navsubdrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  }
}


/* ============================================================
   平板档的二级菜单（521–1020px，第 96 轮）
   ------------------------------------------------------------
   第 88 轮量出来的洞：style.css 在 ≤1020 写了 `.nav-panel{display:none}`，
   理由是这一档没有 hover（触屏），而 fixed + right:0 的面板会向左溢出屏幕。
   结果 24 条二级链接在 521–1020 完全点不到，只有顶层的栏目页能进。

   这里不推翻那个判断，只换一个不溢出的开法：
     · 面板 absolute 挂在 nav.main 下沿，left:0 / right:0 贴着页头宽度
     · 每个分组右端多一枚箭头（.nav-sub-btn 第 89 轮就插好了标记），点它展开
     · 仍然零 JS，靠 :checked

   ⚠️ 三条约束：
     ① 范围必须写成 min-width:521px and max-width:1020px。只写 max-width:1020px
        的话，本文件末尾的位置会让它盖住 ≤520 那套手风琴（同特异性、后写赢）。
     ② .nav-feat（面板左侧那张大图卡）在窄屏要收掉，否则 224px 一列把
        链接挤成一条缝。680 以下直接单列。
     ③ 面板的 transition 要清掉。基类靠 visibility 淡出、delay 藏着，
        这里改成「点开就立刻在」，避免点一下没反应的错觉。
   ============================================================ */

@media(min-width:521px) and (max-width:1020px){
  /* 面板的包含块要从分组挪到整条导航（style.css:759 是 relative） */
  nav.main{position:relative}
  .nav-grp{position:static}
  /* 桌面那 14px 悬停桥：这一档没有 hover，static 之后它还会透明地压在面板顶上吃点击 */
  .nav-grp::after{display:none}

  /* 宽度是量出来的，不是拍的：这一档导航几乎贴满（560 那档内容比导航宽 1px
     就得折行），箭头占多少就要多折一次页头。26px 宽那种「正常尺寸」在
     561–584 这一段会把页头从 123 顶到 161（多一整行）。
     用 right 侧负 margin 把盒子推进前面那道 2px 缝里，净增只有 8px：
       · 左缘压住自己链接的 2px —— 落在 a 的 --s-3 内边距里，字没被抢
       · 右缘伸到下一项前的 +14px，而下一项的字从 +16px 才开始（2px 缝 + 自己的内边距）
     盒子盖在后面的项上面，所以点箭头不会被下一项截走（z-index）。 */
  .nav-sub-btn{
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:2;
    width:16px;height:36px;margin-left:-2px;margin-right:-6px;
    cursor:pointer;touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  }
  /* CSS 画的箭头：和 ≤520 手风琴那枚同一套写法 */
  .nav-sub-btn i{
    display:block;width:8px;height:8px;margin-top:-4px;
    border-right:1.6px solid #5B5B5B;border-bottom:1.6px solid #5B5B5B;
    transform:rotate(45deg);
    transition:transform .18s cubic-bezier(.32,.72,0,1);
  }
  .nav-sub:checked ~ .nav-sub-btn i{transform:rotate(-135deg);margin-top:5px}
  .nav-sub:focus-visible ~ .nav-sub-btn{outline:2px solid #2F7D35;outline-offset:-2px;border-radius:6px}
  .nav-sub:checked ~ .nav-panel{
    display:grid;
    position:absolute;top:100%;left:0;right:0;
    width:auto;max-width:none;margin-top:6px;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:none;
  }
}

/* 521–680 只有一条缝那么宽：feature 卡收掉，其余压成一栏 */
@media(min-width:521px) and (max-width:680px){
  .nav-sub:checked ~ .nav-panel{grid-template-columns:minmax(0,1fr)}
  .nav-sub:checked ~ .nav-panel .nav-feat{display:none}
}