/*
Theme Name: The Resource Factory 2026
Author: WebberSites Website Design & Development
Author URI: http://webbersites.com
Description: Steampunk machinery theme — GSAP-animated layered header, portfolio frame grid, contact pipes. Built from the 2026 static site with super-default-theme as backbone.
Version: 1.1
Text Domain: theresourcefactory
*/

/* ------------------------------------------------------------------
   The Resource Factory — layered steampunk header
   Design space: mockup is 3000px wide; header machinery band is 700px
   tall in design coordinates. Every layer is positioned with
   percentages of that space so the whole assembly scales fluidly.
   left  = x / 3000 * 100%
   top   = y / 700  * 100%
   width = w / 3000 * 100%
------------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  overflow-x: hidden; /* the filmstrip starts off-canvas left */
}

/* ---- hero background: photos, grain, dark falloff ---- */

/* anchored to the top of the page and scrolls away naturally with content.
   height = photo offset (10vw) + a 16:9 photo at full width (56.5vw) */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vw * 0.665);
  z-index: -1;
  overflow: hidden;
}

/* photos always span the full width at natural aspect; taller photos crop
   at the bottom of the slot instead of zooming/cropping the sides */
.hero-slide {
  position: absolute;
  inset: 0;
  top: calc(100vw * 0.1); /* photos sit 300px (design) down from the top */
  background-size: cover; /* fills the slot at every ratio — no letterbox */
  background-position: top center;
  opacity: 0;
}

.hero-slide:first-child {
  opacity: 1;
}

/* film grain: sits above the shade so the dark areas shimmer too.
   screen blend lifts blacks slightly instead of disappearing on them;
   the 800px tile renders at 400px so the grain is extra fine */
.hero-grain {
  position: absolute;
  inset: -50%;
  background: url("assets/img/grain.png");
  background-size: 400px 400px;
  mix-blend-mode: screen;
  opacity: 0.1;
  animation: grain-jitter 0.8s steps(1) infinite;
}

@keyframes grain-jitter {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-2%, 1%); }
  25%   { transform: translate(1%, -2%); }
  37.5% { transform: translate(-1%, 2%); }
  50%   { transform: translate(2%, 1%); }
  62.5% { transform: translate(-2%, -1%); }
  75%   { transform: translate(1%, 2%); }
  87.5% { transform: translate(2%, -2%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grain { animation: none; }
}

/* top-gradient.png is black fading to transparent; solid black above it keeps
   the machinery band dark, and the photos emerge through the falloff below */
.hero-shade {
  position: absolute;
  inset: 0;
  background-image:
    url("assets/img/top-gradient.png"),
    linear-gradient(#000, #000);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, 100% calc(100vw * 0.0307); /* 89 / 3000 */
  background-position: 0 calc(100vw * 0.0297), 0 0;
}

/* ---- header stage ---- */

/* fixed so the condensed header stays put; body padding preserves layout.
   pointer-events off lets clicks pass through the transparent lower area
   once the machinery has tightened up (buttons re-enable their own) */
.rf-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 3000 / 700;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

body {
  padding-top: 23.3333vw; /* header height (3000:700) */
}

.rf-stage {
  position: absolute;
  inset: 0;
}

/* black falloff attached to the fixed header; hidden at the top of the
   page (the hero's own gradient covers that), shown once condensed */
.rf-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    #000 0%, #000 22%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
}

.layer {
  position: absolute;
  display: block;
  height: auto;
}

.rf-btn {
  cursor: pointer;
  will-change: transform, filter;
  pointer-events: auto;
}

.rf-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- layer placement (x, y, w from the mockup) ---- */

#left-gear-3        { left: -8.0333%; top: -28.2857%; width: 28.2333%; } /* -241, -198, 847 */
#left-gear-2        { left: 17.7667%; top:  21.5714%; width:  7.6%;    } /*  533,  151, 228 */
#left-gear-1        { left: 23.6333%; top:  -9.7143%; width: 15.3333%; } /*  709,  -68, 460 */
#left-canister      { left: 13.8%;    top:  38.4286%; width: 21.1667%; } /*  414,  269, 635 */
#left-canister-arm  { left:  3.8667%; top:  22.4286%; width: 15.1%;    } /*  116,  157, 453 */
#portfolio-button   { left: 10.4%;    top:  21%;      width: 19.5333%; } /*  312,  147, 586 */
#right-gear-3       { left: 58.4667%; top: -22.7143%; width: 21.6667%; } /* 1754, -159, 650 */
#right-gear-2       { left: 61.0333%; top:  31.2857%; width: 12.6667%; } /* 1831,  219, 380 */
#right-gear-4       { left: 72.2%;    top:  13.2857%; width:  6.3333%; } /* 2166,   93, 190 */
#right-gear-1       { left: 76.0667%; top: -24.5714%; width: 27.6333%; } /* 2282, -172, 829 */
#right-canister-arm { left: 67.2667%; top:  40.7143%; width: 19.0333%; } /* 2018,  285, 571 */
#contact-button     { left: 70.6333%; top:  20.4286%; width: 19.5333%; } /* 2119,  143, 586 */
#robotic-arm        { left: 51.9333%; top:   0.5714%; width:  8.2%;    } /* 1558,    4, 246 */
#resource-logo      { left: 39.7%;    top:  17.4286%; width: 21.9%;    } /* 1191,  122, 657 — visual mass dead-center */

#resource-logo {
  cursor: pointer;
  pointer-events: auto; /* header ignores events; the logo opts back in */
}
#top-bar            { left: 0;        top: 0;         width: 100%;     }

