/* ==========================================================================
   SPS KRUP — Custom WordPress Theme
   Visual system: "Steel & Signal Yellow"

   Grounded in the client's own fleet photography: safety-yellow crane
   livery, red/white hazard chevrons on outriggers & counterweights,
   steel lattice booms, engineering data plates. The recurring diagonal
   hazard-stripe corner on every real photo frame is the one signature
   device carried through the whole site — everything else stays quiet
   so that mark, and the photography itself, can carry the identity.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------- */
:root{
  --c-bg:            #14161a;   /* graphite base */
  --c-surface:       #1b1e24;   /* raised panel */
  --c-surface-2:     #22262e;   /* raised panel, hover / highlight */
  --c-line:          rgba(241,241,238,.10);
  --c-line-strong:   rgba(241,241,238,.20);

  --c-yellow:        #f5b400;   /* signal yellow — crane livery */
  --c-yellow-bright: #ffcc33;
  --c-red:           #c4321f;   /* hazard red — outrigger chevrons */

  --c-steel:         #8b93a0;   /* muted secondary text */
  --c-steel-light:   #b9c0c9;   /* body copy on dark */
  --c-white:         #f3f3f0;   /* headings / high-emphasis text */

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --fs-hero: clamp(3rem, 7vw, 6.4rem);
  --fs-h1:   clamp(2.3rem, 5vw, 3.8rem);
  --fs-h2:   clamp(1.9rem, 3.6vw, 2.75rem);
  --fs-h3:   clamp(1.25rem, 2.2vw, 1.6rem);

  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
  --hazard: 30px;

  --ease: cubic-bezier(.22,.68,0,1);
  --d-s: .25s;
  --d-m: .55s;
  --d-l: .9s;
}

/* --------------------------------------------------------------------
   2. RESET (supplements the small safety reset in style.css)
   -------------------------------------------------------------------- */
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  background:var(--c-bg);
  color:var(--c-steel-light);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; color:var(--c-white); font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:.02em; }
h4{ font-size:1.1rem; letter-spacing:.02em; }
p{ margin:0; }
p + p{ margin-top:1em; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
strong{ color:var(--c-white); font-weight:600; }
button{ border:none; background:none; font:inherit; color:inherit; cursor:pointer; padding:0; }
input, textarea, select{ font:inherit; color:inherit; }

::selection{ background:var(--c-yellow); color:var(--c-bg); }
:focus-visible{ outline:2px solid var(--c-yellow); outline-offset:3px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--c-yellow); color:var(--c-bg); font-weight:700; padding:.85rem 1.25rem; }
.skip-link:focus{ left:var(--pad); top:var(--pad); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* --------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

.section{ padding-block:6.5rem; position:relative; border-top:1px solid var(--c-line); }
.section:first-of-type{ border-top:none; }
.section--tight{ padding-block:4rem; }
.section--alt{ background:var(--c-surface); }
.section--surface{ background:var(--c-surface); }

.section-head{ max-width:42rem; margin-bottom:3.5rem; }
.section-head--center{ max-width:38rem; margin-inline:auto; text-align:center; }
.section-head p{ margin-top:1rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-yellow); margin-bottom:.9rem;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--c-yellow); }

.grid{ display:grid; gap:1.75rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid--3, .grid--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid--3, .grid--4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
.split--reverse{ direction:rtl; }
.split--reverse > *{ direction:ltr; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:2.5rem; direction:ltr; } }

.split__media{ position:relative; overflow:hidden; }
.split__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform var(--d-l) var(--ease); }
.split__media:hover img{ transform:scale(1.045); }
.split__media-tag{
  position:absolute; left:0; bottom:0;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-white); background:rgba(20,22,26,.72); backdrop-filter:blur(4px);
  border-top:1px solid var(--c-line-strong); border-right:1px solid var(--c-line-strong);
  padding:.7em 1em;
}

.tick-list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.tick-list li{ display:flex; align-items:flex-start; gap:.65em; font-size:.96rem; color:var(--c-steel-light); }
.tick-list svg{ flex:none; color:var(--c-yellow); margin-top:.2em; }

