/* Tactile quick-link buttons, keeping the site's quiet editorial layout. */
.link-hub { display:grid; grid-template-columns:minmax(220px,.78fr) minmax(0,1.65fr); gap:clamp(2rem,6vw,6.5rem); align-items:start; padding-top:clamp(4rem,8vw,8rem); padding-bottom:clamp(4rem,8vw,8rem); scroll-margin-top:90px; }
.link-hub-intro { position:sticky; top:130px; }
.link-hub-intro .section-kicker { color:#9eb7c6; letter-spacing:.18em; line-height:1.7; text-align:left !important; }
.link-hub-intro h2 { margin:1.25rem 0 1.4rem; max-width:10ch; font-size:clamp(2.25rem,4vw,4rem); font-weight:600; line-height:1.13; letter-spacing:-.045em; overflow-wrap:anywhere; text-wrap:balance; }
.link-hub-intro p { max-width:31ch; margin:0; color:#a9afb5; font-size:.98rem; line-height:1.8; }
.link-hub-more { display:inline-flex; align-items:center; gap:1.5rem; margin-top:2rem; font-size:.8rem; color:#c8d4dc; text-decoration:none; }
.link-hub-more span { transition:transform .25s; }
.link-hub-more:hover span { transform:translateY(4px); }
.link-hub-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.link-hub-item { min-width:0; scroll-margin-top:100px; }
.hub-link { --hub-accent:#b8c8cf; position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) 18px; align-items:center; gap:14px; min-height:116px; height:100%; padding:20px; border:1px solid rgba(186,206,218,.2); border-radius:17px; background:linear-gradient(120deg,rgba(178,205,223,.075),rgba(178,205,223,.025)); color:#f1f3f5; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .25s,background-color .25s,transform .25s; }
.hub-link:focus-visible { outline:2px solid #b7d3e6; outline-offset:4px; }
.link-hub-more:focus-visible { outline:2px solid #b7d3e6; outline-offset:5px; border-radius:3px; }
.hub-link-icon { display:grid; place-items:center; width:40px; height:40px; color:var(--hub-accent); background:color-mix(in srgb,var(--hub-accent) 8%,transparent); border-radius:12px; }
.hub-link-icon svg { width:25px; height:25px; display:block; }
.hub-link-copy { display:grid; gap:.4rem; min-width:0; }
.hub-link-title { font-size:clamp(1.03rem,1.3vw,1.25rem); font-weight:550; line-height:1.35; letter-spacing:-.02em; overflow-wrap:anywhere; text-wrap:balance; }
.hub-link-description { font-size:.78rem; line-height:1.6; color:#adb4bc; overflow-wrap:anywhere; }
.hub-link-arrow { width:18px; height:18px; color:var(--hub-accent); opacity:.8; transition:transform .25s,opacity .25s; }
.hub-link:active { background-color:rgba(161,194,219,.1); }
@media (hover:hover) and (pointer:fine) {
    .hub-link:hover { border-color:var(--hub-accent); background-color:rgba(161,194,219,.07); transform:translateY(-2px); }
    .hub-link:hover .hub-link-arrow { transform:translateX(3px); opacity:1; }
}
.hub-link-preview { font-size:.59rem; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:#aca8d0; }
.hub-link--unvrsl { --hub-accent:#bdd1cb; }
.hub-link--raze { --hub-accent:#bec4e0; }
.hub-link--ipg { --hub-accent:#c9c1d6; }
.hub-link--gallery { --hub-accent:#b7d1d9; }
.hub-link--training { --hub-accent:#b2cdbd; }
.hub-link--zuabo { --hub-accent:#beb5db; }
.hub-link--web { --hub-accent:#a9c7e2; }
.hub-link--photo { --hub-accent:#cfbed0; }
.hub-link--prints { --hub-accent:#c9c7b4; }
/* Appearance is driven by the CMS, not by an entry's position or brand. */
.hub-link--ink-light { --hub-ink:#fff; --hub-muted:#e0e4e8; }
.hub-link--ink-dark { --hub-ink:#14202c; --hub-muted:#304455; }
.hub-link.hub-link--surface-color { --hub-accent:var(--hub-ink); background:var(--hub-fill); border-color:transparent; color:var(--hub-ink); }
.hub-link--surface-color .hub-link-description,.hub-link--surface-color .hub-link-preview { color:var(--hub-muted); }
.hub-link--surface-color .hub-link-arrow { opacity:1; }
.hub-link [hidden] { display:none !important; }
.hub-link.hub-link--no-icon { grid-template-columns:minmax(0,1fr) 18px; }
.hub-link--no-icon .hub-link-icon { display:none; }
.hub-link--zuabo .hub-link-icon { background:transparent; }
.hub-link-brand-symbol { display:block; width:100%; height:auto; }
.hub-link-brand-wordmark { display:block; width:118px; max-width:100%; height:auto; margin:-5px 0 -2px -5px; }
.hub-link-raze-wordmark { display:block; width:105px; max-width:100%; height:auto; margin:-3px 0 0; }
.hub-link--ink-dark .hub-link-raze-wordmark { filter:brightness(0); }
.hub-link--ink-light :is(.hub-link-brand-wordmark,.hub-link-brand-symbol) { filter:brightness(0) invert(1); }
/* Original portfolio images sit underneath the editable copy, never over it. */
.hub-link > :is(.hub-link-icon,.hub-link-copy,.hub-link-arrow) { position:relative; z-index:1; }
.hub-link-media,.hub-link-code { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.hub-link-media { background:#101419; }
.hub-link-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--hub-focal,50% 50%); transition:transform .6s ease; }
.hub-link-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,13,18,calc(.91 + var(--hub-shade,.32) * .09)),rgba(9,13,18,calc(.69 + var(--hub-shade,.32) * .31)) 47%,rgba(9,13,18,var(--hub-shade,.32))); }
.hub-link--surface-photo { color:#fff; --hub-accent:#e0e7ed; background:#101419; }
.hub-link--surface-photo .hub-link-description { color:#e0e4e8; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.hub-link--surface-photo .hub-link-icon { background:rgba(12,20,28,.45); }
.hub-link--surface-photo .hub-link-arrow { opacity:1; }
.hub-link-code { background:linear-gradient(110deg,#111b27,#152d3e); }
.hub-link-code code { position:absolute; top:50%; right:-8px; width:240px; transform:translateY(-50%) rotate(-9deg); color:#9db5c9; font:11px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace; opacity:.45; white-space:pre; }
.hub-link-code code span { display:block; }
.hub-link-code b { color:#9dcccb; font-weight:400; }
.hub-link-code::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#111b27,rgba(17,27,39,.72) 48%,rgba(17,27,39,.08)); }
.hub-link--surface-code .hub-link-description { color:#c3cdd6; }
@media (hover:hover) and (pointer:fine) {
    .hub-link--surface-photo:hover .hub-link-media img { transform:scale(1.035); }
}
@media (hover:hover) and (pointer:fine) {
    .hub-link.hub-link--surface-color:hover { background:color-mix(in srgb,var(--hub-fill) 92%,white); border-color:var(--hub-accent); }
}
/* Keep the open service panels; lightly refine their entry points. */
.link-hub + .section--services { padding-top:clamp(3rem,6vw,6rem); }
.section--services .service-switcher .service-switcher-card { container-type:inline-size; }
.section--services .service-switcher .service-switcher-title { font-size:clamp(1.8rem,10.5cqw,3.5rem); line-height:1.13; overflow-wrap:anywhere; white-space:normal; }
@media (min-width:901px) {
    .link-hub { scroll-margin-top:20px; }
}
@media (max-width:900px) {
    .link-hub { grid-template-columns:1fr; gap:2.5rem; }
    .link-hub-intro { position:static; }
    .link-hub-intro h2 { max-width:18ch; }
    .link-hub-intro p { max-width:46ch; }
    .link-hub-more { margin-top:1.25rem; }
}
@media (max-width:560px) {
    .link-hub { padding-top:3rem; padding-bottom:2rem; gap:2rem; }
    .link-hub-intro h2 { margin:.75rem 0 1rem; font-size:2.5rem; }
    .link-hub-intro p { font-size:.9rem; line-height:1.7; }
    .link-hub-list { grid-template-columns:1fr; gap:11px; }
    .hub-link { grid-template-columns:36px minmax(0,1fr) 18px; min-height:92px; padding:15px; gap:12px; border-radius:15px; }
    .hub-link-icon { width:36px; height:36px; border-radius:10px; }
    .hub-link-title { font-size:1.1rem; }
    .hub-link-description { font-size:.78rem; }
    .hub-link-copy { gap:.3rem; }
    .section--services .service-switcher .service-switcher-title { font-size:clamp(1.8rem,8.5cqw,2.6rem); }
}
@media (prefers-reduced-motion:reduce) {
    .hub-link,.hub-link-arrow,.link-hub-more span,.hub-link-media img { transition:none; }
    .hub-link:hover { transform:none; }
    .hub-link--surface-photo:hover .hub-link-media img { transform:none; }
}