/* ---- page content ---- */

main {
  position: relative;
  padding-bottom: 3vh; /* breathing room before the footer */
}

.page-section {
  min-height: 85vh;
  display: grid;
  place-items: center;
}

.page-section h2 {
  color: #c9a86a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* header is 23.3333vw tall (3000:700); this lands the ticker at the fold */
.fold-spacer {
  height: calc(100vh - 23.3333vw);
}

/* ---- logo ticker ---- */

.logo-ticker {
  overflow: hidden;
  background: #000; /* solid — the hero photo runs behind this band */
  padding: 26px 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
}

.ticker-set {
  display: flex;
  align-items: center;
  gap: clamp(44px, 6vw, 100px);
  padding-right: clamp(44px, 6vw, 100px);
}

/* --h is each logo's native height; 94 is the source strip height, so
   every logo keeps its designed scale relative to the row */
.ticker-set img {
  height: calc(clamp(56px, 6vw, 94px) * var(--h) / 94);
  width: auto;
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---- video section ---- */

.video-section {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-content {
  position: absolute;
  inset: 0;
}

/* filmstrip straddles the video's bottom edge; the negative margin is the
   amount it cuts into the video (strip is 3019x467 -> ~15.5vw tall) */
.filmstrip {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: -3vw;
  z-index: 1;
}

/* ---- portfolio section ---- */

/* pulled up so the top filmstrip straddles the video/portfolio boundary:
   3vw of the strip cuts into the video above, the rest rides over the
   portfolio's smoke background. z-index 0 keeps the strip (z-index 1)
   painting on top of the section's video */
.portfolio-section {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-top: -12.5vw;
  padding: 14vw 0 11vw; /* clears the top strip / makes room for the bottom one */
}

.portfolio-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* slight blur pushes the smoke back; the scale hides the soft edges */
  filter: blur(2.5px);
  transform: scale(1.04);
}

.portfolio-bg.pf-vid-active {
  opacity: 1;
}

/* content column matches the mockup: grid spans ~76% of the page */
.portfolio-inner {
  width: 76%;
  margin: 0 auto;
}

.pf-logo {
  display: block;
  width: 82%;
  max-width: none;
  margin: 0 auto 0.5vw;
}

.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
  row-gap: 0;
  align-items: center;
}

/* an odd last item centers itself across the two columns */
@media (min-width: 769px) {
  .pf-grid > .pf-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 49%; /* matches a single column's width */
    justify-self: center;
  }
}

/* the frame art carries transparent padding below each nameplate; the
   negative margin eats it so the rows interlock like the mockup */
.pf-item {
  position: relative;
  margin-bottom: -2vw;
  cursor: pointer;
  will-change: transform, filter;
}

.pf-frame {
  display: block;
  position: relative; /* above the photo */
  width: 100%;
  height: auto;
}

/* placeholder behind each frame's transparent window. percentages are the
   window's measured position inside the 1200x750 frame art (warner bros is
   1200x700). when real photos come in, drop an <img> inside .pf-photo with
   width/height 100% and object-fit: cover — the frame crops it perfectly */
.pf-photo {
  position: absolute;
  background: #555;
}

.pf-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* windows are measured as everything not fully opaque inside the metal
   ring — the photo must also run under the semi-transparent glass tubes,
   vials, and shadow falloffs so nothing peeks through to the smoke */