.prose h2{ text-transform:none; font-family:var(--font-body); font-weight:700; font-size:1.5rem; letter-spacing:0; margin-top:2.5rem; margin-bottom:.75rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--c-steel-light); max-width:65ch; }
.prose a{ color:var(--c-yellow); text-decoration:underline; text-underline-offset:.2em; }

/* --------------------------------------------------------------------
   4. SIGNATURE ELEMENT — hazard corner (real photography only)
   -------------------------------------------------------------------- */
.hero__media, .page-hero__bg, .split__media, .detail-block__media,
.project-card, .media-break{
  position:relative;
}
.hero__media::before, .page-hero__bg::before, .split__media::before,
.detail-block__media::before, .project-card::before, .media-break::before{
  content:""; position:absolute; top:0; left:0; z-index:3;
  width:0; height:0;
  border-style:solid; border-width:var(--hazard) var(--hazard) 0 0; border-color:transparent;
  background-image:repeating-linear-gradient(45deg, var(--c-white) 0 7px, var(--c-red) 7px 14px);
  -webkit-clip-path:polygon(0 0,100% 0,0 100%); clip-path:polygon(0 0,100% 0,0 100%);
}

/* --------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95rem 1.5rem; border:1px solid transparent; border-radius:var(--radius);
  transition:background var(--d-s) var(--ease), color var(--d-s) var(--ease), border-color var(--d-s) var(--ease), transform var(--d-s) var(--ease);
}
.btn--primary{ background:var(--c-yellow); color:var(--c-bg); font-weight:700; }
.btn--primary:hover{ background:var(--c-yellow-bright); transform:translateY(-2px); }
.btn--outline{ border-color:var(--c-line-strong); color:var(--c-white); }
.btn--outline:hover{ border-color:var(--c-yellow); color:var(--c-yellow); }
.btn--lg{ padding:1.15rem 1.9rem; font-size:.86rem; }
.btn--sm{ padding:.7rem 1.15rem; font-size:.75rem; }
.btn--block{ width:100%; justify-content:center; }

/* --------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding-block:1.4rem; border-bottom:1px solid transparent;
  transition:background var(--d-m) var(--ease), padding var(--d-m) var(--ease), border-color var(--d-m) var(--ease);
}
.site-header.is-scrolled{ background:rgba(20,22,26,.92); backdrop-filter:blur(10px); border-color:var(--c-line); padding-block:.9rem; }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.site-header__logo{ display:flex; align-items:center; flex:none; }
.brand-lockup{ display:flex; flex-direction:column; line-height:1; }
.brand-lockup .word{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.brand-lockup .word b{ color:var(--c-yellow); font-weight:600; }
.brand-lockup .word span{ color:var(--c-white); margin-left:.3ch; }
.brand-lockup small{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.13em; text-transform:uppercase; color:var(--c-steel); margin-top:.25rem; }

.site-nav{ flex:1; display:flex; justify-content:center; }
.nav-menu{ display:flex; align-items:center; gap:2.4rem; }
.nav-menu a{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-steel-light);
  position:relative; padding-block:.3rem; transition:color var(--d-s) var(--ease);
}
.nav-menu a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--c-yellow); transition:width var(--d-s) var(--ease); }
.nav-menu a:hover{ color:var(--c-white); }
.nav-menu a:hover::after{ width:100%; }
.nav-menu .current-menu-item a{ color:var(--c-yellow); }

.site-header__actions{ display:flex; align-items:center; gap:1.4rem; flex:none; }
.site-header__phone{ display:flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.85rem; color:var(--c-white); }
.site-header__phone svg{ color:var(--c-yellow); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:.5rem; z-index:250; }
.nav-toggle span{ width:24px; height:2px; background:var(--c-white); transition:transform var(--d-s), opacity var(--d-s); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:190; background:var(--c-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--d-m) var(--ease), visibility var(--d-m), transform var(--d-m) var(--ease);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav-menu{ display:flex; flex-direction:column; align-items:center; gap:1.75rem; }
.mobile-nav-menu a{ font-family:var(--font-display); font-size:1.9rem; text-transform:uppercase; letter-spacing:.02em; color:var(--c-white); }
.mobile-nav-menu a:hover{ color:var(--c-yellow); }
.mobile-nav__footer{ display:flex; flex-direction:column; gap:.9rem; width:80%; max-width:320px; }

@media (max-width:960px){
  .site-nav{ display:none; }
  .site-header__phone{ display:none; }
  .site-header__actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width:961px){ .mobile-nav{ display:none; } }

/* --------------------------------------------------------------------
   7. HERO (front page)
   -------------------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding-top:6rem; padding-bottom:5rem; }
.hero__media{ position:absolute; top:-15%; left:0; right:0; height:132%; z-index:0; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; animation:heroZoom 1.9s var(--ease) both; }
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, var(--c-bg) 0%, rgba(20,22,26,.88) 20%, rgba(20,22,26,.38) 48%, rgba(20,22,26,.12) 68%, rgba(20,22,26,.5) 100%),
    linear-gradient(90deg, rgba(20,22,26,.7) 0%, rgba(20,22,26,.05) 40%, rgba(20,22,26,.3) 100%);
}
@keyframes heroZoom{ from{ transform:scale(1.1); opacity:.4; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__media img{ animation:none; } .hero__media{ top:0; height:100%; } }

.hero__content{ position:relative; z-index:2; max-width:46rem; margin-inline:0; }
.hero h1, .hero__lede, .hero__badge{ text-shadow:0 2px 24px rgba(0,0,0,.5); }
.hero__badge{
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.5rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-yellow);
}
.hero__badge::before{ content:""; width:30px; height:1px; background:var(--c-yellow); }
.hero h1{ font-size:var(--fs-hero); margin-bottom:1.5rem; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:block; }
.js .hero h1 .line span{ transform:translateY(110%); animation:lineUp .9s var(--ease) both; }
.js .hero h1 .line:nth-child(1) span{ animation-delay:.15s; }
.js .hero h1 .line:nth-child(2) span{ animation-delay:.3s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .js .hero h1 .line span{ animation:none; transform:none; } }
.hero h1 em{ font-style:normal; color:var(--c-yellow); }
.hero__lede{ font-size:1.15rem; color:var(--c-steel-light); max-width:42ch; margin-bottom:2.25rem; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:2.25rem; z-index:2;
  display:flex; align-items:center; gap:.85em;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; color:var(--c-steel);
}
.hero__scroll .line{ width:1px; height:38px; background:var(--c-line-strong); position:relative; overflow:hidden; }
.hero__scroll .line::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--c-yellow); animation:scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-40%; } 100%{ top:100%; } }

@media (max-width:900px){
  .hero{ min-height:92svh; padding-bottom:4.5rem; }
  .hero__scroll{ display:none; }
}

/* --------------------------------------------------------------------
   8. MARQUEE
   -------------------------------------------------------------------- */
