/*
Theme Name: Metro Sound Block
Theme URI: https://github.com/randzzD89/digital-intelligence-operations
Author: RnD Networks
Description: Gutenberg/block theme for the Metro Sound staging review.
Version: 0.4.2
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: metrosound-block
*/
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("./assets/fonts/barlow-condensed-600-latin.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url("./assets/fonts/barlow-condensed-800-latin.woff2") format("woff2"); }
@font-face { font-family:Manrope; font-style:normal; font-weight:400 800; font-display:swap; src:url("./assets/fonts/manrope-latin.woff2") format("woff2"); }
:root { --metro-red:#d5272d; --metro-red-dark:#a8191f; --metro-carbon:#101214; --metro-graphite:#1a1d20; --metro-graphite-light:#282c30; --metro-ink:#16191b; --metro-steel:#8f989d; --metro-line:#cfd2d0; --metro-paper:#f1f0ec; --metro-white:#fff; --metro-canvas:94rem; --metro-content:76rem; --metro-reading:68ch; --metro-gutter:clamp(1.25rem,3.5vw,4rem); --metro-display:"Barlow Condensed",Impact,sans-serif; --metro-body:Manrope,Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--metro-paper); color:var(--metro-ink); font-family:var(--metro-body); font-size:clamp(1rem,.94rem + .18vw,1.12rem); line-height:1.65; } img { max-width:100%; } a { color:var(--metro-red-dark); text-decoration-thickness:1px; text-underline-offset:.22em; } a:hover { color:var(--metro-red); } a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--metro-red); outline-offset:4px; }
.metro-skip-link { position:absolute; top:-6rem; left:1rem; z-index:999; padding:.75rem 1rem; background:#fff; color:#111; font-weight:800; }.metro-skip-link:focus { top:1rem; }
.wp-site-blocks,.metro-site-main,.wp-block-post-content { width:100%; max-width:none!important; margin:0!important; }.wp-site-blocks>main { margin-block-start:0; }

/* Header */
.metro-site-header { position:sticky; top:0; z-index:50; background:rgba(12,14,15,.94); border-bottom:1px solid rgba(255,255,255,.13); backdrop-filter:blur(18px); }.metro-header-inner { width:min(calc(100% - (2 * var(--metro-gutter))),var(--metro-canvas)); min-height:86px; margin-inline:auto; display:flex; align-items:center; gap:clamp(.85rem,2vw,2rem); }.metro-logo-link { flex:0 0 auto; }.metro-logo-link img { display:block; width:clamp(10.5rem,13vw,13.5rem); height:auto; }.metro-main-nav { display:flex; align-items:center; gap:clamp(.7rem,1.4vw,1.6rem); margin-left:auto; }.metro-main-nav a { position:relative; color:#f8f8f6; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; white-space:nowrap; }.metro-main-nav a:not(.metro-nav-cta)::after { position:absolute; right:0; bottom:-.6rem; left:0; height:1px; background:#fff; content:""; opacity:0; transform:scaleX(.3); transition:opacity .2s ease,transform .2s ease; }.metro-main-nav a:hover::after,.metro-main-nav a[aria-current="page"]::after { opacity:1; transform:scaleX(1); }.metro-nav-cta,.metro-button,.wp-block-button__link,.metro-mobile-call { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:3rem; border:1px solid var(--metro-red); background:var(--metro-red); color:#fff!important; font-family:var(--metro-body); font-size:.76rem; font-weight:800; letter-spacing:.08em; line-height:1; text-decoration:none; text-transform:uppercase; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }.metro-nav-cta { min-height:2.65rem; padding:.75rem 1rem; }.metro-button,.wp-block-button__link { padding:.95rem 1.15rem; }.metro-button::after,.wp-block-button__link::after { content:"↗"; font-size:1rem; line-height:0; }.metro-nav-cta:hover,.metro-button:hover,.wp-block-button__link:hover,.metro-mobile-call:hover { border-color:#fff; background:#fff; color:var(--metro-carbon)!important; transform:translateY(-2px); }.metro-mobile-call,.metro-mobile-nav { display:none; }.metro-mobile-nav summary { display:flex; align-items:center; gap:.65rem; list-style:none; color:#fff; cursor:pointer; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.metro-mobile-nav summary::-webkit-details-marker { display:none; }.metro-menu-icon,.metro-menu-icon::before,.metro-menu-icon::after { display:block; width:1.5rem; height:1px; background:currentColor; content:""; }.metro-menu-icon { position:relative; }.metro-menu-icon::before { position:absolute; top:-.38rem; }.metro-menu-icon::after { position:absolute; top:.38rem; }.metro-mobile-nav[open] .metro-menu-icon { background:transparent; }.metro-mobile-nav[open] .metro-menu-icon::before { top:0; transform:rotate(45deg); }.metro-mobile-nav[open] .metro-menu-icon::after { top:0; transform:rotate(-45deg); }.metro-mobile-nav nav { position:absolute; top:calc(100% + 1px); right:0; width:min(27rem,100vw); padding:1rem var(--metro-gutter) 1.5rem; display:grid; gap:.1rem; background:var(--metro-carbon); border-top:1px solid rgba(255,255,255,.15); box-shadow:0 1.5rem 3rem rgba(0,0,0,.25); }.metro-mobile-nav nav a { padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.13); color:#fff; font-size:.85rem; font-weight:800; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; }

/* Full-width bands with intentional inner measures */
.metro-section { position:relative; width:100%; margin:0; padding-block:clamp(4.5rem,8vw,9rem); }.metro-section>.metro-kicker,.metro-section>h2,.metro-section>p,.metro-section>.metro-split,.metro-page-hero .metro-section>.metro-kicker,.metro-page-hero .metro-section>h1,.metro-page-hero .metro-section>p { width:min(calc(100% - (2 * var(--metro-gutter))),var(--metro-content)); margin-inline:auto; }.metro-section>.metro-grid,.metro-section>.metro-work-grid,.metro-section>.metro-review-grid,.metro-section>.metro-project-feature,.metro-section>.metro-contact-grid { width:min(calc(100% - (2 * var(--metro-gutter))),var(--metro-canvas)); margin-inline:auto; }.metro-section>p:not(.metro-kicker):not(.metro-proof-line),.metro-page-hero .metro-section>p:not(.metro-kicker) { max-width:min(calc(100% - (2 * var(--metro-gutter))),var(--metro-reading)); }.metro-section h2,.metro-page-hero h1 { margin-top:0; font-family:var(--metro-display); font-size:clamp(3.2rem,5.7vw,6.5rem); font-weight:800; letter-spacing:-.037em; line-height:.83; text-transform:uppercase; }.metro-section h2 { max-width:12ch; margin-bottom:1.5rem; }.metro-intro { font-size:clamp(1.08rem,1rem + .35vw,1.32rem); line-height:1.62; }.metro-kicker,.metro-footer-label { margin-top:0; margin-bottom:1.05rem; color:var(--metro-red-dark); font-size:.72rem; font-weight:800; letter-spacing:.16em; line-height:1.2; text-transform:uppercase; }.metro-dark { overflow:hidden; background:var(--metro-carbon); color:#f5f5f2; }.metro-dark::before { position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 33%),repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.045) 25%); content:""; pointer-events:none; }.metro-dark>* { position:relative; }.metro-dark h2,.metro-dark a:not(.metro-button) { color:#fff; }.metro-dark .metro-kicker { color:#ff8a8f; }
.metro-page-hero { position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 80% 25%,rgba(213,39,45,.37),transparent 24%),linear-gradient(115deg,#111416,#202326); }.metro-page-hero::after { position:absolute; right:-9rem; bottom:-11rem; width:37rem; height:37rem; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 4rem rgba(255,255,255,.025),0 0 0 8rem rgba(255,255,255,.018); content:""; }.metro-page-hero .metro-section { padding-block:clamp(5rem,11vw,10rem) clamp(4rem,8vw,7rem); }.metro-page-hero .metro-section>* { position:relative; z-index:1; }.metro-page-hero h1 { max-width:10ch; margin-bottom:1.3rem; font-size:clamp(4.2rem,9vw,9.5rem); }.metro-page-hero p { font-size:clamp(1.1rem,1rem + .45vw,1.38rem); }.page-slug-our-work .metro-page-hero { background:linear-gradient(90deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.78) 44%,rgba(10,12,14,.15) 100%),url("./assets/porsche-carrera-install-04.jpg") 72% 46%/cover; }.page-slug-about .metro-page-hero { background:linear-gradient(90deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.75) 49%,rgba(10,12,14,.18) 100%),url("./assets/mercedes-sl-workshop.jpg") 68% 48%/cover; }.page-slug-contact .metro-page-hero { background:linear-gradient(90deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.76) 48%,rgba(10,12,14,.2) 100%),url("./assets/mercedes-clk-workshop.jpg") 68% 48%/cover; }

/* Hero */
.metro-hero { position:relative; min-height:clamp(43rem,86vh,62rem); display:grid; align-items:end; overflow:hidden; color:#fff; background:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.88) 34%,rgba(8,10,12,.26) 64%,rgba(8,10,12,.14) 100%),url("./assets/mercedes-clk-workshop.jpg") 68% center/cover; }.metro-hero::after { position:absolute; right:clamp(1.25rem,3.5vw,4rem); bottom:0; width:min(42vw,44rem); height:34%; border-top:1px solid rgba(255,255,255,.24); border-left:1px solid rgba(255,255,255,.24); content:""; opacity:.5; }.metro-hero-inner { position:relative; z-index:1; width:min(calc(100% - (2 * var(--metro-gutter))),var(--metro-canvas)); margin-inline:auto; padding:clamp(8rem,14vw,13rem) 0 clamp(3rem,7vw,6rem); }.metro-hero-inner>* { max-width:44rem; }.metro-hero h1 { max-width:8.5ch; margin:0; color:#fff; font-family:var(--metro-display); font-size:clamp(5rem,10.5vw,11.5rem); font-weight:800; letter-spacing:-.055em; line-height:.76; text-transform:uppercase; }.metro-lead { max-width:39rem; font-size:clamp(1.12rem,1rem + .52vw,1.48rem); line-height:1.55; }.metro-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }.metro-button--ghost { border-color:rgba(255,255,255,.65); background:rgba(16,18,20,.16); color:#fff!important; }.metro-button--ghost:hover { border-color:#fff; background:#fff; color:var(--metro-carbon)!important; }.metro-proof-line { margin-top:2.75rem; color:#d1d5d5; font-size:.77rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* Editorial content patterns */
.metro-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); }.metro-service-card { grid-column:span 4; min-height:15rem; padding:1.6rem 0; border-top:1px solid var(--metro-line); background:transparent; }.metro-service-card h3 { max-width:15ch; margin:.25rem 0 .7rem; font-family:var(--metro-display); font-size:clamp(1.7rem,2vw,2.35rem); font-weight:800; letter-spacing:-.02em; line-height:.95; text-transform:uppercase; }.metro-service-card p { max-width:30ch; margin:0; font-size:.94rem; }.metro-service-number { display:block; color:var(--metro-red); font-size:.72rem; font-weight:800; letter-spacing:.13em; }.metro-proof-intro .metro-split { align-items:end; padding-bottom:clamp(2.5rem,5vw,5rem); border-bottom:1px solid var(--metro-line); }.metro-feature-review { max-width:37rem; margin:0; padding:0 0 0 1.4rem; border-left:3px solid var(--metro-red); font-size:clamp(1.35rem,1.2rem + .5vw,1.85rem); font-weight:500; line-height:1.4; }.metro-feature-review cite { display:block; margin-top:1.4rem; color:#60676a; font-size:.72rem; font-style:normal; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.metro-split { display:grid; grid-template-columns:minmax(0,.85fr) minmax(20rem,1.15fr); gap:clamp(2rem,7vw,9rem); align-items:start; }.metro-statement { max-width:10ch; margin:0; color:inherit; font-family:var(--metro-display); font-size:clamp(3rem,5.3vw,6rem); font-weight:800; letter-spacing:-.04em; line-height:.84; text-transform:uppercase; }.metro-list { display:grid; gap:1rem; margin:0; padding:0; list-style:none; }.metro-list li { padding:0 0 1.3rem; border-bottom:1px solid var(--metro-line); }.metro-list strong { display:block; margin-bottom:.25rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }.metro-dark .metro-list li { border-color:rgba(255,255,255,.22); }
.metro-work-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(.6rem,1.2vw,1.1rem); }.metro-work-card { position:relative; grid-column:span 4; min-height:clamp(21rem,30vw,34rem); overflow:hidden; background:var(--metro-carbon); color:#fff; }.metro-work-card--wide { grid-column:span 8; }.metro-work-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.05); transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease; }.metro-work-card:hover img { filter:saturate(1) contrast(1.08); transform:scale(1.045); }.metro-work-card div { position:absolute; right:0; bottom:0; left:0; padding:3.5rem clamp(1.1rem,2vw,2rem) clamp(1.1rem,2vw,2rem); background:linear-gradient(transparent,rgba(0,0,0,.88)); }.metro-work-card h3 { margin:0; font-family:var(--metro-display); font-size:clamp(2rem,3vw,3.4rem); font-weight:800; letter-spacing:-.025em; line-height:.86; text-transform:uppercase; }.metro-work-card p { margin:.5rem 0 0; color:#eceeed; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.metro-project-feature { display:grid; grid-template-columns:minmax(21rem,.72fr) minmax(0,1.38fr); min-height:clamp(34rem,52vw,48rem); overflow:hidden; background:var(--metro-carbon); color:#fff; }.metro-project-feature--full { grid-template-columns:minmax(21rem,.62fr) minmax(0,1.48fr); }.metro-project-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(2rem,5vw,6rem); background:linear-gradient(135deg,#202427,#111315); }.metro-project-copy::before { position:absolute; top:1.4rem; right:1.4rem; width:2.25rem; height:2.25rem; border-top:1px solid rgba(255,255,255,.38); border-right:1px solid rgba(255,255,255,.38); content:""; }.metro-project-copy h2,.metro-project-copy h3 { max-width:8ch; margin:0 0 1.2rem; color:#fff; font-family:var(--metro-display); font-size:clamp(3rem,5vw,5.7rem); font-weight:800; letter-spacing:-.04em; line-height:.82; text-transform:uppercase; }.metro-project-copy p:not(.metro-kicker) { max-width:30rem; margin-bottom:1.8rem; color:#d8dcdd; font-size:1rem; line-height:1.6; }.metro-project-gallery { display:grid; min-height:100%; grid-template-columns:1.35fr .8fr; grid-template-rows:1fr 1fr; gap:2px; background:var(--metro-carbon); }.metro-project-gallery img { width:100%; height:100%; min-height:0; object-fit:cover; filter:saturate(.86) contrast(1.07); }.metro-project-gallery img:first-child { grid-row:span 2; }.metro-project-gallery--six { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); }.metro-project-gallery--six img:first-child { grid-row:span 2; }
.metro-review-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px; background:var(--metro-line); border:1px solid var(--metro-line); }.metro-review-card { grid-column:span 5; padding:clamp(1.6rem,3vw,3.25rem); background:var(--metro-paper); }.metro-review-card:first-child { grid-column:span 7; background:#fff; }.metro-review-card blockquote { max-width:35ch; margin:0; font-size:clamp(1.12rem,1rem + .45vw,1.62rem); font-weight:500; line-height:1.48; }.metro-review-card cite { display:block; margin-top:2rem; color:#687074; font-size:.72rem; font-style:normal; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.metro-avi-mark { font-family:var(--metro-display); font-size:clamp(8rem,17vw,16rem); font-weight:800; letter-spacing:-.1em; line-height:.7; }
.metro-contact-grid { display:grid; grid-template-columns:minmax(20rem,.78fr) minmax(0,1.22fr); gap:0; overflow:hidden; background:#fff; box-shadow:0 1.5rem 3rem rgba(12,15,16,.08); }.metro-contact-details { padding:clamp(2rem,5vw,5rem); background:var(--metro-carbon); color:#fff; }.metro-contact-details h2 { max-width:7ch; color:#fff; }.metro-contact-details a { color:#fff; }.metro-contact-grid>div { padding:clamp(2rem,5vw,5rem); }.metro-contact-grid>div>h2 { font-size:clamp(2.6rem,4vw,4.5rem); }.awd-form--metrosound { display:grid; gap:1.1rem; margin-top:2rem; }.awd-form--metrosound label { display:grid; gap:.45rem; font-size:.75rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.awd-form--metrosound input,.awd-form--metrosound textarea,.awd-form--metrosound select { width:100%; border:0; border-bottom:1px solid #aab1b3; border-radius:0; padding:.75rem 0; background:transparent; color:#111; font:inherit; }.awd-form--metrosound textarea { min-height:8rem; resize:vertical; }.awd-form--metrosound button { width:max-content; margin-top:.8rem; border:1px solid var(--metro-red); background:var(--metro-red); color:#fff; padding:.95rem 1.15rem; font:800 .76rem/1 var(--metro-body); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }.metrosound-form-note,.awd-optional { color:#667074; font-size:.78rem; font-weight:500; letter-spacing:normal; text-transform:none; }.awd-honeypot { display:none; }

/* Footer */
.metro-site-footer { position:relative; overflow:hidden; background:#0b0d0e; color:#fff; }.metro-site-footer::before { position:absolute; right:-10rem; bottom:2rem; width:28rem; height:28rem; border:1px solid rgba(255,255,255,.09); border-radius:50%; content:""; }.metro-footer-inner { position:relative; width:min(calc(100% - (2 * var(--metro-gutter))),var(--metro-canvas)); margin-inline:auto; padding-block:clamp(4rem,7vw,7rem); display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(2rem,6vw,7rem); }.metro-footer-logo { width:min(18rem,100%); filter:grayscale(1) brightness(2.7); }.metro-site-footer a { color:#fff; }.metro-site-footer p { font-size:.92rem; }.metro-staging-bar { position:relative; padding:.75rem var(--metro-gutter); border-top:1px solid rgba(255,255,255,.16); color:#c8cecf; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-align:center; text-transform:uppercase; }

@media (max-width:1120px) { .metro-main-nav { gap:.8rem; }.metro-main-nav a { font-size:.67rem; }.metro-header-inner { min-height:78px; }.metro-hero { min-height:44rem; }.metro-project-feature { grid-template-columns:minmax(18rem,.72fr) minmax(0,1.28fr); } }
@media (max-width:900px) { .metro-main-nav { display:none; }.metro-mobile-call { display:inline-flex; margin-left:auto; padding:.7rem .8rem; font-size:.68rem; }.metro-mobile-nav { display:block; }.metro-section { padding-block:clamp(4rem,10vw,6rem); }.metro-section>.metro-split,.metro-project-feature,.metro-project-feature--full,.metro-contact-grid,.metro-footer-inner { grid-template-columns:1fr; }.metro-section>.metro-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.metro-service-card { grid-column:span 1; min-height:0; }.metro-hero { min-height:42rem; background-position:64% center; }.metro-hero::after { width:48vw; }.metro-hero h1 { font-size:clamp(5rem,15vw,8.8rem); }.metro-project-feature { min-height:0; }.metro-project-copy { min-height:25rem; }.metro-project-gallery { min-height:31rem; }.metro-project-gallery--six { min-height:42rem; }.metro-review-card,.metro-review-card:first-child { grid-column:span 12; }.metro-footer-inner { gap:2rem; }.metro-contact-grid>div { padding-top:3rem; }.page-slug-our-work .metro-page-hero,.page-slug-about .metro-page-hero,.page-slug-contact .metro-page-hero { background-position:64% center; } }
@media (max-width:620px) { .metro-header-inner { min-height:70px; gap:.75rem; }.metro-logo-link img { width:9.7rem; }.metro-mobile-call { min-height:2.45rem; padding:.65rem .55rem; font-size:.61rem; }.metro-mobile-nav summary span:last-child { display:none; }.metro-page-hero .metro-section { padding-block:5rem 4rem; }.metro-page-hero h1 { font-size:clamp(4rem,18vw,6rem); }.metro-section h2 { font-size:clamp(3rem,14vw,4.5rem); }.metro-section>.metro-grid { grid-template-columns:1fr; }.metro-service-card { grid-column:span 1; }.metro-work-grid { grid-template-columns:1fr; }.metro-work-card,.metro-work-card--wide { grid-column:span 1; min-height:23rem; }.metro-project-feature { width:100%!important; }.metro-project-copy { min-height:22rem; padding:2rem var(--metro-gutter); }.metro-project-gallery { min-height:23rem; }.metro-project-gallery--six { min-height:35rem; }.metro-project-gallery--six img:first-child { grid-column:span 2; grid-row:span 1; }.metro-feature-review { font-size:1.3rem; }.metro-contact-grid>div,.metro-contact-details { padding:2.25rem var(--metro-gutter); }.metro-hero { min-height:39rem; background-position:67% center; }.metro-hero::after { display:none; }.metro-hero-inner { padding-top:8rem; }.metro-hero h1 { line-height:.78; }.metro-lead { font-size:1.05rem; }.metro-proof-line { font-size:.65rem; }.metro-footer-inner { grid-template-columns:1fr; }.metro-staging-bar { font-size:.59rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }