/* Pencil Glow Designs: header, menu button and menu, matched to pencilglow.com (November 2026).
   The values below are the main site's. Change them there first, then here. */
.agency-header,.agency-menu{--surface:#0B0B0F;--surface-raised:#17171D;--ink:#FFFFFF;--muted:#B4B4C0;--line:#2A2A33;--accent:#00BBFE;--radius:4px;--motion-duration:160ms;--motion-ease:cubic-bezier(0.23,1,0.32,1)}
html[data-theme=light] .agency-header,html[data-theme=light] .agency-menu{--surface:#FFFFFF;--surface-raised:#F7F6FA;--ink:#0B0B0F;--muted:#5A5E6C;--line:#E4E3EC;--accent:#7028FC}
@media(prefers-color-scheme:light){
  html:not([data-theme]) .agency-header,html:not([data-theme]) .agency-menu{--surface:#FFFFFF;--surface-raised:#F7F6FA;--ink:#0B0B0F;--muted:#5A5E6C;--line:#E4E3EC;--accent:#7028FC}
}

/* Header */
.agency-header{box-sizing:border-box;position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;height:96px;min-height:0;margin:0;padding:8px 4.4vw;gap:20px;background:var(--surface);color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;backdrop-filter:none;font:15px/1.4 'Barlow',Arial,sans-serif;letter-spacing:normal;text-transform:none}
.agency-header .brand-logo{display:flex;align-items:center;gap:14px;flex:none;line-height:0;color:inherit;text-decoration:none}
.agency-header .brand-mark{display:block;width:260px;line-height:0}
.agency-header .brand-mark img{position:static;display:none;width:100%;height:auto;max-width:none;filter:none;transform:none}
.agency-header .brand-mark .mark-dark{display:block}
html[data-theme=light] .agency-header .brand-mark .mark-dark{display:none}
html[data-theme=light] .agency-header .brand-mark .mark-light{display:block}
@media(prefers-color-scheme:light){
  html:not([data-theme]) .agency-header .brand-mark .mark-dark{display:none}
  html:not([data-theme]) .agency-header .brand-mark .mark-light{display:block}
}
.agency-header .brand-site{padding-left:14px;border-left:1px solid var(--line);color:var(--accent);font:600 10px/1.6 'Barlow',Arial,sans-serif;letter-spacing:.16em}
.agency-header .header-actions{display:flex;align-items:center;gap:12px;min-width:0}
.agency-header .header-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;text-decoration:none}
.agency-header .menu-button{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;margin:0;appearance:none;background:transparent;color:var(--ink);border:0;border-radius:var(--radius);box-shadow:none;cursor:pointer;overflow:hidden}
.agency-header .menu-button:focus:not(:focus-visible){outline:none}
.agency-header .theme-toggle{position:relative;display:grid;place-items:center;flex:none;box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px;padding:10px;margin:0;appearance:none;background:none;border:0;border-radius:var(--radius);color:var(--ink);box-shadow:none;cursor:pointer;overflow:visible;transition:transform 160ms ease-out}
.agency-header .theme-toggle .theme-icon{grid-area:1/1;width:20px;height:20px;display:none;transform-origin:center;stroke-width:1.75}
.agency-header .theme-toggle .theme-icon-sun{display:block}
html[data-theme=light] .agency-header .theme-toggle .theme-icon-sun{display:none}
html[data-theme=light] .agency-header .theme-toggle .theme-icon-moon{display:block}
.agency-header .theme-toggle:active{transform:scale(.92)}
.agency-header .menu-lines{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:22px;pointer-events:none}
.agency-header .menu-lines>span{display:block;flex:0 0 2px;width:22px;height:2px;background:currentColor;transform-origin:center;transition:transform var(--motion-duration) var(--motion-ease)}
.agency-header .menu-button[aria-expanded=true] .menu-lines>span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.agency-header .menu-button[aria-expanded=true] .menu-lines>span:nth-child(2){transform:scaleX(0)}
.agency-header .menu-button[aria-expanded=true] .menu-lines>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu */
.agency-menu.main-menu-panel{box-sizing:border-box;position:fixed;inset:0;margin:18px auto auto;width:calc(100% - 36px);max-width:1400px;height:fit-content;max-height:calc(100svh - 36px);overflow:auto;padding:30px 40px 24px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;font:16px/1.5 'Barlow',Arial,sans-serif}
.agency-menu:not([open]){display:none}
.agency-menu::backdrop{background:#0b0B0F99;backdrop-filter:blur(8px);opacity:1;transition:opacity .24s cubic-bezier(.23,1,.32,1)}
.agency-menu.menu-closing::backdrop{opacity:0}
@starting-style{.agency-menu[open]::backdrop{opacity:0}}
.agency-menu .menu-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em}
.agency-menu .menu-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--ink);font:inherit;letter-spacing:inherit;cursor:pointer}
.agency-menu .menu-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:8%;padding:28px 0}
.agency-menu .menu-layout nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:0;width:auto;background:none;box-shadow:none;border:0;color:inherit}
.agency-menu .menu-layout nav a{display:block;font:700 clamp(28px,3vw,40px)/1.1 'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:0;padding:0;color:var(--ink);text-decoration:none;transition:transform var(--motion-duration) var(--motion-ease)}
.agency-menu .menu-layout nav a[aria-current]{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.agency-menu .menu-feature{align-self:center;min-width:0;padding:30px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius)}
.agency-menu .menu-feature p{margin:0;font:15px/1.7 'Barlow',Arial,sans-serif;color:var(--muted)}
.agency-menu .menu-feature p+p{margin-top:12px}
.agency-menu .menu-feature .menu-eyebrow{font-size:12px;letter-spacing:.08em}
.agency-menu .menu-feature .menu-feature-title{font:700 48px/1.02 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:0;text-transform:uppercase;color:var(--ink);margin:20px 0}
.agency-menu .menu-feature .menu-eyebrow,.agency-menu .menu-feature a{color:var(--accent)}
.agency-menu .menu-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;font:14px/1.5 'Barlow',Arial,sans-serif}
.agency-menu .preferences{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.agency-menu .preferences select{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:8px;font:14px 'Barlow',Arial,sans-serif}
.agency-menu .motion{display:flex;align-items:center;gap:6px}
.agency-menu input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.agency-header :is(a,button):focus-visible,.agency-menu :is(a,button,select,input):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.agency-header .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  .agency-menu .menu-layout nav a:hover{transform:translateX(6px);color:var(--accent)}
  .agency-header .header-services:hover,.agency-header .theme-toggle:hover .theme-icon{color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){
  .agency-menu::backdrop{transition:none}
  .agency-header .menu-lines>span,.agency-menu .menu-layout nav a,.agency-header .theme-toggle{transition:none}
}
html.user-reduced-motion .agency-menu::backdrop,html.user-reduced-motion .agency-header .menu-lines>span,html.user-reduced-motion .agency-menu .menu-layout nav a{transition:none}

/* Smaller screens: the same steps as the main site */
@media(max-width:1000px){
  .agency-header .brand-mark{width:220px}
  .agency-header .header-actions{gap:10px}
}
@media(max-width:760px){
  .agency-menu.main-menu-panel{margin:10px auto auto;width:calc(100% - 20px);max-height:calc(100svh - 20px);padding:24px}
  .agency-menu .menu-layout{grid-template-columns:1fr;gap:0}
  .agency-menu .menu-feature{display:none}
  .agency-menu .menu-layout nav a{font-size:32px}
  .agency-menu .menu-layout nav{gap:14px}
}
@media(max-width:640px){
  .agency-header{height:80px;padding:8px 16px;gap:8px}
  .agency-header .brand-mark{width:180px}
  .agency-header .brand-logo{gap:10px}
  .agency-header .brand-site{padding-left:10px;font-size:9px;letter-spacing:.12em}
  .agency-header .header-actions{gap:8px}
}
@media(max-width:559px){
  .agency-header .header-services{display:none}
  .agency-header .brand-mark{width:132px}
}
@media(max-width:360px){
  .agency-header .brand-mark{width:116px}
  .agency-header .header-actions{gap:6px}
}
@media(max-width:340px){
  .agency-header .brand-site{display:none}
}