.pf-disney        .pf-photo { left: 16.92%; top: 21.47%; width: 72.42%; height: 58.53%; } /* 203, 161, 869x439 */
.pf-nickelodeon   .pf-photo { left: 17.92%; top: 18.93%; width: 64.83%; height: 58.27%; } /* 215, 142, 778x437 */
.pf-universal     .pf-photo { left: 14.33%; top: 18.53%; width: 76.58%; height: 58.80%; } /* 172, 139, 919x441 */
.pf-warnerbros    .pf-photo { left: 15.25%; top: 17.29%; width: 68.25%; height: 58.57%; } /* 183, 121, 819x410 (700-tall art) */
.pf-nintendo      .pf-photo { left: 10.25%; top: 17.60%; width: 76.58%; height: 58.53%; } /* 123, 132, 919x439 */
.pf-fountains     .pf-photo { left: 10.58%; top: 18.13%; width: 76.75%; height: 59.07%; } /* 127, 136, 921x443 */
.pf-storedisplays .pf-photo { left: 12.08%; top: 22.53%; width: 76.83%; height: 59.47%; } /* 145, 169, 922x446 */
.pf-signage       .pf-photo { left:  8.67%; top: 21.60%; width: 76.50%; height: 59.33%; } /* 104, 162, 918x445 */
.pf-samsung       .pf-photo { left: 11.75%; top: 16.53%; width: 76.67%; height: 59.60%; } /* 141, 124, 920x447 */
.pf-highpoint     .pf-photo { left: 10.25%; top: 16.80%; width: 76.58%; height: 59.20%; } /* 123, 126, 919x444 */
.pf-reallycoolstuff .pf-photo { left: 15.08%; top: 16.80%; width: 67.42%; height: 60.00%; } /* 181, 126, 809x450 */

/* bottom filmstrip straddles the portfolio section's bottom edge */
.filmstrip-bottom {
  margin-top: -7vw;
}

/* ---- contact section ---- */

/* the frame art (3000x1584) defines the section's size; the info column
   and the form are laid over it in percentages of that space */
.contact-section {
  position: relative;
  z-index: 0;
  margin-top: 2.5vw; /* breathing room below the filmstrip above */
  font-family: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}

.contact-frame {
  display: block;
  width: 100%;
  height: auto;
}

.contact-info {
  position: absolute;
  left: 15.6%;
  top: 25.5%;
  width: 30%;
  color: #f2d896;
  font-weight: 700;
  font-size: 1.45vw;
  line-height: 1.4;
  letter-spacing: 0.02em;
  /* depth + a faint warm halo lifts the text off the black */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 16px rgba(242, 216, 150, 0.22);
}

.contact-info h3 {
  font-size: 1.9vw;
  margin-bottom: 0;
  line-height: 1.25;
  letter-spacing: 0.05em;
  /* brushed-brass gradient across the letterforms */
  background: linear-gradient(175deg, #fdf0c6 20%, #e9cf92 55%, #b98f52 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.contact-info p {
  margin-bottom: 1.7vw;
}

.contact-info .ci-cta {
  margin-top: 1.7vw;
}

.contact-info a,
.contact-quick a,
.footer-line a {
  color: inherit;
  text-decoration: none;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.contact-info a:hover,
.contact-quick a:hover,
.footer-line a:hover {
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
}

/* -- form column -- */

.contact-form {
  position: absolute;
  left: 51.5%;
  top: 20%;
  width: 33.7%;
  display: flex;
  flex-direction: column;
}

.cf-label {
  color: #f2d896;
  font-weight: 700;
  font-size: 1.35vw;
  margin: 0 0 0.45vw 1%;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(242, 216, 150, 0.2);
}

/* glowing pipe inputs: the jpg lives on a wrapper (inputs can't carry
   pseudo-elements) and the transparent input floats on top */
.cf-barwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1010 / 93;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 1.1vw;
}

.cf-name-bg  { background-image: url("assets/img/name-bg.jpg"); }
.cf-email-bg { background-image: url("assets/img/email-bg.jpg"); }

.cf-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 7.5%; /* clears the metal end caps before text starts */
  font: inherit;
  font-weight: 700;
  font-size: 1.3vw;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 1; /* typed text rides above the shimmer */
}

/* energy shimmer: a soft light streak sweeps along the glass tube while
   the whole tube flickers irregularly, like unstable current */