.marquee{ overflow:hidden; border-block:1px solid var(--c-line); background:var(--c-surface); }
.marquee__track{ display:flex; width:max-content; gap:3.5rem; padding-block:1rem; }
.js .marquee__track{ animation:marquee 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  display:flex; align-items:center; gap:.7em; white-space:nowrap;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-steel);
}
.marquee__track span svg{ color:var(--c-yellow); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------
   9. STATS BAR
   -------------------------------------------------------------------- */
.stats-bar{ background:var(--c-surface); border-bottom:1px solid var(--c-line); }
.stats-bar__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:2.75rem 1.5rem; border-left:1px solid var(--c-line); text-align:left; }
.stat:first-child{ border-left:none; }
.stat__num{ font-family:var(--font-display); font-size:clamp(2.1rem,4vw,3.4rem); color:var(--c-yellow); font-weight:600; line-height:1; }
.stat__label{ display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-steel); }
@media (max-width:800px){ .stats-bar__grid{ grid-template-columns:1fr 1fr; } .stat:nth-child(3){ border-left:none; } .stat{ border-top:1px solid var(--c-line); } .stat:nth-child(1),.stat:nth-child(2){ border-top:none; } }
@media (max-width:480px){ .stats-bar__grid{ grid-template-columns:1fr; } .stat{ border-left:none !important; } .stat:not(:first-child){ border-top:1px solid var(--c-line); } }

/* --------------------------------------------------------------------
   10. CARDS (services / values, icon-led)
   -------------------------------------------------------------------- */
.card{
  display:block; padding:2.25rem; border:1px solid var(--c-line); background:var(--c-surface);
  transition:border-color var(--d-m) var(--ease), background var(--d-m) var(--ease), transform var(--d-m) var(--ease);
}
a.card:hover{ border-color:var(--c-yellow); transform:translateY(-4px); }
.card__icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--c-yellow); margin-bottom:1.25rem; transition:transform .35s var(--ease), color .35s var(--ease); }
a.card:hover .card__icon{ transform:scale(1.14) rotate(-4deg); color:var(--c-yellow-bright); }
.card h3{ margin-bottom:.6rem; font-size:1.25rem; }
.card p{ font-size:.94rem; }
.card__link{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.25rem;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-white);
}
.card__link svg{ transition:transform var(--d-s) var(--ease); }
a.card:hover .card__link{ color:var(--c-yellow); }
a.card:hover .card__link svg{ transform:translateX(3px); }

.value-card{ position:relative; }
.value-card__num{ font-family:var(--font-display); font-size:2rem; color:var(--c-line-strong); -webkit-text-stroke:1px var(--c-steel); color:transparent; margin-bottom:1rem; }

/* --------------------------------------------------------------------
   11. MEDIA BREAK (full-height cinematic panel)
   -------------------------------------------------------------------- */
.media-break{ position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; }
.media-break > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.media-break::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--c-bg) 0%, rgba(20,22,26,.55) 45%, rgba(20,22,26,.15) 75%); }
.media-break__content{ position:relative; z-index:2; max-width:34rem; margin-inline:0; padding-block:4rem; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.media-break__content p{ margin-top:1rem; max-width:42ch; }
@media (max-width:700px){ .media-break{ min-height:60vh; } }

/* --------------------------------------------------------------------
   12. SECTOR STRIP
   -------------------------------------------------------------------- */
.sector-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.sector-strip__item{ padding-top:1.5rem; border-top:2px solid var(--c-line); }
.sector-strip__item > span{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--c-yellow); text-transform:uppercase; }
.sector-strip__item h3{ margin-top:.75rem; margin-bottom:.65rem; font-size:1.3rem; }
.sector-strip__item p{ font-size:.92rem; }
@media (max-width:800px){ .sector-strip{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------
   13. PROJECT GRID (home preview + full gallery)
   -------------------------------------------------------------------- */
.project-filters{ display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:3rem; }
.project-filters button{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.6rem 1.05rem; border:1px solid var(--c-line-strong); color:var(--c-steel-light);
  transition:all var(--d-s) var(--ease);
}
.project-filters button:hover{ border-color:var(--c-yellow); color:var(--c-white); }
.project-filters button.is-active{ background:var(--c-yellow); border-color:var(--c-yellow); color:var(--c-bg); font-weight:700; }

.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.project-card{ grid-column:span 1; aspect-ratio:4/5; overflow:hidden; display:block; }
.project-card--wide{ grid-column:span 2; aspect-ratio:16/10; }
.project-card img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-l) var(--ease); }
.project-card:hover img{ transform:scale(1.08); }
.project-card__overlay{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
  background:linear-gradient(0deg, rgba(20,22,26,.92) 0%, rgba(20,22,26,.1) 55%, transparent 100%);
}
.project-card__tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-yellow); }
.project-card__title{ display:block; margin-top:.4rem; font-family:var(--font-display); font-size:1.3rem; text-transform:uppercase; color:var(--c-white); letter-spacing:.01em; }
.project-card__plus{
  position:absolute; top:1.25rem; right:1.25rem; z-index:3; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(20,22,26,.6); color:var(--c-white);
  border:1px solid var(--c-line-strong); transform:rotate(-45deg); transition:all var(--d-s) var(--ease);
}
.project-card:hover .project-card__plus{ background:var(--c-yellow); color:var(--c-bg); border-color:var(--c-yellow); transform:rotate(0deg); }
.project-card[hidden]{ display:none; }

