.portfolio-header .icon-button { border-radius:10px; }
.portfolio-header .header-inner { position:relative; gap:18px; }
.portfolio-navigation { display:flex; align-items:center; justify-content:center; gap:3px; margin-left:auto; }
.nav-disclosure { position:static; }
.nav-trigger,.nav-direct {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 12px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.2px;
  line-height:1.5;
  white-space:nowrap;
  transition:color .16s;
}
.nav-trigger { list-style:none; cursor:pointer; user-select:none; }
.nav-trigger::marker,.nav-trigger::-webkit-details-marker { display:none; }
.nav-trigger::after,.nav-direct::after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  background:var(--purple-ink);
  opacity:0;
  transform:scaleX(.3);
  transform-origin:left;
  transition:opacity .16s,transform .18s;
}
.nav-trigger:hover,.nav-direct:hover,.nav-disclosure[open]>.nav-trigger,.nav-disclosure.is-current>.nav-trigger,.nav-direct.is-current { color:var(--ink); }
.nav-trigger:hover::after,.nav-direct:hover::after,.nav-disclosure[open]>.nav-trigger::after,.nav-disclosure.is-current>.nav-trigger::after,.nav-direct.is-current::after { opacity:1; transform:scaleX(1); }
.nav-chevron { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.nav-disclosure[open] .nav-chevron { transform:rotate(180deg); }
.nav-panel {
  position:absolute;
  left:50%;
  top:calc(100% - 1px);
  z-index:20;
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  width:min(920px,calc(100vw - 64px));
  border:1px solid var(--line);
  border-top:3px solid var(--dark-button);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 22px 50px #20202c1c,0 3px 10px #20202c08;
  transform:translateX(-50%);
}
.nav-panel::before { content:""; position:absolute; top:-30px; left:0; width:100%; height:30px; }
.nav-disclosure[open] .nav-panel { animation:nav-panel-enter .15s ease-out; }
.nav-panel-heading {
  grid-column:1;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:17px;
  padding:30px 24px;
  border-radius:8px 0 0 10px;
  background:var(--dark-button);
  color:var(--button-ink);
}
.nav-panel-heading p { margin:0; font-family:'Space Grotesk','Google Sans Flex',sans-serif; font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-1.4px; }
.nav-panel-heading>span { max-width:18ch; font-size:13px; line-height:1.65; opacity:.78; }
.nav-panel-heading>.nav-rail-symbol { width:52px; height:52px; margin-top:auto; padding-top:26px; box-sizing:content-box; opacity:.65; stroke-width:1.2; }
.nav-services-layout,.nav-products-layout,.nav-project-columns { grid-column:2; grid-row:1; padding:24px; min-width:0; }
.nav-service-list { display:grid; }
.nav-entry { display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:16px; padding:18px 12px; border-bottom:1px solid var(--line); border-radius:6px; transition:background .16s,box-shadow .16s; }
.nav-entry:hover { background:var(--lavender); box-shadow:inset 3px 0 var(--purple); }
.nav-entry-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:8px; color:var(--purple-ink); background:var(--surface); }
.nav-entry-icon>.icon { width:21px; height:21px; }
.nav-entry-copy { display:flex; flex-direction:column; min-width:0; gap:5px; }
.nav-entry-copy strong { font-size:15px; line-height:1.4; font-weight:700; letter-spacing:-.2px; }
.nav-entry-copy>span { color:var(--muted); font-size:12px; line-height:1.5; }
.nav-entry-arrow { width:20px; height:20px; color:var(--muted); transition:transform .16s,color .16s; }
.nav-entry:hover .nav-entry-arrow { transform:translateX(4px); color:var(--purple-ink); }
.nav-panel-footer { grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); padding:18px 26px; color:var(--purple-ink); }
.nav-panel-footer>a { display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:650; }
.nav-panel-footer .icon { width:16px; height:16px; transition:transform .16s; }
.nav-panel-footer>a:hover .icon { transform:translateX(4px); }
.nav-products-layout { display:flex; flex-direction:column; gap:24px; }
.nav-product-feature { display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:15px; row-gap:4px; align-items:center; padding:18px; border:1px solid #648b6d22; border-radius:8px; background:#e6eee9; transition:background .18s; }
.nav-product-feature:hover { background:#dbe8df; }
.nav-product-icon { grid-column:1; grid-row:1 / span 3; display:grid; place-items:center; width:44px; height:44px; border:1px solid #648b6d44; border-radius:8px; color:#426650; }
.nav-product-icon .icon { width:23px; height:23px; }
.nav-group-label { font-size:11px; color:var(--muted); margin:0 0 10px; }
.nav-product-feature>.nav-group-label { grid-column:2; grid-row:1; margin:0; }
.nav-product-feature>strong { grid-column:2; grid-row:2; font-family:'Space Grotesk','Google Sans Flex',sans-serif; font-size:25px; line-height:1.2; font-weight:650; letter-spacing:-.9px; }
.nav-product-description { grid-column:2; grid-row:3; font-size:12px; color:var(--muted); line-height:1.65; }
.nav-product-link { grid-column:3; grid-row:1 / span 3; display:flex; align-items:center; gap:12px; padding-left:12px; font-size:12px; font-weight:650; }
.nav-product-link .icon { width:18px; height:18px; transition:transform .16s; }
.nav-product-feature:hover .nav-product-link .icon { transform:translateX(4px); }
.nav-addon-heading { display:flex; align-items:center; gap:12px; margin:0 0 10px; }
.nav-addon-heading>img { width:34px; height:34px; border-radius:8px; object-fit:cover; }
.nav-addon-heading>div { display:grid; gap:3px; }
.nav-addon-heading strong { font-size:16px; font-weight:700; letter-spacing:-.2px; }
.nav-addon-heading span { color:var(--muted); font-size:11px; }
.nav-addon-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.nav-addon-link { border-radius:6px; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; border-bottom:1px solid var(--line); padding:12px 8px; font-size:13px; font-weight:600; line-height:1.4; transition:background .16s,color .16s; }
.nav-addon-link>.icon { flex-shrink:0; width:16px; height:16px; color:var(--muted); transition:transform .16s; }
.nav-addon-link:hover { background:var(--lavender); color:var(--purple-ink); }
.nav-addon-link:hover>.icon { transform:translate(2px,-2px); }
.nav-project-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.nav-project-group+.nav-project-group { border-left:1px solid var(--line); padding-left:22px; }
.nav-project-group>.nav-group-label { margin-left:8px; font-size:12px; }
.nav-project-entry { grid-template-columns:34px minmax(0,1fr) 17px; gap:10px; padding:16px 8px; }
.nav-project-entry .nav-entry-icon { width:34px; height:34px; }
.nav-project-entry .nav-entry-icon .icon { width:18px; height:18px; }
.nav-project-entry .nav-entry-copy strong { font-size:14px; }
.nav-project-entry .nav-entry-copy>span { font-size:11px; }
.nav-project-entry .nav-entry-arrow { width:16px; height:16px; }
.nav-mobile-contact { display:none; }
.portfolio-header .header-actions { gap:10px; }
.portfolio-header .header-contact { padding:11px 17px; border:1px solid var(--dark-button); border-radius:8px; background:var(--dark-button); color:var(--button-ink); font-size:13px; gap:19px; }
.portfolio-header .header-contact:hover { background:var(--purple-ink); border-color:var(--purple-ink); color:var(--bg); }
.nav-toggle .nav-close-icon { display:none; }
.nav-toggle[aria-expanded=true] .nav-menu-icon { display:none; }
.nav-toggle[aria-expanded=true] .nav-close-icon { display:block; }
.portfolio-navigation :is(a,summary):focus-visible,.nav-toggle:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
:root[data-theme=dark] .nav-panel { box-shadow:0 22px 50px #0006; }
:root[data-theme=dark] .nav-product-feature { background:#26382e; border-color:#b9d4bf22; }
:root[data-theme=dark] .nav-product-feature:hover { background:#304738; }
:root[data-theme=dark] .nav-product-icon { color:#b9d4bf; border-color:#b9d4bf44; }
@keyframes nav-panel-enter { from { opacity:0; transform:translate(-50%,6px); } to { opacity:1; transform:translate(-50%,0); } }
@media(max-width:1100px) and (min-width:1001px) {
  .portfolio-header .header-inner { gap:10px; }
  .nav-trigger,.nav-direct { padding-inline:8px; font-size:12px; }
  .portfolio-header .header-contact { padding-inline:12px; gap:10px; }
}
@media(max-width:1000px) {
  .portfolio-header .header-inner { min-height:76px; height:auto; flex-wrap:wrap; }
  .navigation-ready .portfolio-header .header-inner { height:76px; flex-wrap:nowrap; }
  .portfolio-header .wordmark { flex:1; }
  .portfolio-header .header-contact { display:none; }
  .portfolio-header .header-actions { margin-left:auto; }
  .portfolio-header .nav-toggle { display:inline-flex; }
  .portfolio-navigation { flex:1 0 100%; order:3; display:block; margin:0 0 18px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--dark-button); border-radius:12px; }
  .navigation-ready .portfolio-navigation { position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:25; margin:0; max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; box-shadow:0 18px 40px #20202c1c; }
  .nav-trigger,.nav-direct { justify-content:space-between; font-size:16px; padding:16px 9px; font-weight:700; border-radius:6px; }
  .nav-trigger::after,.nav-direct::after { display:none; }
  .nav-disclosure[open]>.nav-trigger { color:var(--purple-ink); background:var(--lavender); box-shadow:inset 3px 0 var(--purple); }
  .nav-disclosure { border-bottom:1px solid var(--line); }
  .nav-direct { border-bottom:1px solid var(--line); }
  .nav-panel { display:block; position:static; width:auto; padding:12px 0 0; border:0; border-radius:0; background:transparent; box-shadow:none!important; transform:none; }
  .nav-panel::before,.nav-panel-heading { display:none; }
  .nav-disclosure[open] .nav-panel { animation:none; }
  .nav-services-layout,.nav-products-layout,.nav-project-columns { padding:0; }
  .nav-products-layout { gap:20px; }
  .nav-entry { padding:15px 8px; gap:10px; grid-template-columns:36px minmax(0,1fr) 17px; }
  .nav-entry-icon { width:36px; height:36px; }
  .nav-entry-copy strong { font-size:14px; }
  .nav-entry-copy>span { font-size:11px; }
  .nav-entry-arrow { width:17px; height:17px; }
  .nav-panel-footer { padding:17px 8px; margin-top:15px; }
  .nav-panel-footer>a { font-size:12px; }
  .nav-product-feature { grid-template-columns:38px minmax(0,1fr); padding:16px; column-gap:12px; }
  .nav-product-icon { width:38px; height:38px; }
  .nav-product-feature>strong { font-size:24px; }
  .nav-product-link { grid-column:2; grid-row:4; padding:8px 0 0; }
  .nav-addon-grid { gap:0 10px; }
  .nav-addon-link { font-size:12px; min-height:54px; padding:11px 5px; }
  .nav-addon-heading strong { font-size:15px; }
  .nav-project-columns { grid-template-columns:1fr; gap:22px; }
  .nav-project-group+.nav-project-group { border:0; padding:0; }
  .nav-mobile-contact { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px; margin:14px 0 6px; border-radius:8px; background:var(--dark-button); color:var(--button-ink); font-size:14px; font-weight:650; }
  .nav-mobile-contact .icon { width:18px; height:18px; }
}
@media(max-width:560px) {
  .navigation-ready .portfolio-header .header-inner { height:72px; }
  .portfolio-header .header-inner { min-height:72px; }
  .navigation-ready .portfolio-navigation { max-height:calc(100dvh - 90px); }
}
@media(prefers-reduced-motion:reduce) { .portfolio-header * { animation:none!important; transition:none!important; } }