/* Colour HUD system — a shared technical layer without flattening the portfolio palette. */
:root{--hud-gold:#d4a52f;--hud-pink:#ff9fb5;--hud-acid:#d7ff64;--hud-blue:#79b7ff;--hud-cyan:#75e4d1;--hud-orange:#ff985e;--hud-violet:#b8a6ff;--hud-ink:#11110e}
body{--hud-section-accent:var(--hud-gold)}

/* Persistent interface signature. */
.site-hud-signature{position:fixed;z-index:18;right:4.5vw;top:108px;display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid #ffffff2b;border-radius:2px;background:#11110edb;color:#eee8dd;box-shadow:0 10px 28px #0002;backdrop-filter:blur(12px);pointer-events:none}
.site-hud-signature span,.site-hud-signature b{font:600 7px/1.2 monospace;letter-spacing:.12em}.site-hud-signature span{color:#aaa59a}.site-hud-signature i{width:22px;height:1px;background:linear-gradient(90deg,var(--hud-gold),var(--hud-pink))}.site-hud-signature b{color:var(--hud-acid)}
.loader-mark-code span{display:flex;align-items:center;gap:4px}.loader-mark-code b{color:var(--hud-gold);font:700 9px/1 monospace;letter-spacing:0;text-transform:none}

/* Header and navigation feel like one precise control surface. */
.site-header{border-top:2px solid var(--hud-gold);border-bottom:1px solid color-mix(in srgb,currentColor 13%,transparent)}
.site-header:before{content:"";position:absolute;left:4.5vw;right:4.5vw;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--hud-gold) 0 12%,transparent 12% 70%,var(--hud-pink) 70% 82%,transparent 82%)}
.site-header .logo small{padding:5px 8px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:2px;line-height:1;letter-spacing:.13em}
.site-header nav>a,.site-header .nav-parent{font-size:12px;letter-spacing:.015em}
.nav-submenu{border-radius:3px}.nav-submenu:before{content:"SYS / NAV";display:block;grid-column:1/-1;padding:5px 8px;color:#76736b;font:7px/1 monospace;letter-spacing:.14em}

/* Shared micro-labels and CTAs. */
.eyebrow{display:flex;align-items:center;gap:9px;width:max-content;max-width:100%}
.eyebrow:before{content:"";flex:0 0 auto;width:6px;height:6px;border:1px solid currentColor;background:var(--hud-section-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--hud-section-accent) 18%,transparent)}
.pill{position:relative;border-radius:3px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));text-transform:uppercase;letter-spacing:.055em;font-size:11px}
.pill:after{content:"";position:absolute;right:5px;top:5px;width:4px;height:4px;background:var(--hud-section-accent)}
.home-text-link,.text-link{position:relative;padding-left:18px}.home-text-link:before,.text-link:before{content:"//";position:absolute;left:0;color:var(--hud-section-accent);font:700 10px monospace}

/* The palette rotates by section while existing section backgrounds remain intact. */
.home-v2-hero,.portfolio-discipline-hero,.project-hero,.legal-hero,.identity-hero,.creative-case-hero{--hud-section-accent:var(--hud-gold)}
.home-portfolio-hub,.archive,.about-story,.identity-rationale{--hud-section-accent:var(--hud-pink)}
.home-platforms,.service-detail,.identity-process,.pb-dynamic{--hud-section-accent:var(--hud-blue)}
.home-selected-work,.live-preview,.team-directory,.identity-anatomy{--hud-section-accent:var(--hud-acid)}
.home-services,.case-story,.articles,.identity-usage{--hud-section-accent:var(--hud-cyan)}
.home-process,.process,.case-outcome,.identity-colour{--hud-section-accent:var(--hud-orange)}
.home-about,.values,.social-profile-showcase,.identity-rules{--hud-section-accent:var(--hud-violet)}
.home-insights,.social-method,.identity-mockups{--hud-section-accent:var(--hud-pink)}