@media (max-width:900px){ .project-grid{ grid-template-columns:1fr; } .project-card--wide{ grid-column:span 1; } }
@media (min-width:901px) and (max-width:1180px){ .project-grid{ grid-template-columns:repeat(2,1fr); } .project-card--wide{ grid-column:span 2; } }

/* --------------------------------------------------------------------
   14. CTA BANNER
   -------------------------------------------------------------------- */
.cta-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem;
  padding:3.5rem; background:var(--c-surface); border:1px solid var(--c-line-strong); position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; top:0; left:0; width:0; height:0;
  border-style:solid; border-width:var(--hazard) var(--hazard) 0 0; border-color:transparent;
  background-image:repeating-linear-gradient(45deg, var(--c-white) 0 7px, var(--c-red) 7px 14px);
  -webkit-clip-path:polygon(0 0,100% 0,0 100%); clip-path:polygon(0 0,100% 0,0 100%);
}
.cta-banner__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
@media (max-width:700px){ .cta-banner{ padding:2.25rem; flex-direction:column; align-items:flex-start; } }

/* --------------------------------------------------------------------
   15. PAGE HERO (interior pages)
   -------------------------------------------------------------------- */
.page-hero{ position:relative; min-height:62vh; display:flex; align-items:flex-end; padding-top:8rem; padding-bottom:3.5rem; overflow:hidden; }
.page-hero__bg{ position:absolute; top:-15%; left:0; right:0; height:132%; z-index:0; will-change:transform; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero__bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, var(--c-bg) 4%, rgba(20,22,26,.72) 42%, rgba(20,22,26,.42) 100%);
}
.page-hero__content{ position:relative; z-index:2; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.breadcrumbs{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-steel); margin-bottom:1.25rem; }
.breadcrumbs a{ color:var(--c-steel); transition:color var(--d-s) var(--ease); }
.breadcrumbs a:hover{ color:var(--c-yellow); }
.page-hero h1{ font-size:var(--fs-h1); }
@media (max-width:700px){ .page-hero{ min-height:50vh; padding-top:7rem; } }

/* --------------------------------------------------------------------
   16. DETAIL BLOCKS (services deep-dive)
   -------------------------------------------------------------------- */
.detail-block{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding-block:4rem; }
.detail-block:first-child{ padding-top:0; }
.detail-block:last-child{ padding-bottom:0; }
.detail-block + .detail-block{ border-top:1px solid var(--c-line); }
.detail-block--reverse{ direction:rtl; }
.detail-block--reverse > *{ direction:ltr; }
.detail-block__num{ display:block; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-yellow); margin-bottom:.9rem; }
.detail-block__media{ overflow:hidden; aspect-ratio:4/3; }
.detail-block__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-l) var(--ease); }
.detail-block__media:hover img{ transform:scale(1.05); }
@media (max-width:900px){ .detail-block{ grid-template-columns:1fr; gap:2rem; direction:ltr; padding-block:3rem; } }

/* --------------------------------------------------------------------
   17. PROCESS LIST
   -------------------------------------------------------------------- */
