/* =============================================================
   Premium enhancement layer — additive only.
   Reuses tokens from css/styles.css (colors, radius, shadow,
   fonts). Loads after styles.css and scroll-video.css. Every
   rule here is class-scoped to avoid specificity collisions
   with the base system.
   ============================================================= */

/* ---------- Header & footer: logo lockup ---------- */
.brand-logo-img{
  height: 44px;
  width: auto;
  max-width: 230px;
  border-radius: var(--radius-sm);
  display: block;
  flex: none;
}
.brand-logo-img--footer{ height: 50px; }
@media (max-width: 480px){
  .brand-logo-img{ height: 34px; }
  .brand-logo-img--footer{ height: 44px; }
}
@media (max-width: 360px){
  .brand-logo-img{ height: 30px; }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--flame), var(--sky-dark));
  z-index: 999;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display: none; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 600;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.back-to-top.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover{ background: var(--brand-red); }
.back-to-top svg{ width: 20px; height: 20px; }
@media (max-width: 720px){
  .back-to-top{ left: 1rem; bottom: 6.2rem; }
}

/* ---------- Ambient mesh gradient (hero + feature sections) ---------- */
.mesh-ambient{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  /* Softness comes from the gradients' own transparent stops, not filter:
     blur() — a 40px blur recomputed every frame of a 20s infinite animation
     was one of the biggest steady-state scroll costs on this page. */
  background:
    radial-gradient(circle at 15% 20%, rgba(127,182,217,.28), transparent 60%),
    radial-gradient(circle at 85% 15%, rgba(244,123,32,.13), transparent 58%),
    radial-gradient(circle at 50% 95%, rgba(127,182,217,.19), transparent 65%);
  animation: mesh-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mesh-drift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(-2%, 2%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .mesh-ambient{ animation: none; }
}

/* ---------- Timeline: staggered sequential reveal ---------- */
.timeline .timeline-item.reveal:nth-child(1){ transition-delay: 0s; }
.timeline .timeline-item.reveal:nth-child(2){ transition-delay: .12s; }
.timeline .timeline-item.reveal:nth-child(3){ transition-delay: .24s; }
.timeline .timeline-item.reveal:nth-child(4){ transition-delay: .36s; }
.timeline .timeline-item.reveal:nth-child(5){ transition-delay: .48s; }
@media (prefers-reduced-motion: reduce){
  .timeline .timeline-item.reveal{ transition-delay: 0s; }
}

/* ---------- Marquee: pause on hover ---------- */
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* ---------- Card hover polish: arrow drift + gradient border glow ---------- */
.card{ position: relative; }
.card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--sky), var(--flame));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.card:hover::after{ opacity: .55; }
.card-body .card-link{
  transition: transform .25s ease, gap .25s ease;
}
.card:hover .card-body .card-link{ transform: translateX(4px); gap: .65rem; }

/* ---------- Testimonials: hover lift + two-tone quote mark ---------- */
.testimonial{ transition: transform .3s ease, box-shadow .3s ease; }
.testimonial:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial::before{
  background: linear-gradient(135deg, var(--sky-dark), var(--flame));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce){
  .testimonial{ transition: none; }
}

/* ---------- Stat cards: hover lift + accent bar ---------- */
.stat{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.stat::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--flame), var(--sky-dark));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
.stat:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.stat:hover::before{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .stat, .stat::before{ transition: none; }
}

/* ---------- Industries bento grid ---------- */
.bento-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1.25rem;
}
.bento-tile{
  position: relative;
  display: block;
  grid-column: span 1;
  grid-row: span 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.bento-tile-lg{ grid-column: span 2; grid-row: span 2; }
.bento-tile-img{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.bento-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(17,22,29,.08) 0%, rgba(17,22,29,.82) 100%);
}
.bento-tile:hover .bento-tile-img, .bento-tile:focus-visible .bento-tile-img{ transform: scale(1.08); }
.bento-tile-body{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
}
.bento-tile-glass{
  background: rgba(17,22,29,.32);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  padding: .9rem 1.1rem;
  transition: background-color .3s ease, transform .3s ease;
}
.bento-tile-glass h3{ color: var(--paper); }
.bento-tile-glass p{
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.bento-tile:hover .bento-tile-glass,
.bento-tile:focus-visible .bento-tile-glass{
  background: rgba(17,22,29,.48);
  transform: translateY(-2px);
}
.bento-tile:hover .bento-tile-glass p,
.bento-tile:focus-visible .bento-tile-glass p{
  max-height: 60px;
  opacity: 1;
  margin-top: .35rem;
}
.bento-grid .bento-tile.reveal{ transition-delay: var(--bento-delay, 0s); }
.bento-grid .bento-tile:nth-child(2){ --bento-delay: .08s; }
.bento-grid .bento-tile:nth-child(3){ --bento-delay: .16s; }
.bento-grid .bento-tile:nth-child(4){ --bento-delay: .24s; }
.bento-grid .bento-tile:nth-child(5){ --bento-delay: .32s; }
@media (max-width: 900px){
  .bento-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 640px){
  .bento-grid{ grid-template-columns: 1fr; }
  .bento-tile, .bento-tile-lg{ grid-column: span 1; grid-row: span 1; height: 220px; }
  .bento-tile-glass p{ max-height: none; opacity: 1; margin-top: .35rem; }
}
@media (prefers-reduced-motion: reduce){
  .bento-tile-img, .bento-tile-glass{ transition: none; }
  .bento-grid .bento-tile.reveal{ transition-delay: 0s; }
}

/* ---------- Photo frame: hover lift + zoom (About: founder / team) ---------- */
.photo-frame-hover{ transition: transform .3s ease, box-shadow .3s ease; }
.photo-frame-hover:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.photo-frame-hover img{ transition: transform .5s ease; }
.photo-frame-hover:hover img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .photo-frame-hover, .photo-frame-hover img{ transition: none; }
}

/* ---------- About: Our Team section ---------- */
.photo-frame.ratio-team{ aspect-ratio: 1478/1064; }
.team-photo{ margin: var(--space-lg) 0; }
@media (max-width: 640px){
  .team-photo{ margin: var(--space-md) 0; }
}

/* ---------- About: Our Clients section ---------- */
.client-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.client-card{
  background: var(--paper);
  border: 2px solid var(--line-frost);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.1rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .8rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.client-card:hover, .client-card:focus-within{
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
  border-color: var(--flame);
}
.client-card-mark{
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
  background: linear-gradient(150deg, var(--flame), var(--brand-red));
}
.client-card:nth-child(3n+2) .client-card-mark{ background: linear-gradient(150deg, var(--sky-dark), var(--ink-700)); }
.client-card:nth-child(3n+3) .client-card-mark{ background: linear-gradient(150deg, var(--brand-red), var(--ink-900)); }
.client-card-logo{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
  margin: 0 auto;
}
.client-card-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.3;
  color: var(--ink-900);
  font-stretch: expanded;
}
.client-grid .client-card.reveal:nth-child(5n+2){ transition-delay: .05s; }
.client-grid .client-card.reveal:nth-child(5n+3){ transition-delay: .1s; }
.client-grid .client-card.reveal:nth-child(5n+4){ transition-delay: .15s; }
.client-grid .client-card.reveal:nth-child(5n+5){ transition-delay: .2s; }
@media (max-width: 900px){
  .client-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .client-grid{ grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .client-card{ min-height: 130px; padding: 1.4rem .9rem; }
  .client-card-logo{ max-height: 44px; }
}
@media (prefers-reduced-motion: reduce){
  .client-card{ transition: none; }
  .client-grid .client-card.reveal{ transition-delay: 0s; }
}

/* ---------- Clients page: premium client logo showcase ---------- */
.client-logo-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.client-logo-card{
  background: var(--paper);
  border: 2px solid var(--line-frost);
  border-radius: var(--radius-lg);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.client-logo-card:hover, .client-logo-card:focus-within{
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--flame);
}
.client-logo-card img{
  display: block;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .3s ease;
}
.client-logo-card:hover img, .client-logo-card:focus-within img{
  transform: scale(1.08);
}
.client-logo-grid .client-logo-card.reveal{ transition-delay: var(--reveal-delay, 0s); }
.client-logo-grid .client-logo-card:nth-child(4n+2){ --reveal-delay: .05s; }
.client-logo-grid .client-logo-card:nth-child(4n+3){ --reveal-delay: .1s; }
.client-logo-grid .client-logo-card:nth-child(4n+4){ --reveal-delay: .15s; }
@media (max-width: 980px){
  .client-logo-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .client-logo-grid{ grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .client-logo-card{ height: 150px; padding: 1.1rem; }
  .client-logo-card img{ max-height: 60px; }
}
@media (max-width: 400px){
  .client-logo-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .client-logo-card, .client-logo-card img{ transition: none; }
  .client-logo-grid .client-logo-card.reveal{ transition-delay: 0s; }
}

/* ---------- Footer: areas served ---------- */
.footer-areas{
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(238,244,247,.12);
}
.footer-areas-label{
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sky);
  margin-bottom: .7rem;
}
.footer-areas p{
  color: var(--steel-light);
  font-size: .85rem;
  line-height: 1.9;
}

/* ---------- Contact form error banner ---------- */
.form-error-banner{
  display: none;
  background: #FBEAE7;
  border: 1px solid var(--error);
  color: #7A2A20;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  font-size: .88rem;
  font-weight: 600;
  margin: -.4rem 0 1.2rem;
}
.form-error-banner.is-visible{ display: block; }

@media (prefers-reduced-motion: reduce){
  .back-to-top, .card::after, .card-body .card-link{ transition: none; }
}

/* ---------- Homepage: brand logo grid (monochrome -> color, blue border on hover) ---------- */
.brand-logo-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.brand-logo-card{
  background: var(--paper);
  border: 2px solid var(--line-frost);
  border-radius: var(--radius-lg);
  height: 108px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.brand-logo-card:hover, .brand-logo-card:focus-within{
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
  border-color: var(--sky-dark);
}
.brand-logo-card img{
  max-width: 120px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.78);
  transition: filter .3s ease;
}
.brand-logo-card:hover img, .brand-logo-card:focus-within img{
  filter: grayscale(0) opacity(1);
}
.brand-logo-grid .brand-logo-card.reveal{ transition-delay: var(--reveal-delay, 0s); }
.brand-logo-grid .brand-logo-card:nth-child(6n+2){ --reveal-delay: .06s; }
.brand-logo-grid .brand-logo-card:nth-child(6n+3){ --reveal-delay: .12s; }
.brand-logo-grid .brand-logo-card:nth-child(6n+4){ --reveal-delay: .18s; }
.brand-logo-grid .brand-logo-card:nth-child(6n+5){ --reveal-delay: .24s; }
.brand-logo-grid .brand-logo-card:nth-child(6n+6){ --reveal-delay: .3s; }

.brand-logo-marquee{ display:none; }
.brand-logo-marquee .marquee-track{ gap: 2.4rem; align-items:center; }
.brand-logo-marquee .marquee-track img{
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
}

@media (max-width: 900px){
  .brand-logo-grid{ grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .brand-logo-card{ height: 92px; }
}
@media (max-width: 640px){
  .brand-logo-grid{ display:none; }
  .brand-logo-marquee{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .brand-logo-card, .brand-logo-card img{ transition:none; }
  .brand-logo-grid .brand-logo-card.reveal{ transition-delay:0s; }
}

/* ---------- How We Work: desktop interactive timeline ---------- */
.process-timeline{ position: relative; margin-bottom: 2.5rem; }
.process-timeline-rail{
  position: absolute;
  left: 31px;
  top: 28px;
  bottom: 28px;
  width: 3px;
  background: var(--line);
  border-radius: 3px;
  z-index: 1;
}
.process-timeline-rail-fill{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--flame), var(--sky-dark));
  border-radius: 3px;
}
.process-timeline-list{ list-style: none; margin: 0; padding: 0; }
.process-timeline-step{
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.4rem 0;
}
.process-timeline-step:first-child{ padding-top: 0; }
.process-timeline-step:last-child{ padding-bottom: 0; }
.process-timeline-marker{
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--line);
  color: var(--steel);
  display: grid;
  place-items: center;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.process-timeline-marker svg{ width: 24px; height: 24px; }
.process-timeline-step.is-active .process-timeline-marker{
  background: var(--flame);
  border-color: var(--flame);
  color: var(--ink-900);
  transform: scale(1.08);
}
.process-timeline-media{
  order: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-sm);
}
.process-timeline-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.process-timeline-step:hover .process-timeline-media img{ transform: scale(1.05); }
.process-timeline-body{ order: 2; }
.process-timeline-body h3{ margin: .3rem 0 .6rem; }
.process-timeline-body p{ color: var(--steel); margin-bottom: 1rem; }
.process-timeline-step:nth-child(even) .process-timeline-media{ order: 2; }
.process-timeline-step:nth-child(even) .process-timeline-body{ order: 1; }

.process-timeline-step.reveal:nth-child(1){ transition-delay: 0s; }
.process-timeline-step.reveal:nth-child(2){ transition-delay: .08s; }
.process-timeline-step.reveal:nth-child(3){ transition-delay: .16s; }
.process-timeline-step.reveal:nth-child(4){ transition-delay: .24s; }
.process-timeline-step.reveal:nth-child(5){ transition-delay: .32s; }
.process-timeline-step.reveal:nth-child(6){ transition-delay: .4s; }

.process-accordion{ display: none; }
.process-accordion-item, .faq-item{
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-md);
  margin-bottom: .9rem;
  overflow: hidden;
}
.process-accordion-item summary, .faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.process-accordion-item summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker{ display: none; }
.process-accordion-item summary::after, .faq-item summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--flame);
  flex: none;
}
.process-accordion-item[open] summary::after, .faq-item[open] summary::after{ content: "\2212"; }
.process-accordion-num{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--brand-red-dark);
  font-weight: 700;
}
.process-accordion-body, .faq-item-body{ padding: 0 1.3rem 1.3rem; }
.process-accordion-body img{
  width: 100%;
  border-radius: var(--radius-md);
  aspect-ratio: 3/2;
  object-fit: cover;
  margin-bottom: .9rem;
}
.process-accordion-body p, .faq-item-body p{ color: var(--steel); font-size: .94rem; }
.faq-accordion{ max-width: 780px; }

/* ---------- Related services: premium card slider ---------- */
.rs-slider{
  position: relative;
  --rs-gap: 1.3rem;
  --rs-per-view: 4;
  padding: 0 3.4rem;
}
.rs-slider-viewport{ overflow: hidden; touch-action: pan-y; }
.rs-slider-track{
  display: flex;
  gap: var(--rs-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.rs-slider-track.is-dragging{ transition: none; }
.rs-slide{
  flex: 0 0 auto;
  width: calc((100% - (var(--rs-per-view) - 1) * var(--rs-gap)) / var(--rs-per-view));
}
.rs-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rs-card:hover, .rs-card:focus-within{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--flame);
}
.rs-card-media{
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--frost);
}
.rs-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.rs-card:hover .rs-card-media img{ transform: scale(1.08); }
.rs-card-icon{
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 1.1rem 0;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-card-icon svg{ width: 1.3rem; height: 1.3rem; }
.rs-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: 1.6rem 1.2rem 1.4rem;
}
.rs-card-title{ margin: 0; font-size: 1.05rem; line-height: 1.3; }
.rs-card-title a{ color: var(--ink-900); text-decoration: none; }
.rs-card-title a:hover{ color: var(--brand-red); }
.rs-card-desc{ margin: 0; flex: 1; color: var(--steel); font-size: .9rem; line-height: 1.5; }
.rs-card-cta{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .4rem;
  color: var(--brand-red);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
.rs-card-cta svg{ width: 1rem; height: 1rem; transition: transform .25s ease; }
.rs-card:hover .rs-card-cta svg{ transform: translateX(3px); }
.rs-card.is-current{ border-color: var(--flame); background: var(--frost); }
.rs-card-current-badge{
  position: absolute;
  top: .7rem;
  left: .7rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--flame);
  color: var(--paper);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rs-card-cta--disabled{ color: var(--steel-light); cursor: default; }
.rs-arrow{
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-frost);
  box-shadow: var(--shadow-sm);
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rs-arrow:hover{ background: var(--brand-red); border-color: var(--brand-red); color: var(--paper); }
.rs-arrow:focus-visible{ outline: 2px solid var(--brand-red); outline-offset: 2px; }
.rs-arrow svg{ width: 1.2rem; height: 1.2rem; }
.rs-arrow-prev{ left: 0; }
.rs-arrow-next{ right: 0; }
.rs-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin-top: 1.6rem;
}
.rs-dot{
  width: .6rem;
  height: .6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.rs-dot:hover{ background: var(--flame); }
.rs-dot.is-active{ background: var(--brand-red); transform: scale(1.3); }
.rs-dot:focus-visible{ outline: 2px solid var(--brand-red); outline-offset: 2px; }

@media (max-width: 1180px){ .rs-slider{ --rs-per-view: 3; } }
@media (max-width: 860px){ .rs-slider{ --rs-per-view: 2; } }
@media (max-width: 600px){
  .rs-slider{ --rs-per-view: 1; padding: 0 2.9rem; }
  .rs-arrow{ width: 2.3rem; height: 2.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .rs-card, .rs-card-media img, .rs-card-cta svg, .rs-dot{ transition: none; }
  .rs-slider-track{ transition: none; }
}

@media (max-width: 860px){
  .process-timeline{ display: none; }
  .process-accordion{ display: block; }
}
@media (prefers-reduced-motion: reduce){
  .process-timeline-marker, .process-timeline-media img{ transition: none; }
  .process-timeline-step.reveal{ transition-delay: 0s; }
}

/* ---------- Why Our Process Works: mini feature cards ---------- */
.mini-feature-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.mini-feature-card{
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.3rem;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mini-feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mini-feature-icon{
  width: 52px; height: 52px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--frost);
  color: var(--brand-red);
  display: grid;
  place-items: center;
}
.mini-feature-icon svg{ width: 24px; height: 24px; }
.mini-feature-card h3{ font-size: 1.02rem; margin-bottom: .4rem; }
.mini-feature-card p{ font-size: .85rem; color: var(--steel); }
@media (max-width: 980px){
  .mini-feature-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .mini-feature-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .mini-feature-card{ transition: none; }
}

/* ---------- Project Gallery: masonry cards ---------- */
.gallery-masonry{
  column-count: 4;
  column-gap: 1.5rem;
}
.gallery-card{
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--ink-900);
  isolation: isolate;
  transition: box-shadow .3s ease;
}
.gallery-card:hover, .gallery-card:focus-within{ box-shadow: var(--shadow-md); }
.gallery-card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery-card:hover img, .gallery-card:focus-within img{ transform: scale(1.06); }
.gallery-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(17,22,29,0) 42%, rgba(17,22,29,.85) 100%);
  pointer-events: none;
}
.gallery-card-open{
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(17,22,29,.55);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.gallery-card-open svg{ width: 16px; height: 16px; }
.gallery-card:hover .gallery-card-open,
.gallery-card:focus-within .gallery-card-open,
.gallery-card-open:focus-visible{
  opacity: 1;
  transform: translateY(0);
}
.gallery-card-open:hover{ background: var(--flame); border-color: var(--flame); }
.gallery-card-body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.1rem 1.2rem;
}
.gallery-card-body h3{ color: var(--paper); font-size: 1.04rem; }
.gallery-card-meta{
  font-size: .78rem;
  color: rgba(255,255,255,.8);
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.gallery-card:hover .gallery-card-meta,
.gallery-card:focus-within .gallery-card-meta{
  max-height: 50px;
  opacity: 1;
  margin-top: .35rem;
}
.gallery-card.is-hidden{ display: none; }

@media (max-width: 1080px){ .gallery-masonry{ column-count: 3; } }
@media (max-width: 760px){ .gallery-masonry{ column-count: 2; column-gap: 1rem; } }
@media (max-width: 520px){ .gallery-masonry{ column-count: 1; } }
@media (prefers-reduced-motion: reduce){
  .gallery-card, .gallery-card img, .gallery-card-open{ transition: none; }
}

/* ---------- Project Gallery: lightbox ---------- */
.lightbox{
  border: none;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  width: min(920px, 92vw);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lightbox::backdrop{ background: rgba(17,22,29,.88); }
.lightbox[open]{ display: flex; }
.lightbox figure{ margin: 0; background: var(--ink-900); display: flex; flex-direction: column; max-height: 92vh; }
.lightbox-img{
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: var(--ink-900);
  display: block;
}
.lightbox figcaption{ padding: 1.4rem 1.6rem; color: var(--paper); }
.lightbox figcaption h3{ color: var(--paper); margin: .8rem 0 .3rem; }
.lightbox-meta{ color: rgba(255,255,255,.75); font-size: .9rem; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute;
  z-index: 3;
  border: none;
  background: rgba(17,22,29,.6);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--flame); color: var(--ink-900); }
.lightbox-close{ top: 1rem; right: 1rem; width: 40px; height: 40px; }
.lightbox-close svg{ width: 18px; height: 18px; }
.lightbox-prev, .lightbox-next{ top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lightbox-prev{ left: 1rem; }
.lightbox-next{ right: 1rem; }
.lightbox-prev svg, .lightbox-next svg{ width: 22px; height: 22px; }
@media (max-width: 640px){
  .lightbox-prev, .lightbox-next{ width: 38px; height: 38px; }
  .lightbox figcaption{ padding: 1.1rem 1.2rem; }
}

/* ---------- Video modal player (gallery.html Project Videos) ---------- */
.video-lightbox-stage{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  max-height: 80vh;
}
.video-lightbox-stage video{
  width: 100%;
  max-height: 80vh;
  display: block;
  background: var(--ink-900);
}
.video-lightbox figcaption{ padding: 1.1rem 1.6rem; }
.video-lightbox figcaption h3{ margin: 0; }

/* ---------- Services mega menu ---------- */
.nav-item{ position: relative; }
.mega-trigger{ display: inline-flex; align-items: center; gap: .32rem; }
.mega-chevron{ width: 13px; height: 13px; flex: none; transition: transform .25s ease; }
.has-mega:hover .mega-chevron,
.has-mega:focus-within .mega-chevron{ transform: rotate(180deg); }

.mega-toggle{
  display: none;
  width: 36px; height: 36px;
  flex: none;
  border: none;
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mega-toggle svg{ width: 16px; height: 16px; transition: transform .25s ease; }
.mega-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

.mega-panel{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(560px, 90vw);
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 450;
}
/* Invisible bridge closes the hover gap between trigger and panel */
.mega-panel::before{
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
@media (min-width: 941px){
  .has-mega:hover .mega-panel,
  .has-mega:focus-within .mega-panel{
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}
.mega-panel-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
}
.mega-item{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  min-width: 0;
  padding: .8rem .85rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mega-item:hover, .mega-item:focus-visible{
  background: var(--frost);
  border-color: var(--sky-dark);
  box-shadow: var(--shadow-sm);
  transform: translateX(3px);
}
.mega-item-icon{
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--frost);
  color: var(--brand-red);
  display: grid;
  place-items: center;
  transition: background-color .25s ease, color .25s ease;
}
.mega-item-icon svg{ width: 19px; height: 19px; }
.mega-item:hover .mega-item-icon, .mega-item:focus-visible .mega-item-icon{
  background: var(--sky-dark);
  color: var(--paper);
}
.mega-item-text{ min-width: 0; }
.mega-item-title{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink-900);
}
.mega-item-desc{
  display: block;
  font-size: .77rem;
  color: var(--steel);
  margin-top: .2rem;
  line-height: 1.4;
}
.mega-panel-footer{
  margin-top: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line-frost);
  text-align: center;
}
.mega-panel-cta{ font-size: .84rem; font-weight: 700; color: var(--brand-red-dark); }
.mega-panel-cta:hover{ color: var(--flame-dark); }

@media (prefers-reduced-motion: reduce){
  .mega-panel, .mega-chevron, .mega-item, .mega-item-icon, .mega-toggle svg{ transition: none; }
}

@media (max-width: 940px){
  .main-nav ul li.nav-item.has-mega{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-item.has-mega .mega-trigger{ flex: 1; min-width: 0; }
  .mega-toggle{ display: flex; }
  .mega-panel{
    position: static;
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--frost);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    flex-basis: 100%;
    transition: max-height .3s ease, padding .3s ease;
  }
  .mega-panel::before{ display: none; }
  .nav-item.has-mega.is-open .mega-panel{
    max-height: 900px;
    padding: .6rem .6rem 1rem;
  }
  .mega-panel-grid{ grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .mega-item{ background: var(--paper); }
  .mega-panel-footer{ display: none; }
}

/* ---------- Testimonials: premium infinite carousel ---------- */
.testimonial-metrics{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.6rem;
  margin-bottom: 2.6rem;
  list-style: none;
}
.testimonial-metrics li{ text-align: center; }
.testimonial-metric-num{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink-900);
}
.testimonial-metric-num .metric-star{ width: 20px; height: 20px; color: var(--flame); flex: none; }
.testimonial-metric-label{ display: block; font-size: .8rem; color: var(--steel); font-weight: 600; margin-top: .25rem; }

.testimonial-carousel{
  position: relative;
  overflow: hidden;
  padding: .5rem 0 1.2rem;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-carousel.is-dragging{ cursor: grabbing; }
.testimonial-carousel:focus-visible{ outline: 3px solid var(--flame); outline-offset: 4px; }
.testimonial-track{
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: 0 1.5rem;
  will-change: transform;
}
.testimonial-card{
  flex: none;
  width: min(380px, 84vw);
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 1.8rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.7);
  border-color: var(--sky-dark);
}
.testimonial-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.testimonial-quote-mark{
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--sky-dark), var(--flame));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.testimonial-stars{ color: var(--flame); font-size: .85rem; letter-spacing: .1em; }
.testimonial-card-quote{ color: var(--ink-700); font-size: .98rem; line-height: 1.65; min-height: 5.6em; }
.testimonial-card-attrib{
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-frost);
}
.testimonial-avatar{
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  color: var(--paper);
  background: linear-gradient(135deg, var(--avatar-a, var(--flame)), var(--avatar-b, var(--brand-red)));
  transition: transform .3s ease;
}
.testimonial-card:hover .testimonial-avatar{ transform: scale(1.08); }
.testimonial-attrib-text{ display: flex; flex-direction: column; }
.testimonial-attrib-text b{
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--ink-900);
}
.testimonial-attrib-text span{ font-size: .8rem; color: var(--steel); margin-top: .15rem; }
.verified-badge{ width: 15px; height: 15px; color: var(--sky-dark); flex: none; }

.testimonial-carousel.is-static{ overflow-x: auto; cursor: auto; scrollbar-width: thin; }
.testimonial-carousel.is-static .testimonial-track{ scroll-snap-type: x proximity; }
.testimonial-carousel.is-static .testimonial-card{ scroll-snap-align: start; }

@media (max-width: 640px){
  .testimonial-card{ padding: 1.6rem 1.5rem 1.4rem; }
  .testimonial-track{ gap: 1rem; padding: 0 1rem; }
}
@media (prefers-reduced-motion: reduce){
  .testimonial-card{ transition: none; }
  .testimonial-avatar{ transition: none; }
}

/* ---------- Award: premium trophy card + click-to-enlarge modal ---------- */
.award-media{
  width: 152px;
  height: 152px;
  padding: 16px;
  margin: 0;
  border-radius: 20px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    var(--shadow-md),
    0 0 0 1.5px rgba(212,175,55,.55),
    0 0 26px -6px rgba(212,175,55,.4);
  transition: box-shadow .3s ease, transform .3s ease;
}
.award-media img{ border-radius: 12px; }
.award-media:hover, .award-media:focus-visible{
  transform: scale(1.03);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1.5px rgba(212,175,55,.8),
    0 0 38px -2px rgba(212,175,55,.6);
}
.award-media:active{ transform: scale(1.01); }
@media (max-width: 900px){ .award-media{ width: 158px; height: 158px; } }
@media (max-width: 700px){ .award-media{ width: 144px; height: 144px; } }
@media (prefers-reduced-motion: reduce){ .award-media{ transition: none; } }

.eyebrow.award-badge{
  background: linear-gradient(120deg, #F5D77A, #D4AF37 55%, #9C7A24);
  color: var(--ink-900);
  padding: .42rem .95rem .42rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
.eyebrow.award-badge::before{ content: none; }
.award-badge-icon{ font-size: 1em; line-height: 1; }

.trophy-modal{
  border: none;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  width: min(560px, 92vw);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.trophy-modal::backdrop{
  background: rgba(17,22,29,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trophy-modal[open]{ display: flex; }
.trophy-modal figure{
  margin: 0;
  width: 100%;
  max-height: 90vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, var(--ink-900), var(--ink-700));
  padding: 2.2rem 1.6rem 1.8rem;
}
.trophy-modal-img{
  max-height: 75vh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.trophy-modal figcaption{ text-align: center; margin-top: 1.2rem; }
.trophy-modal figcaption strong{
  display: block;
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.1rem;
}
.trophy-modal-meta{
  display: block;
  color: var(--sky);
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .3rem;
}
.trophy-modal figcaption p{
  color: rgba(255,255,255,.75);
  font-size: .88rem;
  margin: .7rem auto 0;
  max-width: 42ch;
}
.trophy-modal-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.trophy-modal-close:hover{ background: var(--flame); color: var(--ink-900); }
.trophy-modal-close svg{ width: 18px; height: 18px; }
body.trophy-modal-open{ overflow: hidden; }
@media (max-width: 640px){
  .trophy-modal figure{ padding: 1.7rem 1.1rem 1.4rem; }
  .trophy-modal-img{ max-height: 70vh; }
}

/* =============================================================
   Homepage premium redesign — additive rules only.
   Utility bar is shared chrome (loaded on every page via
   premium.css); everything else below is homepage-scoped.
   ============================================================= */

/* ---------- Utility bar (global, sits above .site-header) ---------- */
.utility-bar{
  background: linear-gradient(120deg, var(--ink-900), var(--ink-700));
  border-bottom: 2px solid var(--flame);
  position: relative;
  z-index: 501;
}
.utility-bar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  height: 38px;
}
.utility-bar-left{
  display: flex;
  align-items: center;
  gap: 1.1rem;
  white-space: nowrap;
  color: var(--sky);
  font-family: var(--font-mono);
  font-size: .76rem;
  flex: none;
}
.utility-bar-center{
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 1;
  transition: opacity .35s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1rem;
}
.utility-bar-center.is-fading{ opacity: 0; }
.utility-bar-right{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}
.utility-bar-right a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--frost);
  font-family: var(--font-mono);
  font-size: .76rem;
  text-decoration: none;
  transition: color .2s ease;
}
.utility-bar-right a:hover{ color: var(--flame); }
.utility-bar-right svg{ width: 14px; height: 14px; flex: none; }
@media (max-width: 760px){
  .utility-bar-hours, .utility-bar-center{ display: none; }
  .utility-bar-inner{ height: 34px; }
}
@media (max-width: 480px){
  .utility-bar-right a span{ display: none; }
  .utility-bar-right{ gap: .8rem; }
}
@media (prefers-reduced-motion: reduce){
  .utility-bar-center{ transition: none; }
}

/* ---------- Hero: cinematic full-bleed background video ---------- */
.hero-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8,12,18,.35);
  pointer-events: none;
}

/* ---------- Hero: centered content on video ---------- */
.hero-logo-icon{
  display: block;
  margin: 0 auto 1.4rem;
  width: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
@media (max-width: 640px){
  .hero-logo-icon{ margin-bottom: 1rem; }
}
.hero-content .eyebrow{ color: rgba(255,255,255,.78); justify-content: center; }
.hero-content h1{
  color: var(--paper);
  font-weight: 900;
  font-size: clamp(2rem, 1.1rem + 2.3vw, 3.6rem);
  text-shadow: 0 4px 32px rgba(0,0,0,.4);
}
@media (min-width: 1024px){
  .hero-content h1{ white-space: nowrap; }
}
.hero-subbrand{
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-stretch: expanded;
  line-height: 1.02;
  text-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.hero-subbrand strong{
  display: block;
  margin: 0;
  max-width: 100%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  font-size: clamp(1.7rem, calc(0.93rem + 3.86vw), 4.4rem);
  background: linear-gradient(135deg, #FFB27A 0%, var(--flame) 45%, var(--flame-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(244,123,32,.45)) drop-shadow(0 6px 22px rgba(0,0,0,.35));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hero-subbrand-line{
  display: block;
  margin-top: .3em;
  color: var(--flame);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: normal;
  font-size: clamp(1.1rem, 0.5rem + 1.7vw, 2.2rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.3), 0 0 20px rgba(244,123,32,.22);
}
@media (min-width: 1024px){
  .hero-subbrand-line{ white-space: nowrap; }
}
.hero-subbrand-sub{
  display: block;
  margin-top: .6em;
  color: rgba(255,255,255,.68);
  font-weight: 700;
  line-height: 1.3;
  font-size: clamp(1.1375rem, calc(0.901rem + 1.182vw), 1.625rem);
}
/* ---------- Hero: scroll indicator ---------- */
.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
}
.hero-scroll-text{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-scroll-mouse{
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.hero-scroll-wheel{
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--paper);
  animation: hero-scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-wheel{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(10px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-wheel{ animation: none; }
}
@media (max-width: 640px){
  .hero-scroll{ bottom: 1.4rem; }
}
@media (max-width: 720px){
  /* Clear the fixed .mobile-call-bar (height ~4.6rem, see styles.css) */
  .hero-scroll{ bottom: calc(4.6rem + 1rem); }
}
@media (max-height: 830px){
  /* Not enough vertical room for the hint alongside the full hero copy block */
  .hero-scroll{ display: none; }
}

/* ---------- Why choose us: extra hover polish on shared mini-feature-card ---------- */
.mini-feature-card{ position: relative; overflow: hidden; }
.mini-feature-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--flame), var(--sky-dark));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
.mini-feature-card:hover::before{ transform: scaleX(1); }
.mini-feature-card:hover .mini-feature-icon{
  background: var(--flame);
  color: var(--paper);
  transform: scale(1.08) rotate(-4deg);
}
.mini-feature-icon{ transition: transform .3s ease, background-color .3s ease, color .3s ease; }
@media (prefers-reduced-motion: reduce){
  .mini-feature-card::before, .mini-feature-icon{ transition: none; }
}

/* ---------- Statistics band: 5-column dark variant ---------- */
.stat-strip-5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stat-strip-5 .stat{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.stat-strip-5 .stat .num{ color: var(--paper); }
.stat-strip-5 .stat .label{ color: var(--sky); }
.stat-strip-5 .stat:hover{ border-color: transparent; }
@media (max-width: 980px){
  .stat-strip-5{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .stat-strip-5{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Homepage gallery preview: hover overlay + safety for empty category ---------- */
.lightbox-category:empty{ display: none; }

/* ---------- Testimonials: glassmorphism card ---------- */
.testimonial-card{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
}

/* ---------- Blog & case-study preview cards (homepage) ---------- */
.preview-card{
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.preview-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.preview-card-thumb{ position: relative; aspect-ratio: 16/10; overflow: hidden; }
.preview-card-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.preview-card:hover .preview-card-thumb img{ transform: scale(1.06); }
.preview-card-meta{
  display: flex;
  gap: .7rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-red-dark);
}
.preview-card-body{ padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.preview-card-body h3{ font-size: 1.12rem; line-height: 1.35; }
.preview-card-body p{ color: var(--steel); font-size: .92rem; flex: 1; }
.preview-card-link{ font-weight: 700; color: var(--brand-red); display: inline-flex; align-items: center; gap: .4rem; transition: gap .25s ease; }
.preview-card:hover .preview-card-link{ gap: .65rem; }

/* ---------- Case study preview: Challenge / Solution / Result ---------- */
.case-preview-card{
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.case-preview-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.case-preview-card:hover .card-thumb img{ transform: scale(1.07); }
.case-preview-card .card-thumb{ margin: -1.8rem -1.7rem 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.case-preview-client{ font-family: var(--font-mono); font-size: .78rem; color: var(--steel); text-transform: uppercase; letter-spacing: .05em; }
.case-preview-industry{ font-family: var(--font-mono); font-size: .78rem; color: var(--brand-red-dark); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.case-preview-card h3{ font-size: 1.14rem; }
.case-preview-row{ display: flex; gap: .8rem; }
.case-preview-row-label{
  flex: none;
  width: 84px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sky-dark);
  padding-top: .1rem;
}
.case-preview-row p{ font-size: .9rem; color: var(--ink-700); line-height: 1.55; }
@media (prefers-reduced-motion: reduce){
  .preview-card, .preview-card-thumb img, .case-preview-card{ transition: none; }
}

/* ---------- Article / case-study detail templates ---------- */
.article-hero-img{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 2.4rem; }
.article-hero-img img{ width: 100%; height: auto; display: block; aspect-ratio: 16/8; object-fit: cover; }
.article-meta-row{
  display: flex;
  gap: .9rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
.article-prose{ max-width: 68ch; margin: 0 auto; }
.article-prose h2{ margin-top: 2.2rem; margin-bottom: .8rem; font-size: 1.4rem; }
.article-prose p{ color: var(--ink-700); line-height: 1.75; margin-bottom: 1.1rem; }
.article-prose ul, .article-prose ol{ color: var(--ink-700); line-height: 1.75; margin: 0 0 1.1rem 1.3rem; }
.article-prose li{ margin-bottom: .5rem; }
.case-detail-quote{
  border-left: 4px solid var(--flame);
  padding: 1.2rem 1.6rem;
  margin: 2rem 0;
  background: var(--frost);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: expanded;
  color: var(--ink-900);
}
.case-detail-quote cite{
  display: block;
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  font-style: normal;
  color: var(--steel);
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 640px){
  .article-hero-img img{ aspect-ratio: 4/3; }
}

/* =============================================================
   About page — premium redesign (additive, scoped to new classes)
   ============================================================= */

/* ---------- Hero: dark overlay + ambient gradient variant ---------- */
.about-hero{
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
}
.about-hero .hero-bg img{ object-position: center 65%; }
.about-hero .hero-bg::after{
  background: linear-gradient(100deg, rgba(17,22,29,.94) 0%, rgba(17,22,29,.86) 40%, rgba(17,22,29,.62) 70%, rgba(17,22,29,.4) 100%);
}
.about-hero .mesh-ambient{ z-index: 1; opacity: .5; }
.about-hero .container{ position: relative; z-index: 2; }
.about-hero .breadcrumb{ color: rgba(255,255,255,.65); }
.about-hero .breadcrumb a{ color: var(--flame); }
.about-hero .eyebrow{ color: rgba(255,255,255,.85); }
.about-hero h1{ color: var(--paper); text-shadow: 0 4px 28px rgba(0,0,0,.45); }
.about-hero .lede{ color: rgba(255,255,255,.82); }
@media (max-width: 760px){
  .about-hero{ min-height: 420px; padding: calc(var(--space-lg) + 1rem) 0 var(--space-lg); }
}

/* ---------- Founder section: asymmetric 35/65 layout ---------- */
.founder-grid{
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 3.5rem;
  align-items: start;
}
.founder-photo{
  border: 8px solid var(--paper);
  box-shadow: var(--shadow-lg);
}
.founder-name{ margin-top: 1.4rem; }
.founder-badge{ margin-top: .7rem; }
.founder-copy p{ margin-top: 1.1rem; color: var(--steel); }
.founder-copy p:first-of-type{ margin-top: 1.4rem; }
@media (max-width: 860px){
  .founder-grid{ grid-template-columns: 1fr; gap: 2.2rem; }
  .founder-photo{ max-width: 280px; margin: 0 auto; }
}

/* ---------- Shared: small icon-card grid (founder highlights, stats icons) ---------- */
.mini-feature-grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .mini-feature-grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .mini-feature-grid-4{ grid-template-columns: 1fr; } }

/* ---------- Homepage: Why Choose Us (6 cards, balanced 3x2 instead of the shared 5-col default) ---------- */
.mini-feature-grid.mini-feature-grid-6{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .mini-feature-grid.mini-feature-grid-6{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .mini-feature-grid.mini-feature-grid-6{ grid-template-columns: 1fr; } }

/* ---------- Shared: checklist rendered as chip cards (Who We Are / Team) ---------- */
.check-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.check-card{
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--frost);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-md);
  padding: .95rem 1.15rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-700);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.check-card svg{ width: 18px; height: 18px; color: var(--flame); flex: none; }
.check-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); background: var(--paper); border-color: var(--flame); }
@media (prefers-reduced-motion: reduce){ .check-card{ transition: none; } }

/* ---------- Who We Are: photo corner badge ---------- */
.photo-badge{
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 1;
  background: rgba(17,22,29,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .55rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.25);
}

/* ---------- Company Statistics: icon + description on shared .stat ---------- */
.stat-modern{ padding: 2.6rem 1.4rem 2.2rem; display: flex; flex-direction: column; align-items: center; }
.stat-icon{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--frost);
  color: var(--brand-red);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.stat-icon svg{ width: 24px; height: 24px; }
.stat-modern:hover .stat-icon{ background: var(--flame); color: var(--paper); transform: scale(1.08); }
.stat-desc{ font-size: .82rem; color: var(--steel); font-weight: 400; margin-top: .5rem; }
@media (prefers-reduced-motion: reduce){ .stat-icon{ transition: none; } }

/* ---------- Core Values: six-card grid ---------- */
.core-values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.core-value-card{
  --accent: var(--flame);
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-frost);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.core-value-card::before{
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 72%);
  opacity: .1;
  z-index: -1;
  transition: opacity .3s ease;
}
.core-value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.core-value-card:hover::before{ opacity: .2; }
.core-value-icon{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--frost);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.core-value-icon svg{ width: 25px; height: 25px; }
.core-value-card:hover .core-value-icon{ background: var(--accent); color: var(--paper); transform: scale(1.08) rotate(-4deg); }
.core-value-card h3{ margin-bottom: .6rem; }
.core-value-card p{ color: var(--steel); font-size: .94rem; }
.core-values-grid .core-value-card:nth-child(2){ --accent: var(--sky-dark); }
.core-values-grid .core-value-card:nth-child(3){ --accent: var(--brand-red); }
.core-values-grid .core-value-card:nth-child(5){ --accent: var(--sky-dark); }
.core-values-grid .core-value-card:nth-child(6){ --accent: var(--brand-red); }
.core-values-grid .core-value-card.reveal:nth-child(3n+2){ transition-delay: .08s; }
.core-values-grid .core-value-card.reveal:nth-child(3n+3){ transition-delay: .16s; }
@media (max-width: 980px){ .core-values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){
  .core-values-grid{ grid-template-columns: 1fr; }
  .core-values-grid .core-value-card.reveal{ transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce){
  .core-value-card, .core-value-icon{ transition: none; }
  .core-values-grid .core-value-card.reveal{ transition-delay: 0s; }
}

/* ---------- Mission & Vision: glass cards ---------- */
.mv-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.mv-card{
  background: linear-gradient(155deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: transform .3s ease, box-shadow .3s ease;
}
.mv-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.mv-icon{
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--paper);
  margin-bottom: 1.3rem;
}
.mv-icon svg{ width: 27px; height: 27px; }
.mv-card.mv-mission .mv-icon{ background: linear-gradient(150deg, var(--flame), var(--brand-red)); }
.mv-card.mv-vision .mv-icon{ background: linear-gradient(150deg, var(--sky-dark), var(--ink-700)); }
.mv-card h3{ margin-bottom: .7rem; }
.mv-card p{ color: var(--steel); }
@media (max-width: 820px){ .mv-grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .mv-card{ transition: none; } }

/* ---------- Milestones: icon badges replacing plain dots ---------- */
.timeline.timeline-icons{ padding-left: 2.75rem; }
.timeline.timeline-icons .timeline-item::before{ content: none; }
.timeline.timeline-icons .timeline-item{ position: relative; }
.timeline-icon{
  position: absolute;
  left: -3.6rem;
  top: -.2rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--flame);
  color: var(--brand-red);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.timeline-icon svg{ width: 16px; height: 16px; }
@media (max-width: 560px){
  .timeline.timeline-icons{ padding-left: 2.4rem; }
  .timeline-icon{ left: -3.15rem; width: 32px; height: 32px; }
  .timeline-icon svg{ width: 14px; height: 14px; }
}

/* ---------- How it works: horizontal icon timeline (desktop/tablet) ---------- */
.icon-timeline{
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  position: relative;
  padding-top: .5rem;
}
.icon-timeline::before{
  content: "";
  position: absolute;
  top: 38px;
  left: 42px;
  right: 42px;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.icon-timeline-step{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 .6rem;
  z-index: 1;
}
.icon-timeline-icon{
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper);
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
  box-shadow: var(--shadow-sm);
  border: 4px solid var(--paper);
  outline: 1px solid var(--line-frost);
  transition: transform .3s ease, background-color .3s ease;
}
.icon-timeline-icon svg{ width: 27px; height: 27px; }
.icon-timeline-step:hover .icon-timeline-icon{ background: var(--brand-red); transform: translateY(-4px); }
.icon-timeline-step-label{
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-red-dark);
  margin-bottom: .5rem;
}
.icon-timeline-step h3{ margin-bottom: .5rem; font-size: 1.05rem; }
.icon-timeline-step p{ color: var(--steel); font-size: .88rem; }
.icon-timeline-mobile{ display: none; }
@media (max-width: 980px){
  .icon-timeline-icon{ width: 56px; height: 56px; }
  .icon-timeline-icon svg{ width: 22px; height: 22px; }
  .icon-timeline::before{ top: 32px; left: 34px; right: 34px; }
  .icon-timeline-step h3{ font-size: .95rem; }
  .icon-timeline-step p{ font-size: .82rem; }
}
@media (max-width: 760px){
  .icon-timeline{ display: none; }
  .icon-timeline-mobile{ display: block; }
}
@media (prefers-reduced-motion: reduce){ .icon-timeline-icon{ transition: none; } }

/* ---------- Our Solutions: photographic thumb replacing icon ---------- */
.core-value-thumb{
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.3rem;
  background: var(--frost);
}
.core-value-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.core-value-card:hover .core-value-thumb img{ transform: scale(1.08); }
@media (prefers-reduced-motion: reduce){ .core-value-thumb img{ transition: none; } }

/* ---------- Homepage: Project Videos ---------- */
.video-gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.video-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-900);
  aspect-ratio: 4/3;
  border: 1px solid var(--line-frost);
}
.video-card-poster{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform .5s ease, filter .3s ease;
}
.video-card:hover .video-card-poster{ transform: scale(1.06); filter: brightness(.85); }
.video-card video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink-900); }
.video-card-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--brand-red-dark);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .25s ease, background-color .25s ease;
  z-index: 1;
}
.video-card-play svg{ width: 24px; height: 24px; margin-left: 3px; }
.video-card:hover .video-card-play{ transform: translate(-50%, -50%) scale(1.08); background: var(--paper); }
.video-card.is-playing .video-card-poster,
.video-card.is-playing .video-card-play{ display: none; }
.video-card-label{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(9,13,18,.82), transparent);
  color: var(--paper);
  font-weight: 700;
  font-size: .92rem;
  pointer-events: none;
}
.video-card.is-playing .video-card-label{ display: none; }
@media (max-width: 980px){ .video-gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .video-gallery-grid{ grid-template-columns: 1fr; } }

/* ---------- Homepage: Our Valued Clients ---------- */
.valued-clients-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.valued-client-card{
  background: var(--paper);
  border: 2px solid var(--line-frost);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.valued-client-card:hover, .valued-client-card:focus-within{
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--flame);
}
.valued-client-logo-wrap{
  width: 100%;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valued-client-logo-wrap img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .3s ease;
}
.valued-client-card:hover .valued-client-logo-wrap img,
.valued-client-card:focus-within .valued-client-logo-wrap img{ transform: scale(1.06); }
.valued-client-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.3;
  color: var(--ink-900);
  text-align: center;
}
.valued-clients-grid .valued-client-card.reveal{ transition-delay: var(--reveal-delay, 0s); }
.valued-clients-grid .valued-client-card:nth-child(4n+2){ --reveal-delay: .05s; }
.valued-clients-grid .valued-client-card:nth-child(4n+3){ --reveal-delay: .1s; }
.valued-clients-grid .valued-client-card:nth-child(4n+4){ --reveal-delay: .15s; }
@media (max-width: 980px){
  .valued-clients-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .valued-clients-grid{ grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .valued-client-logo-wrap{ height: 64px; }
}
@media (max-width: 400px){
  .valued-clients-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .valued-client-card, .valued-client-logo-wrap img{ transition: none; }
  .valued-clients-grid .valued-client-card.reveal{ transition-delay: 0s; }
}

/* ---------- Homepage: Our Valued Clients as an infinite logo marquee ----------
   Self-contained (does not reuse the shared .marquee/.marquee-track base
   classes — those carry a `.marquee-track span{ white-space:nowrap }` rule
   for an unrelated ticker that would clip the client-name labels below). */
.logo-marquee{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  scrollbar-width: none;
}
.logo-marquee::-webkit-scrollbar{ display: none; }
.logo-marquee-track{
  display: flex;
  width: max-content;
  gap: 1.25rem;
  animation: scroll-left 60s linear infinite;
}
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track{ animation-play-state: paused; }
.logo-marquee-set{ display: contents; }
.logo-marquee .valued-client-card{ flex: 0 0 auto; width: 165px; }
@media (max-width: 1180px){ .logo-marquee .valued-client-card{ width: 185px; } }
@media (max-width: 980px){ .logo-marquee .valued-client-card{ width: 220px; } }
@media (max-width: 640px){ .logo-marquee .valued-client-card{ width: 165px; } }
@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation: none; }
  .logo-marquee-set[aria-hidden="true"]{ display: none; }
}