.cf-barwrap::after,
.cf-msgunit::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(100deg,
    transparent 25%, rgba(255, 255, 255, 0.75) 50%, transparent 75%);
  background-size: 260% 100%;
  mix-blend-mode: overlay;
  animation:
    energy-drift 3.4s linear infinite,
    energy-flicker 2.7s steps(1) infinite;
}

.cf-barwrap::after {
  inset: 26% 4.5%; /* the tube region inside the metal frame */
}

/* the subject bar riding on top of the message unit gets its own tube,
   desynced so the two never pulse together */
.cf-msgunit::after {
  inset: 3.5% 3.5% auto;
  height: 12.5%;
  animation-delay: -1.3s, -0.9s;
}

@keyframes energy-drift {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

@keyframes energy-flicker {
  0%   { opacity: 0.55; }
  9%   { opacity: 0.3; }
  14%  { opacity: 0.62; }
  27%  { opacity: 0.38; }
  33%  { opacity: 0.68; }
  46%  { opacity: 0.32; }
  54%  { opacity: 0.6; }
  67%  { opacity: 0.42; }
  74%  { opacity: 0.7; }
  85%  { opacity: 0.36; }
  93%  { opacity: 0.58; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-barwrap::after,
  .cf-msgunit::after { animation: none; opacity: 0.4; }
}

/* honeypot field lives far off-screen; humans never see it */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* inline result line under the send button */
.cf-status {
  display: none;
  margin-top: 1vw;
  text-align: center;
  font-weight: 700;
  font-size: 1.2vw;
  color: #f2d896;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(242, 216, 150, 0.2);
}

.cf-status.error {
  color: #e08a7a;
}

/* focused field: its tube burns brighter */
.cf-barwrap:focus-within,
.cf-msgunit:focus-within {
  filter: brightness(1.12);
}

/* message-bg.jpg = subject bar + message box in one graphic; the fields
   are transparent controls positioned over their regions of it */
.cf-msgunit {
  position: relative;
  width: 100%;
  aspect-ratio: 1011 / 458;
  background: url("assets/img/message-bg.jpg") no-repeat;
  background-size: 100% 100%;
}

.cf-subject {
  position: absolute;
  left: 2.5%;
  top: 1.5%;
  width: 95%;
  height: 16.5%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 6%;
  font: inherit;
  font-weight: 700;
  font-size: 1.3vw;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.cf-message {
  position: absolute;
  left: 3%;
  top: 22%;
  width: 94%;
  height: 74%;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  padding: 2.5% 4.5%;
  font: inherit;
  font-weight: 700;
  font-size: 1.3vw;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.cf-message::placeholder,
.cf-bar::placeholder {
  color: #f2d896;
  opacity: 1;
}

.cf-send {
  align-self: center;
  width: 38%;
  margin-top: 0.6vw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cf-send img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.cf-send:hover img {
  transform: scale(1.04);
  /* luminosity pulse: the plate glows like the tubes feeding it power */
  animation: send-pulse 2.4s ease-in-out infinite;
}

@keyframes send-pulse {
  0%, 100% { filter: brightness(1.1); }
  50%      { filter: brightness(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .cf-send:hover img { animation: none; filter: brightness(1.25); }
}

/* final filmstrip sits clear of the contact art's bottom pipes */
.filmstrip-end {
  margin-top: 2.5vw;
}

/* ---- footer ---- */

.site-footer {
  background: #000;
  text-align: center;
  padding: 1vw 0 2.5vw;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 32px);
  margin-bottom: 1.6vw;
}

/* transforms are driven by the dock-magnify script; CSS only handles the
   glow. extra padding gives the magnified icons room to grow upward */
.footer-social {
  padding-top: 2.5vw;
}

.footer-social img {
  display: block;
  height: clamp(44px, 4.5vw, 88px);
  width: auto;
  transition: filter 0.25s ease;
}

.footer-social a:hover img {
  filter: brightness(1.25);
}

.footer-line {
  color: #f2d896; /* matches the contact column's cream */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 14px rgba(242, 216, 150, 0.2);
  font-family: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 22px);
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* the in-frame phone/email shortcut only exists on mobile */
.contact-quick {
  display: none;
}

/* ---- gear menu (mobile navigation; hidden on desktop) ---- */

#gear-menu,
#mobile-menu {
  display: none;
}

/* ---- mobile: compact machinery band + hero-first fold ---- */

@media (max-width: 768px) {

  /* the header is a full-screen fixed stage: a tight machinery band at
     the top, the logo center (delivered by the claw, docking into the
     band on scroll). the hero scrolls underneath as the first fold */
  .rf-header {
    aspect-ratio: auto;
    height: 100dvh;
  }

  body {
    padding-top: 0;
  }

  #top-bar {
    height: 18px;
    object-fit: cover; /* the 3000px bar is too thin at phone width */
  }

  /* -- machinery band: everything concentrates on the left, the canister
        dangles below the gears, and the right side stays clear so the
        menu gear stands alone -- */
  #left-gear-3       { left: -18%; top: -8vw;  width: 46%; }
  #left-gear-2       { left: 27%;  top: 0.5vw; width: 15%; }
  #right-gear-2      { left: 8%;   top: 2.5vw; width: 19%; } /* rides on top of the canister */
  #right-gear-4      { left: 10%;  top: 9.5vw; width: 12%; } /* rides the canister's lower half */
  #robotic-arm       { left: 40%;  top: 2px;   width: 20%; }

  /* fixed machinery cluster pinned to the bottom-right of the viewport —
     the header stage is fixed and full-screen, so bottom-anchored pieces
     stay put while the page scrolls behind them */
  #right-gear-1       { left: auto; right: -36%; top: auto; bottom: -34vw; width: 58%; }
  #right-gear-3       { left: auto; right: 16%;  top: auto; bottom: -30vw; width: 40%; }
  #left-gear-1        { left: auto; right: 42%;  top: auto; bottom: -28vw; width: 36%; }
  #right-canister-arm { left: auto; right: -22%; top: auto; bottom: -4vw;  width: 34%; }

  /* pieces that don't fit the compact layout */
  #left-canister,
  #left-canister-arm,
  #portfolio-button,
  #contact-button {
    display: none; /* navigation moves into the gear menu */
  }

  /* -- logo: delivered into the top third of the fold, smaller so the
        claw's trip stays short -- */
  #resource-logo {
    left: 23%;
    top: calc(24dvh - 20.5vw);
    width: 54%; /* small enough to sit fully clear of the band machinery */
  }

  /* the band's dark falloff is always on — the hero rides underneath */
  .rf-fade {
    opacity: 1;
    background: linear-gradient(to bottom,
      #000 0%, #000 10vw, rgba(0, 0, 0, 0.92) 22vw, rgba(0, 0, 0, 0.75) 38vw,
      rgba(0, 0, 0, 0.45) 56vw, rgba(0, 0, 0, 0) 78vw);
  }

  /* -- gear menu: an idle-spinning gear opens a circle-reveal overlay -- */
  #gear-menu {
    display: block;
    position: fixed;
    top: calc(18px + 2.5vw);
    right: 3vw;
    width: 14vw;
    height: 14vw;
    padding: 0;
    border: 0;
    background: none;
    z-index: 300;
    cursor: pointer;
  }

  #gear-menu img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  }

  /* the bars stay put while the gear ring turns around them — the
     !important also outranks any stray inline transform */
  #gear-menu .gm-icon {
    position: absolute;
    inset: 0;
    transition: filter 0.3s ease;
    transform: none !important;
  }

  #gear-menu:hover .gm-icon,
  #gear-menu:active .gm-icon {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) brightness(1.35);
  }

  #mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 250;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12vw;
    background: rgba(0, 0, 0, 0.96);
    clip-path: circle(0 at calc(97% - 7vw) calc(18px + 9.5vw));
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s 0.55s;
  }

  #mobile-menu.open {
    clip-path: circle(150% at calc(97% - 7vw) calc(18px + 9.5vw));
    visibility: visible;
    pointer-events: auto;
    transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  }

  /* a giant faint gear slowly turning behind the menu links */
  #mobile-menu::before {
    content: "";
    position: absolute;
    width: 150vw;
    height: 150vw;
    left: -25vw;
    top: calc(50% - 75vw);
    background: url("assets/img/left-gear-3.png") center / contain no-repeat;
    opacity: 0.1;
    animation: menu-gear-spin 60s linear infinite;
  }

  @keyframes menu-gear-spin {
    to { transform: rotate(360deg); }
  }

  /* the desktop header's machine buttons, big enough for thumbs */
  #mobile-menu a {
    position: relative;
    display: block;
    width: 74vw;
    will-change: transform, filter;
  }

  #mobile-menu a img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* -- hero: the first fold, full-bleed under the band -- */
  .hero-bg {
    top: 0;
    height: 100dvh;
  }

  .hero-slide {
    top: 0;
    background-size: cover;
    background-position: center;
  }

  .hero-shade {
    display: none; /* the band's own falloff handles the top */
  }

  .fold-spacer {
    height: 100dvh;
  }

  /* -- ticker -- */
  .logo-ticker {
    padding: 16px 0;
  }

  /* -- filmstrips span the full width so every sample image shows -- */
  .filmstrip {
    width: 100%;
  }

  .filmstrip-top    { margin-top: -4vw; }
  .filmstrip-bottom { margin-top: -7vw; }
  .filmstrip-end    { margin-top: 2.5vw; }

  /* -- portfolio: single column -- */
  .portfolio-section {
    margin-top: -12vw;
    padding: 16vw 0 14vw;
  }

  /* the smoke stretches to paint the whole tall section instead of
     zoom-cropping (desktop keeps cover) */
  .portfolio-bg {
    object-fit: fill;
  }

  .portfolio-inner {
    width: 92%;
  }

  .pf-logo {
    width: 92%;
  }

  .pf-grid {
    grid-template-columns: 1fr;
    row-gap: 2vw;
  }

  .pf-item {
    margin-bottom: -4vw;
  }

  /* -- contact: the pipe art carries the essentials (phone + email),
        then the form, then the centered extended info -- */
  .contact-section {
    display: flex;
    flex-direction: column;
    background: #000;
    padding-bottom: 10vw;
  }

  .contact-frame { order: 1; }
  .contact-form  { order: 2; }
  .contact-info  { order: 3; }

  .contact-info,
  .contact-form {
    position: static;
    width: 86%;
    margin: 7vw auto 0;
  }

  /* name + phone + email centered in the art's interior with equal
     breathing room above and below */
  .contact-quick {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.2vw;
    position: absolute;
    left: 8%;
    right: 8%;
    top: 12vw;     /* below the baked-in CONTACT title */
    height: 33vw;  /* the art is 52.8vw tall — this stays inside its pipes
                      even though the section itself is much taller */
    text-align: center;
    font-weight: 700;
  }

  .contact-quick a {
    display: block;
    color: #f2d896;
    text-decoration: none;
  }

  .cq-title {
    font-size: 5.6vw;
    letter-spacing: 0.05em;
    background: linear-gradient(175deg, #fdf0c6 20%, #e9cf92 55%, #b98f52 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
  }
  .cq-phone { font-size: 7vw; }
  .cq-email { font-size: 4.6vw; }

  .contact-quick a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 14px rgba(242, 216, 150, 0.25);
  }

  .contact-info    { font-size: 4vw; text-align: center; }
  .contact-info h3 { font-size: 5.4vw; }
  .contact-info p  { margin-bottom: 4vw; }

  .cf-label {
    font-size: 4.2vw;
    margin-bottom: 1.5vw;
  }

  .cf-barwrap {
    aspect-ratio: 1010 / 130; /* stretched taller for touch */
    margin-bottom: 3.5vw;
  }

  .cf-bar {
    font-size: 4.2vw;
  }

  .cf-msgunit { aspect-ratio: 1011 / 560; }
  .cf-subject { font-size: 4.2vw; height: 15%; }
  .cf-message { font-size: 4.2vw; top: 20%; height: 76%; }

  .cf-send {
    width: 52%;
    margin-top: 5vw;
  }

  .cf-status { font-size: 4vw; margin-top: 3vw; }

  /* -- footer: bigger tap targets -- */
  .footer-social {
    gap: 5vw;
    padding-top: 6vw;
  }

  .footer-social img {
    height: 13vw;
  }

  .footer-line {
    font-size: 3.4vw;
    padding: 0 6vw;
    line-height: 1.5;
  }
}


/* ---- WP additions ---- */

/* generic inner pages (search, archives, plain pages) */
.rf-page {
  min-height: 50vh;
  padding: 3vw 8vw 6vw;
  color: #e8d9c6;
  font-family: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}

.rf-page h1, .rf-page h2 {
  color: #c9a86a;
  margin-bottom: 1.5vw;
}

.rf-page p { margin-bottom: 1vw; line-height: 1.5; }
.rf-page a { color: #f2d896; }

/* Really Cool Stuff — content block on black between portfolio and contact */
.rcs-section {
  padding: 4vw 8vw;
  color: #e8d9c6;
  text-align: center;
  font-family: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}

.rcs-section h2 {
  color: #c9a86a;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2vw;
}

/* frames without a measured window yet (e.g. reallycoolstuff) get a
   typical opening until the art is measured */
.pf-frame-default .pf-photo {
  left: 12%; top: 18%; width: 76%; height: 58%;
}