.process-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; }
.process-item{ padding-top:1.25rem; border-top:2px solid var(--c-line); }
.process-item__num{ font-family:var(--font-display); font-size:2.1rem; color:var(--c-yellow); line-height:1; margin-bottom:.75rem; }
.process-item h3{ font-size:1.1rem; margin-bottom:.5rem; }
.process-item p{ font-size:.88rem; }
@media (max-width:960px){ .process-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-list{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------
   18. ENGAGEMENT CARDS
   -------------------------------------------------------------------- */
.engagement-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.engagement-card{ padding:2.25rem; border:1px solid var(--c-line); background:var(--c-bg); position:relative; }
.engagement-card.is-highlight{ border-color:var(--c-yellow); background:var(--c-surface-2); }
.engagement-card__badge{
  position:absolute; top:-.85rem; left:2rem; background:var(--c-yellow); color:var(--c-bg);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:.35em .8em;
}
.engagement-card h3{ margin-bottom:.75rem; font-size:1.35rem; }
.engagement-card p{ font-size:.94rem; }
@media (max-width:900px){ .engagement-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------
   19. FAQ ACCORDION
   -------------------------------------------------------------------- */
.faq-list{ border-top:1px solid var(--c-line); }
.faq-item{ border-bottom:1px solid var(--c-line); }
.faq-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.5rem; text-align:left;
  font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; letter-spacing:.01em; color:var(--c-white);
}
.faq-item__icon{ flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--c-yellow); transition:transform var(--d-m) var(--ease); }
.faq-item.is-open .faq-item__icon{ transform:rotate(90deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height var(--d-m) var(--ease); }
.faq-item__a p{ padding-bottom:1.5rem; max-width:52rem; font-size:.96rem; }
.faq-item.is-open .faq-item__a{ max-height:300px; }
.no-js .faq-item__a{ max-height:none; }
.no-js .faq-item__icon{ display:none; }

/* --------------------------------------------------------------------
   20. CONTACT
   -------------------------------------------------------------------- */
.contact-card{ display:flex; align-items:center; gap:1.1rem; padding:1.75rem; border:1px solid var(--c-line); background:var(--c-surface); }
.contact-card__icon{ flex:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--c-yellow); background:var(--c-surface-2); }
.contact-card h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-steel); margin-bottom:.35rem; font-weight:500; }
.contact-card a, .contact-card p{ font-size:1.02rem; color:var(--c-white); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-field{ display:flex; flex-direction:column; gap:.55rem; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--c-steel); }
.form-field input, .form-field textarea{
  background:var(--c-surface); border:1px solid var(--c-line-strong); color:var(--c-white);
  padding:.9rem 1rem; border-radius:var(--radius); transition:border-color var(--d-s) var(--ease), background var(--d-s) var(--ease);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--c-steel); opacity:.75; }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--c-yellow); background:var(--c-surface-2); }
.form-field textarea{ min-height:130px; resize:vertical; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

.form-status{ margin-top:1.25rem; padding:1rem 1.2rem; font-size:.9rem; border-left:3px solid; display:none; }
.form-status.is-visible{ display:block; }
.form-status.is-success{ background:rgba(120,196,120,.08); border-color:#69bd72; color:#a9e2af; }
.form-status.is-error{ background:rgba(196,50,31,.08); border-color:var(--c-red); color:#f2a99b; }

/* --------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------- */
.site-footer{ background:var(--c-surface); border-top:1px solid var(--c-line); padding-top:5rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:4rem; }
.footer__logo{ margin-bottom:1.1rem; }
.footer__col p{ font-size:.92rem; max-width:30ch; }
.footer__col h3{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-steel); font-weight:500; text-transform:uppercase; margin-bottom:1.1rem; }
.footer__col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col a{ font-size:.92rem; color:var(--c-steel-light); transition:color var(--d-s) var(--ease); }
.footer__col a:hover{ color:var(--c-yellow); }
.footer__contact li{ font-size:.92rem; color:var(--c-steel-light); }
.footer__social{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--c-line-strong); margin-top:1.25rem; transition:all var(--d-s) var(--ease); }
.footer__social:hover{ background:var(--c-yellow); border-color:var(--c-yellow); color:var(--c-bg); }

.footer__bottom{ border-top:1px solid var(--c-line); padding-block:1.5rem; }
.footer__bottom-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer__bottom p, .footer__legal a, .footer__credit a{ font-family:var(--font-mono); font-size:.72rem; color:var(--c-steel); letter-spacing:.03em; }
.footer__legal{ display:flex; gap:1.5rem; }
.footer__legal a:hover, .footer__credit a:hover{ color:var(--c-yellow); }

@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:120; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; background:var(--c-surface-2); color:var(--c-white);
  border:1px solid var(--c-line-strong); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all var(--d-s) var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--c-yellow); color:var(--c-bg); border-color:var(--c-yellow); }