/* ---------- Homepage: Gallery (white) + Project Videos (brand blue) alternating sections ---------- */
.section-accent-blue .eyebrow{ color: var(--sky-dark); }
.section-accent-blue .eyebrow::before{ background: var(--sky-dark); }
.bg-brand-blue{ background: linear-gradient(135deg, var(--sky-dark), var(--ink-700)); }
.bg-brand-blue h2, .bg-brand-blue h3, .bg-brand-blue .eyebrow{ color: var(--paper); }
.bg-brand-blue .eyebrow::before{ background: var(--paper); }
.bg-brand-blue .section-head p{ color: rgba(255,255,255,.82); }
.bg-brand-blue .video-card{ background: var(--paper); padding: .6rem; border: none; box-shadow: var(--shadow-lg); }
.bg-brand-blue .video-card-poster,
.bg-brand-blue .video-card video{ inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); border-radius: calc(var(--radius-lg) - .3rem); }

/* ---------- Service pages: project gallery as an infinite image carousel ----------
   Self-contained, like .logo-marquee above — does not reuse the shared
   .marquee/.marquee-track base classes. */
.gallery-carousel{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  scrollbar-width: none;
}
.gallery-carousel::-webkit-scrollbar{ display: none; }
.gallery-carousel-track{
  display: flex;
  width: max-content;
  gap: 1.5rem;
  animation: scroll-left 26s linear infinite;
}
.gallery-carousel:hover .gallery-carousel-track,
.gallery-carousel:focus-within .gallery-carousel-track{ animation-play-state: paused; }
.gallery-carousel-set{ display: contents; }
.gallery-carousel-track .gallery-card{ flex: 0 0 auto; width: 220px; height: 260px; margin-bottom: 0; break-inside: auto; }
.gallery-carousel-track .gallery-card img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1180px){ .gallery-carousel-track .gallery-card{ width: 260px; height: 220px; } }
@media (max-width: 900px){ .gallery-carousel-track .gallery-card{ width: 230px; height: 210px; } }
@media (max-width: 640px){ .gallery-carousel-track .gallery-card{ width: 200px; height: 190px; } }
@media (prefers-reduced-motion: reduce){
  .gallery-carousel-track{ animation: none; }
  .gallery-carousel{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gallery-carousel-set[aria-hidden="true"]{ display: none; }
}

/* ---------- Nav: Gallery dropdown (Images / Videos) — narrow single-column mega-panel ---------- */
.mega-panel.mega-panel-narrow{ width: min(240px, 90vw); }
.mega-panel-grid.mega-panel-grid-1{ grid-template-columns: 1fr; }

/* ---------- About: Our Values trio (Integrity / Quality / Reliability) ---------- */
.values-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.2rem;
}
.values-trio-card{
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line-frost);
  transition: transform .3s ease, box-shadow .3s ease;
}
.values-trio-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.values-trio-icon{
  width: 60px; height: 60px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--frost);
  color: var(--brand-red-dark);
  display: grid;
  place-items: center;
}
.values-trio-icon svg{ width: 26px; height: 26px; }
.values-trio-card h3{ margin-bottom: .5rem; }
.values-trio-card p{ color: var(--steel); font-size: .92rem; }
@media (max-width: 760px){ .values-trio{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .values-trio-card{ transition: none; } }