/* Restrained interaction polish; no layout movement or hidden content. */
.nav-fixed { transition: background-color .25s ease, box-shadow .25s ease; }
.nav-fixed.is-scrolled { background: rgba(8,8,8,.97); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.btn { transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px); }
.service-card, .scope-box { transition: border-color .25s ease, box-shadow .25s ease; }
.text-link { transition: color .2s ease, text-decoration-color .2s ease; }
.questions summary { transition: color .2s ease; }
.questions details[open] summary { color: var(--color-accent); }
.field input, .field select, .field textarea { transition: border-color .2s ease, box-shadow .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201,168,76,.1); }
@media (hover: hover) and (pointer: fine) {
 .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(201,168,76,.13); }
 .service-card:hover { border-color: rgba(201,168,76,.4); box-shadow: 0 12px 36px rgba(0,0,0,.15); }
 .questions summary:hover { color: var(--color-accent); }
 .work-image img { transition: transform .65s cubic-bezier(.2,.7,.2,1); }
}
@media (max-width: 1000px) { .nav-logo { margin-right: auto; } }
@media (prefers-reduced-motion: reduce) {
 .btn:hover, .btn:active, .work-tile:hover img { transform: none; }
 *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Fade image layers independently of hero content. */
@keyframes hero-image-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
 .hero.home-photo-hero { isolation: isolate; background-image: none; overflow: hidden; }
 .hero.home-photo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,rgba(8,8,8,.86),rgba(8,8,8,.28)), linear-gradient(0deg,var(--color-bg),transparent 85%), url("../images/home-hero.jpg") center / cover no-repeat;
  animation: hero-image-arrive var(--motion-image-duration) ease-out both;
 }
 .page-hero.local-search-hero, .page-hero.about-hero, .page-hero.work-hero { isolation: isolate; overflow: hidden; background-image: none; }
 .page-hero.local-search-hero::after, .page-hero.about-hero::after, .page-hero.work-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-position: center 55%; background-size: cover; background-repeat: no-repeat; animation: hero-image-arrive var(--motion-image-duration) ease-out both;
 }
 .page-hero.local-search-hero::before, .page-hero.about-hero::before, .page-hero.work-hero::before { z-index: -1; }
 .page-hero.local-search-hero::after { background-image: url("https://images.unsplash.com/photo-1761850648640-2ee5870ee883?auto=format&fit=crop&w=2000&q=85"); }
 .page-hero.about-hero::after { background-image: url("https://images.unsplash.com/photo-1712217559117-665e01ae5bc8?auto=format&fit=crop&w=2000&q=85"); }
 .page-hero.work-hero::after { background-image: url("https://images.unsplash.com/photo-1659141170537-6e0aa70329a4?auto=format&fit=crop&w=2000&q=85"); }
 .page-hero.websites-hero::after { animation: hero-image-arrive var(--motion-image-duration) ease-out both; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
 .hero.home-photo-hero::before { background-image: linear-gradient(90deg,rgba(8,8,8,.86),rgba(8,8,8,.48)), linear-gradient(0deg,var(--color-bg),transparent 85%), url("../images/home-hero-mobile.jpg"); }
 .page-hero.local-search-hero::after, .page-hero.about-hero::after, .page-hero.work-hero::after { background-position: 60% center; }
}

/* Shared headline line reveals. */

h1, h2, h3 { font-weight: var(--h1-weight); }
h1 { letter-spacing: var(--h1-spacing); }
.hero-title-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-title-ink { display: block; }

/* Warm charcoal, ivory, and muted gold from Luis's creative portfolio. */

.nav-logo, .nav-links .nav-contact, .menu-toggle, .text-link, .owner-signature, .service-price { color: var(--color-text); }
.btn { background-color: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-outline { background-color: transparent; color: var(--color-text); border-color: rgba(232,228,222,.4); }
.field input, .field select, .field textarea { color: var(--color-text); border-color: #625c51; }
::selection { background: var(--color-accent); color: var(--color-bg); }

/* Shared section reveal and gold link accent. No text duplication. */
.section-title-reveal { display: block; }
.nav-links a:not(.nav-contact) { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .4em; transition: color .25s ease, text-decoration-color .25s ease; }
.nav-links a:not(.nav-contact):hover, .nav-links a:focus-visible { text-decoration-color: var(--color-accent); }
.section-pad-lg { padding-block: var(--space-lg); }
.space-after-md { margin-bottom: var(--space-md); }
.space-before-lg { margin-top: var(--space-lg); }

/* Editorial gold accents. */
.hero-title-line:last-child .hero-title-ink,
.section-heading h2 .accent, .section-intro h2 .accent,
.service-number, .label, .text-link, .owner-signature { color: var(--color-accent); }
.section-intro p strong, .detail-grid p strong, .owner-grid p strong { color: var(--color-accent); font-weight: 500; }
/* Rounded buttons restored; gold remains the interaction accent. */
.btn { font-family: var(--font-primary); border-radius: var(--radius-button); }
.btn:hover, .btn:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

/* Eight-brand ticker. Two identical groups form one continuous loop. */
.logo-ticker { overflow: hidden; }
.logo-ticker-track { display: flex; width: max-content; }
.logo-ticker-group { display: flex; flex: 0 0 auto; align-items: center; }
.logo-ticker .brand { width: clamp(200px, 20vw, 275px); padding: 16px 24px; display: flex; align-items: center; justify-content: center; min-height: 95px; }
.logo-ticker img { max-width: 140px; max-height: 44px; width: auto; height: auto; filter: none; opacity: 1; }
.logo-ticker-controls { display: flex; justify-content: flex-end; }
.logo-ticker-toggle { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-button); padding: 8px 14px; font: inherit; font-size: var(--label-size); cursor: pointer; }
.logo-ticker-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
@keyframes logo-drift-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: no-preference) {
 .logo-ticker.is-ready .logo-ticker-track { animation: logo-drift-right 125s linear infinite; }
 .logo-ticker.is-paused .logo-ticker-track { animation-play-state: paused; }
}
/* Without JS or with reduced motion, show every brand once in a wrapping grid. */
.logo-ticker:not(.is-ready) .logo-ticker-track { width: 100%; }
.logo-ticker:not(.is-ready) .logo-ticker-group { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.logo-ticker:not(.is-ready) .logo-ticker-group[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
 .logo-ticker .logo-ticker-track { width: 100%; transform: none; }
 .logo-ticker .logo-ticker-group { flex-wrap: wrap; justify-content: center; width: 100%; }
 .logo-ticker .logo-ticker-group[aria-hidden], .logo-ticker-toggle { display: none; }
}

/* Pause the expanded collection while hovered. */
.logo-ticker:hover .logo-ticker-track { animation-play-state: paused; }

/* Only the added archive logos receive the 25% size increase. */
.logo-ticker .brand-new img { max-width: 175px; max-height: 55px; }

/* Additional 25% for the five specifically selected archive marks. */
.logo-ticker .brand-extra-large img { max-width: 218.75px; max-height: 68.75px; }

/* Olypen: an additional 25% over its previous displayed size. */
.logo-ticker .brand-olypen img, .logo-ticker .brand-size-boost img { max-width: 273.4375px; max-height: 85.9375px; }

/* JS prepares only offscreen reveal targets; no-JS content remains visible. */
@media (prefers-reduced-motion: no-preference) {
 .scroll-reveal-pending { opacity: 0; }
}
@media print { .scroll-reveal-pending { opacity: 1 !important; } }

/* Explicit word accents override the default final-line hero accent. */
.hero-title-selective .hero-title-line .hero-title-ink { color: var(--color-text); }