.mobile-call-fab{ display:none; }
@media (max-width:600px){
  .mobile-call-fab{
    display:flex; align-items:center; justify-content:center; position:fixed; left:1.25rem; bottom:1.25rem; z-index:120;
    width:52px; height:52px; border-radius:50%; background:var(--c-yellow); color:var(--c-bg);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .back-to-top{ right:1.25rem; bottom:1.25rem; width:42px; height:42px; }
}

/* --------------------------------------------------------------------
   22. 404 / ERROR
   -------------------------------------------------------------------- */
.error-page{ min-height:70vh; display:flex; align-items:center; }
.error-page__code{
  font-family:var(--font-display); font-size:clamp(6rem,18vw,13rem); line-height:.8; font-weight:600;
  color:transparent; -webkit-text-stroke:2px var(--c-line-strong); margin-bottom:1.5rem;
}

/* --------------------------------------------------------------------
   23. BLOG / SEARCH FALLBACK (index.php)
   -------------------------------------------------------------------- */
.post-card{ border:1px solid var(--c-line); background:var(--c-surface); display:flex; flex-direction:column; }
.post-card__media{ display:block; aspect-ratio:4/3; overflow:hidden; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-l) var(--ease); }
.post-card:hover .post-card__media img{ transform:scale(1.05); }
.post-card__body{ padding:1.5rem; }
.post-card__meta{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-steel); margin-bottom:.6rem; }
.post-card__body h3{ font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:1.2rem; margin-bottom:.6rem; }
.post-card__body h3 a:hover{ color:var(--c-yellow); }
.post-card__body p{ font-size:.9rem; }
.pagination{ display:flex; gap:.5rem; }
.pagination a, .pagination span{ font-family:var(--font-mono); font-size:.82rem; padding:.6rem 1rem; border:1px solid var(--c-line-strong); }
.pagination .current{ background:var(--c-yellow); color:var(--c-bg); border-color:var(--c-yellow); }

/* --------------------------------------------------------------------
   24. REVEAL / MOTION SYSTEM (progressive enhancement + failsafe)
   -------------------------------------------------------------------- */
/* Without JS: nothing here ever applies, everything stays visible. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--d-l) var(--ease), transform var(--d-l) var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.08s; }
.js .reveal[data-delay="2"]{ transition-delay:.16s; }
.js .reveal[data-delay="3"]{ transition-delay:.24s; }
.js .reveal[data-delay="4"]{ transition-delay:.32s; }

@media (pointer:fine){
  .cursor-dot{
    position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%; background:var(--c-yellow);
    pointer-events:none; z-index:999; mix-blend-mode:difference; transform:translate(-50%,-50%);
    opacity:0; transition:opacity .2s;
  }
  .js .cursor-dot.is-active{ opacity:1; }
  .cursor-ring{
    position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--c-yellow);
    pointer-events:none; z-index:998; transform:translate(-50%,-50%);
    opacity:0; transition:opacity .25s, width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  }
  .js .cursor-ring.is-active{ opacity:.5; }
  .js .cursor-ring.is-hover{ opacity:1; width:64px; height:64px; background:rgba(245,180,0,.08); }
  [data-magnetic]{ transition:transform .25s var(--ease); display:inline-flex; }
}
@media (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none !important; } }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:300;
  background:var(--c-yellow); transition:width .1s linear;
}

.project-card{ transition:transform .2s ease; }

/* --------------------------------------------------------------------
   25. RESPONSIVE FINE-TUNING
   -------------------------------------------------------------------- */
@media (max-width:700px){
  .section{ padding-block:4rem; }
  .section-head{ margin-bottom:2.5rem; }
}