:root { --black:#07090a; --panel:#101516; --red:#c9282d; --orange:#f47621; --teal:#00a9b7; --lime:#a8c72d; --bone:#f3eee1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--bone); background:radial-gradient(circle at 50% 25%,#15323655,transparent 35%),var(--black); font-family:"DM Sans",sans-serif; }
body::after { content:""; position:fixed; z-index:100; inset:7px; pointer-events:none; border:2px solid #9c1d24; outline:1px solid #ff596033; box-shadow:inset 0 0 16px #c9282d55,0 0 10px #c9282d55; }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:center; padding:17px 20px; border-bottom:2px solid #00a9b755; background:#07090af2; backdrop-filter:blur(9px); }
.site-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }.site-nav a { min-width:102px; padding:10px 18px; border:2px solid var(--teal); color:var(--bone); background:#0e1516cc; text-align:center; text-decoration:none; font:400 1.05rem "Metal Mania","Oswald",sans-serif; letter-spacing:.06em; text-transform:uppercase; box-shadow:3px 3px 0 #00636b; transition:.2s; }.site-nav a:nth-child(2) { border-color:var(--orange); box-shadow:3px 3px 0 #883408; }.site-nav a:nth-child(3) { border-color:var(--lime); box-shadow:3px 3px 0 #52640e; }.site-nav a:nth-child(4) { border-color:var(--red); box-shadow:3px 3px 0 #7b1419; }.site-nav a:hover { transform:translateY(-3px); color:#fff; background:#182022; }
.landing-showcase { position:relative; isolation:isolate; min-height:0; padding:10px clamp(20px,6vw,90px) 60px; overflow:hidden; }.landing-showcase::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 41%,#00a9b727,transparent 30%),radial-gradient(circle at 20% 75%,#f476211c,transparent 30%),radial-gradient(circle at 80% 68%,#a8c72d18,transparent 28%); }
.showcase-logo { display:none; }.showcase-copy { position:relative; max-width:850px; margin:0 auto 18px; text-align:center; }.showcase-copy p,.eyebrow { margin:0 0 9px; color:var(--lime); font:500 .9rem "Oswald",sans-serif; letter-spacing:.16em; text-transform:uppercase; }.showcase-copy h1,h2 { margin:0; color:var(--bone); font:400 clamp(2rem,5vw,4.4rem)/1.04 "Metal Mania","Oswald",sans-serif; text-transform:uppercase; text-shadow:3px 3px 0 #000,0 0 14px #000; }.showcase-copy h1 { max-width:720px; margin-inline:auto; }.title-logo { position:absolute; top:50%; width:clamp(68px,9vw,120px); transform:translateY(-42%); filter:drop-shadow(0 5px 7px #000b); transition:transform .25s,filter .25s; }.title-logo--left { left:clamp(-112px,-8vw,-58px); }.title-logo:hover { transform:translateY(-46%) rotate(-4deg) scale(1.06); filter:drop-shadow(0 6px 8px #000) drop-shadow(0 0 9px #00a9b766) drop-shadow(0 0 14px #f4762155); }
.gallery-layout { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:clamp(14px,3vw,44px); max-width:1080px; min-height:490px; margin:0 auto; align-items:center; }.category-column { display:flex; flex-direction:column; gap:35px; }.category-column--left { align-items:flex-end; }.category-column--right { align-items:flex-start; }.category-card { width:min(230px,100%); aspect-ratio:1.06; position:relative; overflow:visible; border:3px solid var(--teal); background:linear-gradient(#00101455,#00101455),var(--photo) center/cover; box-shadow:8px 9px 0 #006c75,0 0 10px #00a9b7,0 0 24px #00a9b766; cursor:pointer; transform:rotate(var(--tilt)); transition:.25s; }.category-card:nth-child(2) { border-color:var(--orange); box-shadow:8px 9px 0 #9c3b0c,0 0 10px #f47621,0 0 24px #f4762166; }.category-card:nth-child(3) { border-color:var(--lime); box-shadow:8px 9px 0 #566b0e,0 0 10px #a8c72d,0 0 24px #a8c72d66; }.category-card span { position:absolute; top:-16px; left:-17px; min-width:126px; padding:7px 15px; border:2px solid var(--red); color:var(--bone); background:#111719; font:400 1.2rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; transform:rotate(-2deg); }.category-card:hover,.category-card.active { filter:brightness(1.13); transform:rotate(var(--tilt)) translateY(-7px) scale(1.025); }
.photo-stack { position:relative; height:430px; min-width:0; }.gallery-photo { position:absolute; width:72%; height:68%; overflow:hidden; border:4px solid var(--teal); background:#0d1213; box-shadow:9px 10px 0 #005c64; cursor:zoom-in; transition:.35s; }.gallery-photo img { width:100%; height:100%; object-fit:cover; }.gallery-photo:hover { filter:brightness(1.12); }.photo-all { z-index:5; top:15%; left:14%; transform:rotate(-1deg); border-color:var(--orange); box-shadow:9px 10px 0 #8d350a; }.photo-one { top:8%; left:4%; transform:rotate(-11deg); }.photo-two { top:7%; right:3%; transform:rotate(9deg); border-color:var(--lime); box-shadow:9px 10px 0 #586e0d; }.photo-three { bottom:0; left:13%; transform:rotate(-5deg); border-color:var(--red); box-shadow:9px 10px 0 #7c151a; }.photo-four { right:8%; bottom:4%; transform:rotate(7deg); }.photo-five { top:21%; left:19%; z-index:2; transform:rotate(2deg); border-color:var(--orange); box-shadow:9px 10px 0 #8d350a; }.gallery-photo.hidden { opacity:.1; pointer-events:none; transform:scale(.84); }
.content-section { max-width:1040px; margin:0 auto; padding:90px clamp(24px,7vw,95px); border-top:2px solid #00a9b755; text-align:center; }.content-section > p:not(.eyebrow) { max-width:700px; margin:22px auto 0; font-size:1.08rem; line-height:1.7; }.content-section h2 { font-size:clamp(2rem,4.5vw,3.8rem); }.reviews-section { max-width:none; background:#0b1011d9; }.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:42px auto 0; text-align:left; }.review-grid figure { margin:0; padding:26px; border:2px solid var(--teal); background:#111819; box-shadow:7px 7px 0 #00636b; }.review-grid figure:nth-child(2) { border-color:var(--orange); box-shadow:7px 7px 0 #8b350b; }.review-grid figure:nth-child(3) { border-color:var(--lime); box-shadow:7px 7px 0 #53670c; }.review-grid blockquote { margin:0; line-height:1.6; }.review-grid figcaption { margin-top:20px; color:var(--orange); font:400 1.1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; }.contact { max-width:none; border-color:#c9282d88; background:#0b0e0f; }.contact-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-top:30px; }.call-button,.email-button,.facebook-link { display:inline-block; padding:13px 19px; border:2px solid var(--teal); color:var(--bone); background:#101718; text-decoration:none; font:400 1.1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; box-shadow:5px 5px 0 #00636b; transition:.2s; }.email-button { border-color:var(--orange); box-shadow:5px 5px 0 #8b350b; }.facebook-link { margin-top:24px; border-color:var(--red); box-shadow:5px 5px 0 #781419; }.call-button:hover,.email-button:hover,.facebook-link:hover { transform:translateY(-3px); filter:brightness(1.15); } footer { padding:21px; color:#bfc7c5; background:#050606; text-align:center; font-size:.82rem; }
.lightbox { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:clamp(28px,5vw,72px); border:0; background:#050708ed; cursor:zoom-out; }.lightbox::backdrop { background:#000c; }.lightbox-image { width:100%; height:100%; object-fit:contain; }.lightbox-close { position:fixed; top:18px; right:24px; width:44px; height:44px; border:2px solid var(--teal); border-radius:50%; color:white; background:#111819; cursor:pointer; font-size:2rem; }
@media (max-width:760px) { .topbar { padding:12px; }.site-nav { gap:7px; }.site-nav a { min-width:0; padding:8px 10px; font-size:.9rem; }.landing-showcase { padding-top:40px; }.showcase-logo { width:95vw; top:80px; opacity:.28; }.gallery-layout { grid-template-columns:1fr; min-height:0; }.photo-stack { order:-1; width:50%; height:215px; }.category-column { flex-direction:row; justify-content:center; gap:14px; }.category-column--left,.category-column--right { align-items:center; }.category-card { width:30%; }.category-card span { top:-13px; left:-8px; min-width:0; padding:5px 7px; font-size:.82rem; }.review-grid { grid-template-columns:1fr; }.content-section { padding-block:70px; } }
@media (prefers-reduced-motion:reduce) { .title-logo { animation:none; } }

.private-view-count { max-width:620px; margin:12px auto 0; padding:13px 16px; border:1px solid var(--teal); background:#06181bcc; color:#f3eee1; box-shadow:4px 4px 0 #00434a; font-weight:700; }

/* Quieter gallery framing: let the work photos be the focus. */
.category-card,.category-card:nth-child(2),.category-card:nth-child(3) { border-color:#172225; box-shadow:6px 7px 0 #050607,0 0 7px #00a9b744,0 0 14px #00a9b722; }
.category-card:nth-child(2) { box-shadow:6px 7px 0 #050607,0 0 7px #f4762144,0 0 14px #f4762122; }.category-card:nth-child(3) { box-shadow:6px 7px 0 #050607,0 0 7px #a8c72d44,0 0 14px #a8c72d22; }
.category-card span { border-color:#050607; }.category-card:hover,.category-card.active { filter:brightness(1.07); }
.gallery-photo,.photo-all,.photo-two,.photo-three,.photo-five { border-color:#12191b; box-shadow:7px 8px 0 #050607,0 0 7px #00a9b733; }.photo-all,.photo-five { box-shadow:7px 8px 0 #050607,0 0 7px #f4762133; }.photo-two { box-shadow:7px 8px 0 #050607,0 0 7px #a8c72d33; }.photo-three { box-shadow:7px 8px 0 #050607,0 0 7px #c9282d33; }

/* Dark-metal navigation bar with a restrained red/orange interaction glow. */
.topbar { border-bottom-color:#202a2c; background:linear-gradient(180deg,#171d1fef,#070a0bf2); box-shadow:0 6px 18px #0008; }
.site-nav { gap:8px; padding:6px; border:1px solid #313c3e; border-radius:4px; background:#050708aa; box-shadow:inset 0 1px #ffffff12,0 4px 12px #0008; }
.site-nav a,.site-nav a:nth-child(1),.site-nav a:nth-child(2),.site-nav a:nth-child(3),.site-nav a:nth-child(4) { position:relative; min-width:112px; overflow:hidden; border:1px solid #3b484a; color:#e8e3d8; background:linear-gradient(145deg,#252e30,#111718 54%,#080b0c); box-shadow:inset 0 1px #ffffff18,0 2px 4px #000; }.site-nav a::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 0 44%,#ffffff12 45% 48%,transparent 49% 100%); pointer-events:none; }.site-nav a:hover { color:#fff; border-color:#f47621; background:linear-gradient(145deg,#3a1d13,#22120d 54%,#100907); box-shadow:inset 0 1px #ffffff22,0 0 9px #f4762188,0 0 18px #c9282d66; }

.review-toggle,.review-form button { margin-top:34px; padding:13px 22px; border:1px solid #3b484a; color:#e8e3d8; background:linear-gradient(145deg,#252e30,#111718 54%,#080b0c); box-shadow:inset 0 1px #ffffff18,0 2px 4px #000; cursor:pointer; font:400 1.1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; letter-spacing:.05em; }.review-toggle:hover,.review-form button:hover { border-color:#f47621; box-shadow:inset 0 1px #ffffff22,0 0 9px #f4762188; }.review-form { display:grid; gap:15px; max-width:620px; margin:25px auto 0; padding:25px; border:1px solid #334043; background:#0a0e0fe8; text-align:left; }.review-form label { display:grid; gap:7px; color:var(--bone); font-weight:700; }.review-form input,.review-form textarea { width:100%; border:1px solid #3a484a; color:#fff; background:#141a1b; padding:11px; font:1rem "DM Sans",sans-serif; }.review-form textarea { resize:vertical; }.review-form button { justify-self:start; margin-top:0; }.review-form p { margin:0; color:#b7c1c0; font-size:.9rem; }
.reviews-page h1 { margin:0; color:var(--bone); font:400 clamp(2rem,4.5vw,3.8rem)/1.04 "Metal Mania","Oswald",sans-serif; text-transform:uppercase; text-shadow:3px 3px 0 #000,0 0 14px #000; }.review-submit { max-width:none; background:#090d0edb; }.website-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.review-status { min-height:1.4em; }
.admin-page h1 { margin:0; color:var(--bone); font:400 clamp(2rem,4.5vw,3.8rem)/1.04 "Metal Mania","Oswald",sans-serif; text-transform:uppercase; text-shadow:3px 3px 0 #000,0 0 14px #000; }.admin-page .content-section { max-width:860px; }.review-form select { width:100%; border:1px solid #3a484a; color:#fff; background:#141a1b; padding:11px; font:1rem "DM Sans",sans-serif; }.secondary-button { margin:0 !important; border-color:#303a3c !important; color:#c4cdca !important; background:#111719 !important; }.setup-note { max-width:620px; margin:24px auto 0; padding:14px; border:1px solid #f47621; background:#27150ecf; color:#fff; }.signed-in { margin:22px 0 0; color:var(--lime); font-weight:700; }.admin-link { margin-left:13px; color:#8e9a98; text-decoration:none; }.admin-link:hover { color:var(--orange); }
.site-credit { display:block; margin-top:7px; color:#6f7b79; font-size:.65rem; letter-spacing:.04em; }
.home-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:20px; }.home-actions a { padding:11px 16px; border:1px solid #3d4a4c; color:#f0eadf; background:#101719; box-shadow:inset 0 1px #ffffff18,0 3px 5px #0008; text-decoration:none; font:400 1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; }.home-actions a:last-child { border-color:#8c3b16; }.home-actions a:hover { transform:translateY(-2px); border-color:var(--orange); box-shadow:0 0 10px #f4762166; }.gallery-preview-note { margin:8px auto 0; color:#b7c1c0; text-align:center; font-size:.88rem; }.service-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:850px; margin:34px auto 25px; }.service-list span { padding:17px 12px; border:1px solid #2c3a3c; background:#0b1011da; color:#eae4d9; font:400 1.12rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; }.service-note { max-width:700px; margin:0 auto; color:#c1cbc8; line-height:1.6; }.services { background:#080d0ed6; }
@media (max-width:760px) { .service-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.home-actions a { font-size:.88rem; } }
.showcase-copy { margin:0 auto 2px; }.center-brand { display:flex; justify-content:center; align-items:flex-start; height:352px; margin:0 auto 4px; overflow:hidden; }.hero-logo { width:min(390px,68vw); height:auto; transform:translateY(-245px); filter:drop-shadow(0 12px 16px #000b); }.category-layout { display:grid; grid-template-columns:repeat(3,minmax(180px,230px)); justify-content:center; gap:24px; max-width:820px; margin:0 auto; }.category-layout .category-card { --tilt:0deg; width:100%; aspect-ratio:1.08; }.category-layout .category-card--misc { grid-column:2; }.category-layout .category-card:hover,.category-layout .category-card.active { transform:translateY(-6px) scale(1.02); }.service-area { margin:22px 0 0; color:var(--lime); text-align:center; font:500 .9rem "Oswald",sans-serif; letter-spacing:.14em; text-transform:uppercase; } @media (max-width:760px) { .landing-showcase { padding-top:8px; }.center-brand { height:308px; }.hero-logo { width:min(340px,78vw); transform:translateY(-220px); }.category-layout { grid-template-columns:repeat(2,minmax(140px,210px)); gap:22px; }.category-layout .category-card--misc { grid-column:2; } }

/* Red site backdrop with a bold black frame. */
body { background:radial-gradient(circle at 50% 15%,#e33a3f 0,#a90f17 38%,#57070b 72%,#260204 100%); }
body::after { inset:9px; border:6px solid #050505; outline:2px solid #ef3037; box-shadow:inset 0 0 0 2px #711016,0 0 18px #000b; }
.landing-showcase::before { background:linear-gradient(#65090cbc,#9d1017a8),radial-gradient(circle at 50% 42%,#ef4a4f44,transparent 42%); }

/* Small monochrome shop marks scattered through the red background. */
body::before {
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:.28;
  mix-blend-mode:multiply;
  background-image:url("archive-old-designs/mark-black.png"),url("archive-old-designs/mark-black.png"),url("archive-old-designs/mark-black.png"),url("archive-old-designs/mark-black.png"),url("archive-old-designs/mark-black.png");
  background-repeat:no-repeat;
  background-position:7% 22%,88% 17%,18% 68%,78% 60%,51% 90%;
  background-size:86px,55px,110px,70px,48px;
  filter:drop-shadow(0 0 5px #fff8) drop-shadow(0 0 12px #ffccd0aa);
  animation:logo-star-twinkle 5s ease-in-out infinite alternate;
}
body > header,body > main,body > footer { position:relative; z-index:1; }
@keyframes logo-star-twinkle { from { opacity:.18; filter:drop-shadow(0 0 3px #fff4); } to { opacity:.36; filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #ffb9be); } }
@media (prefers-reduced-motion:reduce) { body::before { animation:none; } }

/* Keep the marks in front of the page, while leaving every link clickable. */
body::before {
  z-index:90;
  opacity:.8;
  mix-blend-mode:normal;
  background-image:url("archive-old-designs/black-skull-transparent.png"),url("archive-old-designs/black-skull-transparent.png"),url("archive-old-designs/black-skull-transparent.png"),url("archive-old-designs/black-skull-transparent.png"),url("archive-old-designs/black-skull-transparent.png");
  background-position:7% 22%,88% 17%,18% 68%,78% 60%,51% 90%;
  background-size:86px,55px,110px,70px,48px;
  filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 8px #ffffff80);
}
body.marks-on-dark::before {
  opacity:.94;
  filter:invert(18%) sepia(93%) saturate(3481%) hue-rotate(346deg) brightness(95%) contrast(109%) drop-shadow(0 0 5px #ff343c) drop-shadow(0 0 12px #ff343c99);
}

/* Original rugged sledgehammer artwork, mirrored on the two sides of the screen. */
.side-hammer {
  position:fixed;
  z-index:89;
  top:50%;
  width:clamp(150px,17vw,270px);
  height:clamp(190px,25vw,360px);
  pointer-events:none;
  opacity:.94;
  background-image:url("sledgehammer.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 5px 5px #000a) drop-shadow(0 0 12px #ff303766);
}
.side-hammer--left { left:10px; transform:translateY(-50%) rotate(-12deg); }
.side-hammer--right { right:10px; transform:translateY(-50%) scaleX(-1) rotate(-12deg); }
.side-tool { position:fixed; z-index:88; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:contain; filter:drop-shadow(0 5px 5px #000a) drop-shadow(0 0 10px #ff303755); }
.side-tool--pry { top:40%; width:clamp(115px,13vw,205px); height:clamp(140px,18vw,250px); background-image:url("pry-bar.png"); }
.side-tool--saw { top:61%; width:clamp(130px,15vw,225px); height:clamp(120px,16vw,230px); background-image:url("hand-saw.png"); }
.side-tool--left { left:2px; }.side-tool--right { right:2px; transform:scaleX(-1); }
@media (max-width:760px) { .side-hammer { width:96px; height:135px; opacity:.8; }.side-hammer--left { left:-12px; }.side-hammer--right { right:-12px; } }
@media (max-width:760px) { .side-tool--pry { top:42%; width:78px; height:110px; }.side-tool--saw { top:60%; width:88px; height:100px; }.side-tool--left { left:-25px; }.side-tool--right { right:-25px; } }

/* Eddie is the one clear left-side decoration. */
.side-hammer,.side-tool { display:none; }
.side-eddie { position:fixed; z-index:0; left:clamp(-200px,-11vw,-90px); bottom:0; width:clamp(340px,42vw,680px); max-height:94vh; object-fit:contain; object-position:bottom left; pointer-events:none; transform:scaleX(-1); filter:drop-shadow(0 8px 12px #000b) drop-shadow(0 0 14px #ff303755); }
@media (max-width:760px) { .side-eddie { left:-102px; bottom:0; width:360px; max-height:60vh; opacity:.86; } }

/* Replace the skull field with a red, worn diamond-plate steel surface. */
body {
  background-image:linear-gradient(135deg,#5c0509 0%,#b5131a 36%,#e03138 52%,#8a0b10 72%,#350204 100%),url("archive-old-designs/black-diamond-plate.png");
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  background-blend-mode:color;
}
body::before { display:none; }
.landing-showcase::before { background:linear-gradient(#42030555,#7f0c1066),radial-gradient(circle at 50% 42%,#ff646422,transparent 48%); }

/* Keep Eddie's cutout true to color instead of tinting him as sections pass over it. */
.landing-showcase::before { background:none; }
.services,.reviews-section,.contact,.review-submit,footer { background:transparent; }

/* Right-side logo with a repeating normal-color / red-black static flicker. */
.center-brand { justify-content:flex-end; padding-right:0; }
.hero-logo { animation:logo-static-flicker 3.6s steps(1,end) infinite; }
@keyframes logo-static-flicker {
  0%,16%,22%,47%,55%,80%,100% { transform:translateY(-245px); filter:drop-shadow(0 12px 16px #000b); }
  18%,20%,49%,52%,82%,86% { transform:translateY(-245px) translateX(2px); filter:grayscale(1) contrast(1.9) sepia(1) saturate(8) hue-rotate(330deg) brightness(.65) drop-shadow(0 0 6px #ff2028) drop-shadow(0 0 14px #000); }
  21%,53%,87% { transform:translateY(-245px) translateX(-2px); filter:grayscale(1) contrast(2.3) sepia(1) saturate(10) hue-rotate(330deg) brightness(.48) drop-shadow(0 0 3px #ff2028); }
}
@media (max-width:760px) { .center-brand { justify-content:center; padding-right:0; }.hero-logo { animation-name:logo-static-flicker-mobile; } @keyframes logo-static-flicker-mobile { 0%,16%,22%,47%,55%,80%,100% { transform:translateY(-220px); filter:drop-shadow(0 12px 16px #000b); } 18%,20%,49%,52%,82%,86% { transform:translateY(-220px) translateX(2px); filter:grayscale(1) contrast(1.9) sepia(1) saturate(8) hue-rotate(330deg) brightness(.65) drop-shadow(0 0 6px #ff2028); } 21%,53%,87% { transform:translateY(-220px) translateX(-2px); filter:grayscale(1) contrast(2.3) sepia(1) saturate(10) hue-rotate(330deg) brightness(.48) drop-shadow(0 0 3px #ff2028); } } }

.eddie-speech { position:fixed; z-index:99; left:clamp(270px,20vw,390px); bottom:clamp(420px,54vh,620px); min-width:228px; padding:18px 28px; border:3px solid #f5f7ff; border-radius:50%; color:#fff; background:radial-gradient(ellipse at 35% 26%,#79b9ed 0%,#186da8 30%,#07395f 70%,#021c35 100%); box-shadow:0 5px 0 #02070c,0 0 0 3px #06375f,0 0 10px #0009; font:italic 700 1.1rem/1.15 Georgia,serif; letter-spacing:.02em; text-align:center; text-shadow:1px 1px 0 #001326; opacity:0; transform:translateY(8px) scale(.92); pointer-events:none; transition:opacity .18s,transform .18s; }.eddie-speech::after { content:""; position:absolute; left:-13px; bottom:17px; width:24px; height:24px; border-left:3px solid #f5f7ff; border-bottom:3px solid #f5f7ff; background:#084771; transform:rotate(45deg); }.eddie-speech.is-visible { opacity:1; transform:translateY(0) scale(1); } @media (max-width:760px) { .eddie-speech { left:118px; bottom:48vh; min-width:170px; padding:13px 16px; font-size:.82rem; } }

/* A steady glow is easier on the eyes than the old static flicker. */
.center-brand::before { display:none; }
.hero-logo { animation:none; filter:none; }

/* Animated deck blueprint in the open space between Eddie and the logo. */
.deck-wireframe { position:absolute; z-index:1; top:70px; left:27%; width:min(38vw,560px); height:330px; pointer-events:none; filter:drop-shadow(0 0 7px #000b); }.deck-wireframe svg { width:100%; height:100%; overflow:visible; }.deck-wireframe path,.deck-wireframe circle { fill:none; stroke:#ddf7ff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }.deck-wireframe circle { fill:#39cce4; stroke:#effcff; }.deck-stage { stroke-dasharray:1400; stroke-dashoffset:1400; opacity:0; animation:deck-build 9s linear infinite; }.deck-stage--base { animation-delay:0s; }.deck-stage--frame { animation-delay:1.4s; }.deck-stage--rail { animation-delay:2.9s; }.deck-stage--finish { animation-delay:4.8s; }.deck-stage--rail path:nth-child(2) { stroke:#ffb24c; }.deck-stage--finish { filter:drop-shadow(0 0 5px #39cce4); } @keyframes deck-build { 0% { stroke-dashoffset:1400; opacity:0; } 8% { opacity:1; } 34%,82% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } } @media (max-width:900px) { .deck-wireframe { left:30%; width:40vw; top:95px; opacity:.74; } } @media (max-width:760px) { .deck-wireframe { display:none; } } @media (prefers-reduced-motion:reduce) { .deck-stage { animation:none; stroke-dashoffset:0; opacity:1; } }

/* Oversized black sketch, kept beneath Eddie, the logo, and all page content. */
.deck-wireframe { position:fixed; z-index:0; top:110px; left:11vw; width:78vw; height:560px; opacity:.8; filter:none; }.deck-wireframe path,.deck-wireframe circle { stroke:#080808; stroke-width:4; }.deck-wireframe circle { fill:#111; stroke:#050505; }.deck-stage--rail path:nth-child(2) { stroke:#080808; }.deck-stage--finish { filter:none; }.deck-stage { animation-duration:10s; } @media (max-width:900px) { .deck-wireframe { top:125px; left:12vw; width:76vw; height:470px; } } @media (max-width:760px) { .deck-wireframe { display:none; } }

/* Photoreal deck and lumber pieces assembling in the background. */
.deck-wireframe { display:none; }
.real-deck-build { position:fixed; z-index:0; top:92px; left:12vw; width:min(78vw,1080px); height:610px; pointer-events:none; }.real-deck { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.83; filter:drop-shadow(0 12px 12px #000a); animation:deck-settle 10s ease-in-out infinite; }.deck-lumber { position:absolute; z-index:1; width:38%; height:auto; opacity:0; filter:drop-shadow(0 8px 7px #000b); animation:board-fly-in 10s cubic-bezier(.2,.75,.2,1) infinite; }.deck-lumber--1 { top:8%; left:8%; animation-delay:0s; }.deck-lumber--2 { top:21%; right:5%; animation-delay:1.15s; }.deck-lumber--3 { bottom:18%; left:0; animation-delay:2.3s; }.deck-lumber--4 { bottom:5%; right:10%; animation-delay:3.45s; } @keyframes deck-settle { 0%,18% { opacity:.25; transform:scale(.94); } 42%,82% { opacity:.83; transform:scale(1); } 100% { opacity:.25; transform:scale(.94); } } @keyframes board-fly-in { 0% { opacity:0; transform:translate(210%,-150%) rotate(35deg) scale(.38); } 5% { opacity:1; } 23% { opacity:1; transform:translate(15%,8%) rotate(0deg) scale(.72); } 29%,100% { opacity:0; transform:translate(15%,8%) rotate(0deg) scale(.72); } } .deck-lumber--2 { animation-name:board-fly-in-right; } .deck-lumber--3 { animation-name:board-fly-in-low; } .deck-lumber--4 { animation-name:board-fly-in-right-low; } @keyframes board-fly-in-right { 0% { opacity:0; transform:translate(-230%,-130%) rotate(-42deg) scale(.38); } 5% { opacity:1; } 23% { opacity:1; transform:translate(-12%,10%) rotate(0deg) scale(.72); } 29%,100% { opacity:0; transform:translate(-12%,10%) rotate(0deg) scale(.72); } } @keyframes board-fly-in-low { 0% { opacity:0; transform:translate(190%,120%) rotate(28deg) scale(.36); } 5% { opacity:1; } 23% { opacity:1; transform:translate(14%,-7%) rotate(0deg) scale(.7); } 29%,100% { opacity:0; transform:translate(14%,-7%) rotate(0deg) scale(.7); } } @keyframes board-fly-in-right-low { 0% { opacity:0; transform:translate(-220%,130%) rotate(-30deg) scale(.36); } 5% { opacity:1; } 23% { opacity:1; transform:translate(-8%,-5%) rotate(0deg) scale(.7); } 29%,100% { opacity:0; transform:translate(-8%,-5%) rotate(0deg) scale(.7); } } @media (max-width:900px) { .real-deck-build { top:125px; left:13vw; width:75vw; height:480px; } } @media (max-width:760px) { .real-deck-build { display:none; } } @media (prefers-reduced-motion:reduce) { .real-deck,.deck-lumber { animation:none; }.real-deck { opacity:.7; }.deck-lumber { display:none; } }

/* Black architectural deck blueprint drawn in the background. */
.real-deck-build { display:none; }
.blueprint-drawing { position:fixed; z-index:0; top:100px; left:10vw; width:80vw; height:610px; pointer-events:none; opacity:.72; }.blueprint-drawing svg { width:100%; height:100%; overflow:visible; }.blueprint-drawing path { fill:none; stroke:#070707; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }.blueprint-drawing .dimension { stroke-width:2; stroke-dasharray:8 7; }.blueprint-drawing text { fill:#070707; font:700 18px "DM Mono",monospace; letter-spacing:2px; }.blueprint-stage { stroke-dasharray:2600; stroke-dashoffset:2600; opacity:0; animation:blueprint-draw 12s linear infinite; }.blueprint-stage text { opacity:0; animation:blueprint-text 12s linear infinite; }.blueprint-stage--outline { animation-delay:0s; }.blueprint-stage--boards { animation-delay:1.6s; }.blueprint-stage--rail { animation-delay:3.3s; }.blueprint-stage--stairs { animation-delay:5s; }.blueprint-stage--notes { animation-delay:6.6s; }.blueprint-stage--notes text { animation-delay:6.6s; } @keyframes blueprint-draw { 0% { stroke-dashoffset:2600; opacity:0; } 7% { opacity:1; } 35%,82% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } } @keyframes blueprint-text { 0%,45% { opacity:0; } 55%,82% { opacity:1; } 100% { opacity:0; } } @media (max-width:900px) { .blueprint-drawing { top:125px; left:8vw; width:84vw; height:490px; } } @media (max-width:760px) { .blueprint-drawing { display:none; } } @media (prefers-reduced-motion:reduce) { .blueprint-stage { animation:none; stroke-dashoffset:0; opacity:1; }.blueprint-stage text { animation:none; opacity:1; } }

/* Quick contact panel replaces the background animation; full contact details remain below. */
.quick-contact { position:absolute; z-index:2; top:104px; left:clamp(410px,34vw,610px); display:grid; gap:8px; width:clamp(260px,22vw,360px); padding:18px 22px; border:2px solid #080808; color:#f7f0e5; background:linear-gradient(145deg,#18090bdd,#060707ee); box-shadow:7px 8px 0 #080808,0 0 0 1px #bd1b22; text-align:center; }.quick-contact p { margin:0 0 2px; color:#ffd2d4; font:500 1rem "Oswald",sans-serif; letter-spacing:.12em; text-transform:uppercase; }.quick-contact a { color:#fff; font-weight:700; text-decoration:none; }.quick-contact > a:not(.quick-facebook) { font-size:1.1rem; }.quick-contact .quick-facebook { margin-top:4px; padding-top:9px; border-top:1px solid #ffffff33; color:#9edfe9; font-size:.86rem; }.quick-contact a:hover { color:#ffbd70; } @media (max-width:900px) { .quick-contact { left:37vw; width:30vw; } } @media (max-width:760px) { .quick-contact { position:relative; top:auto; left:auto; width:min(92vw,370px); margin:0 auto 20px; } }

/* One unified contact treatment: clean black panels that read clearly on the red metal. */
.quick-contact { top:126px; left:clamp(360px,30vw,520px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; width:min(48vw,690px); padding:0; border:0; background:transparent; box-shadow:none; text-align:center; }
.quick-contact a,.contact-actions .call-button,.contact-actions .email-button,.contact .facebook-link { display:flex; align-items:center; justify-content:center; min-height:62px; padding:12px 18px; border:2px solid #050505; outline:1px solid #f6f1e244; color:#f7f0e5; background:linear-gradient(145deg,#172021f2,#080c0de8); box-shadow:5px 6px 0 #050505; font:400 clamp(.92rem,1.3vw,1.1rem)/1.15 "Metal Mania","Oswald",sans-serif; letter-spacing:.025em; text-decoration:none; text-transform:uppercase; transition:transform .18s ease,background .18s ease,color .18s ease; }
.quick-contact > a:not(.quick-facebook) { font-size:clamp(.92rem,1.3vw,1.1rem); }
.quick-contact .quick-facebook { grid-column:1 / -1; justify-self:center; width:min(100%,285px); min-height:52px; margin:0; padding:10px 15px; border-top:2px solid #050505; color:#f7f0e5; font-size:1rem; }
.quick-contact a:hover,.contact-actions .call-button:hover,.contact-actions .email-button:hover,.contact .facebook-link:hover { color:#fff; background:#202a2c; filter:none; transform:translateY(-3px); }
.contact-actions .call-button,.contact-actions .email-button { min-width:min(100%,310px); }
.contact .facebook-link { width:min(100%,285px); margin:24px auto 0; }
@media (max-width:900px) { .quick-contact { left:37vw; width:46vw; } }
@media (max-width:760px) { .quick-contact { position:relative; top:auto; left:auto; grid-template-columns:1fr; width:min(92vw,470px); margin:0 auto 26px; } .quick-contact .quick-facebook { grid-column:auto; width:100%; } .contact-actions .call-button,.contact-actions .email-button { width:100%; } }

/* Stagger the upper contact choices through the open center space, leaving the logo unobstructed. */
@media (min-width:761px) {
  .quick-contact { top:156px; left:clamp(350px,29vw,500px); grid-template-columns:1fr; gap:16px; width:clamp(280px,22vw,350px); }
  .quick-contact > a { width:100%; }
  .quick-contact > a:nth-child(2) { margin-left:clamp(55px,6vw,105px); }
  .quick-contact .quick-facebook { grid-column:auto; justify-self:start; width:calc(100% - 28px); margin-left:clamp(28px,3vw,54px); }
}

/* The happy-surprised version gets a little extra room for both raised hands. */
.side-eddie.is-surprised { left:clamp(-200px,-11vw,-90px); width:clamp(340px,42vw,680px); }

/* Center statement: bright, electric edge without an animated flicker. */
.forbes-tough { position:absolute; z-index:1; top:clamp(108px,11vw,165px); left:clamp(315px,24vw,390px); width:clamp(430px,34vw,550px); margin:0; color:#fff8e9; font:400 clamp(3rem,5.8vw,6.5rem)/.9 "Metal Mania","Oswald",sans-serif; letter-spacing:.035em; text-align:center; text-transform:uppercase; text-shadow:0 0 2px #fff,0 0 7px #71dfff,0 0 14px #008ddb,0 0 24px #cf1720,4px 4px 0 #180102; filter:drop-shadow(0 0 10px #4bc7ff88); transition:opacity .18s ease,transform .18s ease; pointer-events:none; }
.forbes-tough strong { color:#fff; font:inherit; text-shadow:0 0 2px #fff,0 0 9px #e72c35,0 0 19px #ff343d,0 0 30px #008ddb,4px 4px 0 #180102; }
.title-word { display:inline-block; animation:forbes-slam-left .72s cubic-bezier(.16,.89,.3,1.35) both; }
.title-word--forbes { animation-name:forbes-slam-right; animation-delay:.38s; }
.title-word--tough { display:block; animation-name:forbes-slam-up; animation-delay:.76s; }
@keyframes forbes-slam-left { 0% { opacity:0; transform:translateX(-115vw) rotate(-10deg) scale(1.25); } 72% { opacity:1; transform:translateX(18px) rotate(1deg) scale(1.06); } 88% { transform:translateX(-7px) scale(.98); } 100% { opacity:1; transform:translateX(0) rotate(0) scale(1); } }
@keyframes forbes-slam-right { 0% { opacity:0; transform:translateX(115vw) rotate(10deg) scale(1.25); } 72% { opacity:1; transform:translateX(-18px) rotate(-1deg) scale(1.06); } 88% { transform:translateX(7px) scale(.98); } 100% { opacity:1; transform:translateX(0) rotate(0) scale(1); } }
@keyframes forbes-slam-up { 0% { opacity:0; transform:translateY(75vh) scale(1.3); } 72% { opacity:1; transform:translateY(-16px) scale(1.06); } 88% { transform:translateY(6px) scale(.98); } 100% { opacity:1; transform:translateY(0) scale(1); } }
.forbes-tough.is-hidden { opacity:0; transform:scale(.94); }
@media (max-width:760px) { .forbes-tough { position:relative; top:auto; left:auto; width:auto; margin:4px auto 22px; font-size:clamp(2rem,10vw,3.8rem); } }
@media (prefers-reduced-motion:reduce) { .title-word { animation:none; } }

/* Let Eddie's project photos show at their natural, clear brightness. */
.category-layout .category-card {
  background: linear-gradient(#ffffff10, #ffffff10), var(--photo) center/cover;
  filter: brightness(1.15) contrast(1.06) saturate(1.08);
}
.category-layout .category-card:hover,
.category-layout .category-card.active {
  filter: brightness(1.22) contrast(1.07) saturate(1.1);
}

/* Phone layout: keep the logo clear of Eddie's head. */
@media (max-width:760px) {
  .center-brand {
    justify-content: flex-end;
    align-items: flex-start;
    height: 225px;
    padding-right: 10px;
  }

  .hero-logo {
    width: min(48vw, 230px);
    transform: translateY(-82px);
  }

  .hero-logo,
  .hero-logo:hover { animation: none; filter: drop-shadow(0 7px 10px #000b); }
}

/* Keep the layout organized when a touchscreen requests a desktop browser view. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) {
  .landing-showcase { padding-top:8px; }
  .center-brand { justify-content:flex-end; align-items:flex-start; height:225px; padding-right:10px; }
  .hero-logo { width:min(48vw,230px); transform:translateY(-82px); animation:none; filter:drop-shadow(0 7px 10px #000b); }
  .forbes-tough { position:relative; top:auto; left:auto; width:auto; margin:4px auto 22px; font-size:clamp(2rem,10vw,3.8rem); }
  .side-eddie { left:-102px; bottom:0; width:360px; max-height:60vh; opacity:.86; }
  .category-layout { grid-template-columns:repeat(2,minmax(140px,210px)); gap:22px; }
  .category-layout .category-card--misc { grid-column:2; }
}

/* Private photo-management controls. */
.photo-manager { margin:52px auto 0; padding:28px; border:1px solid #557075; background:#080d0edd; text-align:left; }
.photo-manager-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.photo-manager h2 { margin:0; font-size:clamp(1.8rem,4vw,3rem); }
.photo-manager-heading p:not(.eyebrow) { max-width:620px; margin:8px 0 0; color:#c8d1cf; line-height:1.5; }
.admin-photo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-top:22px; color:#c8d1cf; }
.admin-photo-card { overflow:hidden; border:1px solid #53666a; background:#111819; box-shadow:5px 6px 0 #000; }
.admin-photo-card img { display:block; width:100%; height:150px; object-fit:cover; background:#0b1011; }
.admin-photo-card > div { display:grid; gap:7px; padding:12px; }
.admin-photo-card strong { color:var(--bone); font:400 1.1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; }
.admin-photo-card span { min-height:2.5em; color:#c8d1cf; font-size:.86rem; line-height:1.3; }
.remove-photo-button { padding:8px 10px; border:1px solid #d73b42; color:#fff4ef; background:#4c1014; cursor:pointer; font:600 .86rem "Oswald",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.remove-photo-button:hover { background:#78171d; }.remove-photo-button:disabled { cursor:wait; opacity:.65; }
@media (max-width:760px) { .photo-manager { padding:20px; }.photo-manager-heading { display:block; }.photo-manager-heading .secondary-button { margin-top:16px; }.admin-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.admin-photo-card img { height:120px; } }

/* Replay the three-word entrance about once every ten seconds. */
.title-word { animation-duration:10s; animation-iteration-count:infinite; }
.title-word--forbes,.title-word--tough { animation-delay:0s; }
@keyframes forbes-slam-left {
  0% { opacity:0; transform:translateX(-115vw) rotate(-10deg) scale(1.25); }
  5.2% { opacity:1; transform:translateX(18px) rotate(1deg) scale(1.06); }
  6.5% { transform:translateX(-7px) scale(.98); }
  8% { opacity:1; transform:translateX(0) rotate(0) scale(1); }
  100% { opacity:1; transform:translateX(0) rotate(0) scale(1); }
}
@keyframes forbes-slam-right {
  0%,4% { opacity:0; transform:translateX(115vw) rotate(10deg) scale(1.25); }
  9.2% { opacity:1; transform:translateX(-18px) rotate(-1deg) scale(1.06); }
  10.5% { transform:translateX(7px) scale(.98); }
  12% { opacity:1; transform:translateX(0) rotate(0) scale(1); }
  100% { opacity:1; transform:translateX(0) rotate(0) scale(1); }
}
@keyframes forbes-slam-up {
  0%,8% { opacity:0; transform:translateY(75vh) scale(1.3); }
  13.2% { opacity:1; transform:translateY(-16px) scale(1.06); }
  14.5% { transform:translateY(6px) scale(.98); }
  16% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce) { .title-word { animation:none; } }
.category-card { color:inherit; text-decoration:none; }.gallery-page h1 { margin:0; color:var(--bone); font:400 clamp(2rem,4.5vw,3.8rem)/1.04 "Metal Mania","Oswald",sans-serif; text-transform:uppercase; text-shadow:3px 3px 0 #000,0 0 14px #000; }.gallery-page-links { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; max-width:900px; margin:34px auto 42px; }.gallery-page-links a { padding:9px 14px; border:1px solid #354245; color:#e8e3d8; background:#101718; text-decoration:none; font:400 1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; }.gallery-page-links a:hover { border-color:var(--orange); color:#fff; box-shadow:0 0 8px #f4762166; }.uploaded-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; max-width:1120px; margin:auto; }.uploaded-gallery-photo { position:relative; min-height:235px; overflow:hidden; border:2px solid #1f2b2d; background:#101719; cursor:zoom-in; box-shadow:6px 7px 0 #050607,0 0 8px #00a9b733; }.uploaded-gallery-photo img { display:block; width:100%; height:235px; object-fit:cover; transition:transform .25s; }.uploaded-gallery-photo span { display:block; padding:10px; color:#e8e3d8; font:400 1rem "Metal Mania","Oswald",sans-serif; text-transform:uppercase; text-align:left; }.uploaded-gallery-photo:hover img { transform:scale(1.04); }.gallery-message { max-width:580px; margin:25px auto 0; color:#c2cdca; line-height:1.6; }