/* VWEB mark reveal: a monogram that also reads as code. */
.home-mark-story{--hud-section-accent:var(--hud-blue);position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);gap:7vw;align-items:center;padding:clamp(90px,10vw,155px) 5vw;background:#e7eef7;border-top:1px solid #9db8d5}
.home-mark-story:before{content:"";position:absolute;left:5vw;top:-1px;width:140px;height:4px;background:linear-gradient(90deg,var(--hud-blue),var(--hud-pink))}
.home-mark-copy h2,.vweb-mark-system h2{font-size:clamp(56px,7vw,105px);line-height:.88;letter-spacing:-.07em;margin:28px 0 35px}.home-mark-copy h2 em,.vweb-mark-system h2 em{color:#a87813;font-style:normal}.home-mark-copy p{max-width:640px;color:#545963;font-size:18px;line-height:1.72}.home-mark-copy .home-text-link{display:inline-block;margin-top:25px}
.home-mark-console{position:relative;min-height:520px;padding:24px;border:1px solid #3b4148;background:#101318;color:#f8f4eb;box-shadow:22px 22px 0 #ff9fb5,44px 44px 0 #d7ff64;overflow:hidden}
.home-mark-console:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:52px 52px;pointer-events:none}.home-mark-console:after{content:"CODE / MARK / 001";position:absolute;right:22px;bottom:18px;color:#606873;font:7px monospace;letter-spacing:.16em}
.home-mark-live{position:relative;z-index:2;display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #ffffff24;color:#8e949c;font:8px monospace;letter-spacing:.14em}.home-mark-live b{color:var(--hud-acid)}
.home-mark-symbol{position:relative;z-index:2;min-height:330px;display:flex;align-items:center;justify-content:center;gap:clamp(1px,.4vw,7px);font:700 clamp(75px,10vw,155px)/1 "DM Sans",Arial,sans-serif;letter-spacing:-.12em}.home-mark-symbol span{display:block;transition:color .3s,transform .6s cubic-bezier(.2,.8,.2,1)}.home-mark-symbol span:nth-child(1){color:var(--hud-gold)}.home-mark-symbol span:nth-child(2){color:var(--hud-blue)}.home-mark-symbol span:nth-child(3){color:var(--hud-pink)}.home-mark-symbol span:nth-child(4){color:var(--hud-acid)}.home-mark-console:hover .home-mark-symbol span:nth-child(1){transform:translateX(7px)}.home-mark-console:hover .home-mark-symbol span:nth-child(2){transform:translateX(2px)}.home-mark-console:hover .home-mark-symbol span:nth-child(3){transform:translateX(-2px)}.home-mark-console:hover .home-mark-symbol span:nth-child(4){transform:translateX(-7px)}
.home-mark-equation{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1.35fr auto 1fr;gap:10px;align-items:center;border-top:1px solid #ffffff24;padding-top:16px}.home-mark-equation>span{display:flex;align-items:center;justify-content:space-between;gap:12px}.home-mark-equation b{font:700 14px monospace;color:#f7f2e8}.home-mark-equation small{width:25px;height:25px;display:grid;place-items:center;border:1px solid #ffffff30;color:var(--hud-gold);font:700 8px monospace}.home-mark-equation i{color:#666;font-style:normal}

.vweb-mark-system{--hud-section-accent:var(--hud-blue);scroll-margin-top:95px;padding:clamp(95px,10vw,155px) 5vw;background:#dfeaf7;border-top:1px solid #91b5da}.vweb-mark-system>header{display:grid;grid-template-columns:.62fr 1.38fr;gap:6vw;align-items:end}.vweb-mark-system>header .eyebrow{align-self:start}.vweb-mark-system>header h2{grid-column:2;margin:0}.vweb-mark-system>header>p{grid-column:2;max-width:760px;margin:0;color:#4d5864;font-size:18px;line-height:1.75}
.vweb-mark-board{display:grid;grid-template-columns:.78fr 1.22fr;gap:1px;margin-top:80px;border:1px solid #8296a9;background:#8296a9}.vweb-master-mark{min-height:650px;padding:30px;background:#11130f;color:#f8f4eb;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.vweb-master-mark:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,#d4a52f1f,transparent 34%),linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}.vweb-master-mark>*{position:relative;z-index:1}.vweb-master-mark>span,.vweb-master-mark>small{font:8px monospace;letter-spacing:.14em;color:#8e8a80}.vweb-master-mark img{width:min(82%,470px);height:auto;aspect-ratio:1;object-fit:contain;margin:auto;padding:12px;background:#171713;filter:drop-shadow(0 18px 45px #0008)}
.vweb-mark-parts{display:grid;grid-template-rows:repeat(3,1fr);gap:1px;background:#8296a9}.vweb-mark-parts article{position:relative;display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;padding:30px;background:#fffdf8}.vweb-mark-parts article>b{font:700 clamp(58px,6vw,92px)/1 monospace;letter-spacing:-.15em;color:var(--hud-gold)}.vweb-mark-parts article:nth-child(2)>b{color:#4d8fd5}.vweb-mark-parts article:nth-child(3)>b{color:#e26e92}.vweb-mark-parts article>b i{padding:0 5px;color:#777;font:400 18px monospace}.vweb-mark-parts small{color:#8b857b;font:8px monospace;letter-spacing:.14em}.vweb-mark-parts h3{margin:7px 0 9px;font-size:clamp(23px,2vw,34px);letter-spacing:-.04em}.vweb-mark-parts p{max-width:600px;margin:0;color:#68675f;line-height:1.6}
.vweb-mark-principles{display:grid;grid-template-columns:.6fr auto 1fr auto 1fr 1.4fr;gap:22px;align-items:center;padding:24px 0;border-bottom:1px solid #8296a9;color:#4e5964}.vweb-mark-principles>span{font:700 8px monospace;letter-spacing:.14em;text-transform:uppercase}.vweb-mark-principles>b{color:#11110e;font:700 19px monospace}.vweb-mark-principles>p{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.09em}.vweb-mark-principles>strong{justify-self:end;color:#11110e;font-size:13px}

/* Structured section framing. */
.home-portfolio-hub,.home-platforms,.home-selected-work,.home-services,.home-process,.home-about,.home-insights,
.archive,.service-detail,.process,.about-story,.values,.team-directory,.articles,.case-story,.live-preview,.case-outcome,
.identity-rationale,.identity-process,.identity-anatomy,.identity-usage,.identity-colour,.identity-rules,.identity-mockups,.social-method{position:relative;border-top:1px solid color-mix(in srgb,var(--hud-section-accent) 55%,transparent)}
.home-portfolio-hub:before,.home-platforms:before,.home-selected-work:before,.home-services:before,.home-process:before,.home-about:before,.home-insights:before,
.archive:before,.service-detail:before,.process:before,.about-story:before,.values:before,.team-directory:before,.articles:before,.case-story:before,.live-preview:before,.case-outcome:before,
.identity-rationale:before,.identity-process:before,.identity-anatomy:before,.identity-usage:before,.identity-colour:before,.identity-rules:before,.identity-mockups:before,.social-method:before{content:"";position:absolute;z-index:2;left:4.5vw;top:-1px;width:clamp(70px,10vw,150px);height:3px;background:var(--hud-section-accent);pointer-events:none}

/* Hero scan and coordinate language, kept transparent so photography and colour stay visible. */
.home-v2-hero:after,.portfolio-discipline-hero:after,.project-hero:before,.identity-hero:after,.creative-case-hero:after{background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:72px 72px;mix-blend-mode:soft-light;pointer-events:none}
.portfolio-discipline-hero .portfolio-hero-kicker,.case-index,.identity-hero>small{font-family:monospace;letter-spacing:.14em}

/* Cards, media and data modules receive corner brackets instead of heavy dark boxes. */
.home-discipline,.home-platform-grid>a,.home-work-card,.home-service-grid>a,.article-card,.service-chapter,.team-card,.archive-card,.brand-deck,.social-fold-device,.pb-project-grid>a,.pb-insight-grid>a{position:relative}
.home-discipline:before,.home-platform-grid>a:before,.home-work-card:before,.home-service-grid>a:before,.article-card:before,.service-chapter:before,.team-card:before,.archive-card:before,.pb-project-grid>a:before,.pb-insight-grid>a:before{content:"";position:absolute;z-index:3;left:-1px;top:-1px;width:17px;height:17px;border-left:2px solid var(--hud-section-accent);border-top:2px solid var(--hud-section-accent);pointer-events:none}
.home-discipline:after,.home-platform-grid>a:after,.home-work-card:after,.home-service-grid>a:after,.article-card:after,.service-chapter:after,.team-card:after,.archive-card:after,.pb-project-grid>a:after,.pb-insight-grid>a:after{content:"";position:absolute;z-index:3;right:-1px;bottom:-1px;width:17px;height:17px;border-right:2px solid var(--hud-section-accent);border-bottom:2px solid var(--hud-section-accent);pointer-events:none}
.home-platform-grid>a:nth-child(2n),.home-service-grid>a:nth-child(2n),.article-card:nth-child(2n),.service-chapter:nth-child(2n),.archive-card:nth-child(2n){--hud-section-accent:var(--hud-pink)}
.home-platform-grid>a:nth-child(3n),.home-service-grid>a:nth-child(3n),.article-card:nth-child(3n),.service-chapter:nth-child(3n),.archive-card:nth-child(3n){--hud-section-accent:var(--hud-blue)}
.home-platform-grid>a:nth-child(4n),.home-service-grid>a:nth-child(4n),.article-card:nth-child(4n),.service-chapter:nth-child(4n),.archive-card:nth-child(4n){--hud-section-accent:var(--hud-cyan)}

/* Facts and process blocks work as colourful telemetry. */
.home-proof>div,.case-facts>div,.process-track>div,.value-grid>div,.portfolio-proof>div,.social-method-grid>article{position:relative;overflow:hidden}
.home-proof>div:before,.case-facts>div:before,.process-track>div:before,.value-grid>div:before,.portfolio-proof>div:before,.social-method-grid>article:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--hud-gold)}
.home-proof>div:nth-child(2):before,.case-facts>div:nth-child(2):before,.process-track>div:nth-child(2):before,.value-grid>div:nth-child(2):before,.portfolio-proof>div:nth-child(2):before,.social-method-grid>article:nth-child(2):before{background:var(--hud-pink)}
.home-proof>div:nth-child(3):before,.case-facts>div:nth-child(3):before,.process-track>div:nth-child(3):before,.value-grid>div:nth-child(3):before,.portfolio-proof>div:nth-child(3):before,.social-method-grid>article:nth-child(3):before{background:var(--hud-blue)}
.home-proof>div:nth-child(4):before,.case-facts>div:nth-child(4):before,.process-track>div:nth-child(4):before,.value-grid>div:nth-child(4):before,.portfolio-proof>div:nth-child(4):before,.social-method-grid>article:nth-child(4):before{background:var(--hud-acid)}

/* Filters, forms and browser frames share the same compact instrumentation. */
.portfolio-filter-dock,.project-intake,.browser-frame,.browser-shell{border-radius:3px!important}
.portfolio-filter-dock{border-top-color:var(--hud-gold)}
.work-hero-index>a{border-radius:3px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));text-transform:uppercase;letter-spacing:.05em;font-size:11px}
input,textarea,select{border-radius:0}.project-intake input,.project-intake textarea,.project-intake select,.contact-form-stage input,.contact-form-stage textarea,footer input,footer textarea{transition:border-color .2s,background .2s}.project-intake input:focus,.project-intake textarea:focus,.project-intake select:focus,.contact-form-stage input:focus,.contact-form-stage textarea:focus,footer input:focus,footer textarea:focus{background:#d4a52f09;border-color:var(--hud-gold)!important}
.browser-bar,.browser-chrome{border-bottom:1px solid #ffffff22}.browser-bar:after,.browser-chrome:after{content:"PREVIEW / LIVE";margin-left:auto;color:var(--hud-acid);font:7px monospace;letter-spacing:.12em}

/* Footer remains dark by design, with colour used as functional telemetry. */
footer{--hud-section-accent:var(--hud-gold);border-top:2px solid var(--hud-gold)!important}
footer:before{content:"VWEB SYSTEM / PROJECT INTAKE";position:absolute;right:4.5vw;top:18px;color:#716d64;font:7px monospace;letter-spacing:.14em}
.footer-contact-page{display:block!important;padding-top:28px!important}.footer-contact-page:before{content:"VWEB SYSTEM / CONTACT COMPLETE"}.footer-contact-page .foot{margin-top:0!important}
.foot{border-image:linear-gradient(90deg,var(--hud-gold),var(--hud-pink),var(--hud-blue),transparent) 1!important}
.scroll-progress{background:linear-gradient(90deg,var(--hud-gold),var(--hud-pink),var(--hud-blue),var(--hud-acid))!important}

@media(max-width:950px){.site-hud-signature{top:84px;right:16px}.site-header:before{left:16px;right:16px}.site-header .mobile-nav-toggle{display:grid!important;justify-self:end}.browser-chrome:after{display:none}.work-hero-grid,.work-hero-copy{min-width:0;max-width:100%}.work-hero-copy p{width:100%;max-width:100%;overflow-wrap:anywhere}.home-mark-story{grid-template-columns:1fr;padding-bottom:125px}.home-mark-console{min-height:470px}.vweb-mark-system>header{grid-template-columns:1fr}.vweb-mark-system>header h2,.vweb-mark-system>header>p{grid-column:auto}.vweb-mark-board{grid-template-columns:1fr}.vweb-master-mark{min-height:520px}.vweb-mark-principles{grid-template-columns:1fr auto 1fr auto 1fr}.vweb-mark-principles>strong{grid-column:1/-1;justify-self:start}}
@media(max-width:600px){.site-hud-signature{display:none}.site-header{border-top-width:1px}.eyebrow{line-height:1.45}.home-portfolio-hub:before,.home-platforms:before,.home-selected-work:before,.home-services:before,.home-process:before,.home-about:before,.home-insights:before,.archive:before,.service-detail:before,.process:before,.about-story:before,.values:before,.team-directory:before,.articles:before,.case-story:before,.live-preview:before,.case-outcome:before,.identity-rationale:before,.identity-process:before,.identity-anatomy:before,.identity-usage:before,.identity-colour:before,.identity-rules:before,.identity-mockups:before,.social-method:before{left:20px}.pill,.work-hero-index>a{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}footer:before{display:none}.loader-mark-code span:nth-child(2){display:none}.home-mark-story,.vweb-mark-system{padding:80px 20px}.home-mark-copy h2,.vweb-mark-system h2{font-size:52px}.home-mark-copy p,.vweb-mark-system>header>p{font-size:15px}.home-mark-console{min-height:360px;padding:16px;box-shadow:10px 10px 0 #ff9fb5,20px 20px 0 #d7ff64}.home-mark-symbol{min-height:225px;font-size:17vw}.home-mark-equation{gap:4px}.home-mark-equation b{font-size:10px}.home-mark-equation small{width:20px;height:20px}.vweb-mark-board{margin-top:50px}.vweb-master-mark{min-height:390px;padding:20px}.vweb-master-mark img{width:95%}.vweb-mark-parts article{grid-template-columns:74px 1fr;gap:15px;padding:24px 18px}.vweb-mark-parts article>b{font-size:48px}.vweb-mark-parts p{font-size:13px}.vweb-mark-principles{grid-template-columns:auto 1fr;gap:12px}.vweb-mark-principles>span,.vweb-mark-principles>strong{grid-column:1/-1}.vweb-mark-principles>strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.site-hud-signature{backdrop-filter:none}}