/* ============================================================
   MEDIASTUFF.IN — DESIGN SYSTEM
   Palette: #000000 canvas / #0A0A0A panels / #C9A84C gold / #F5F0E8 ivory
   Type: Playfair Display (display) + Inter (body/UI)
   ============================================================ */

:root{
  --black:        #000000;
  --panel:        #0A0A0A;
  --panel-raised: #121110;
  --gold:         #C9A84C;
  --gold-soft:    rgba(201,168,76,0.14);
  --gold-line:    rgba(201,168,76,0.28);
  --ivory:        #F5F0E8;
  --muted:        #8C8676;
  --hairline:     rgba(245,240,232,0.09);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,0,1);
}

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

  /* The testimonial marquee is exempted from the reduced-motion kill-switch
     above — without this, the global rule forces its animation to complete
     a single ~0ms cycle and then freeze permanently on one static frame,
     which looks exactly like a broken, stopped carousel. This keeps it
     scrolling continuously for every visitor, matching what a marketing
     carousel is expected to do. */
  .testimonial-marquee-track{
    animation-duration:25s !important;
    animation-iteration-count:infinite !important;
  }
}

body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:#000;
  padding:.75rem 1.25rem; z-index:999;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0; color:var(--ivory); }
p{ margin:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 1.5rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-size:.8rem; letter-spacing:.02em;
  color:var(--gold); margin-bottom:1.1rem;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold); }

.section{ padding:6.5rem 0; position:relative; }
.section-tight{ padding:4rem 0; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem; border-radius:var(--radius); font-weight:600; font-size:.95rem;
  border:1px solid transparent; transition:transform .35s var(--ease), background .35s, border-color .35s, color .35s;
  white-space:nowrap;
}
.btn-gold{ background:var(--gold); color:#0A0A0A; }
.btn-gold:hover{ transform:translateY(-2px); background:#ddc06a; }
.btn-outline-gold{ border-color:var(--gold-line); color:var(--ivory); }
.btn-outline-gold:hover{ border-color:var(--gold); background:var(--gold-soft); }
.btn-small{ padding:.7rem 1.3rem; font-size:.85rem; }
.btn-ghost{ color:var(--ivory); border-bottom:1px solid var(--gold-line); border-radius:0; padding:.3rem 0; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:1.35rem 1.5rem;
  display:flex; align-items:center; gap:2.5rem;
}
.site-header.is-scrolled .header-inner{ padding:.95rem 1.5rem; }

.brand{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.brand-mark{ display:block; object-fit:contain; }
.brand-word{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; letter-spacing:.01em; color:var(--ivory); }
.brand-dot{ color:var(--gold); }

.main-nav{ flex:1; }
.main-nav > ul{ display:flex; align-items:center; gap:2.1rem; justify-content:center; }
.main-nav a{ font-size:.92rem; font-weight:500; color:var(--ivory); opacity:.82; position:relative; padding:.3rem 0; }
.main-nav a:hover, .main-nav a.active{ opacity:1; color:var(--gold); }
.main-nav li.has-mega{ position:relative; }
.mobile-mega-head{ display:flex; align-items:center; }
.mega-toggle{ display:none; background:none; border:none; color:var(--ivory); padding:.4rem; cursor:pointer; }

.mega-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  padding-top:1.4rem; /* invisible hover-bridge: real box area, not just a position offset,
                          so the cursor stays "inside" the dropdown while crossing this gap */
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.main-nav li.has-mega:hover .mega-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;
}
.mega-panel-inner{
  width:560px; background:var(--panel-raised); border:1px solid var(--hairline);
  padding:1rem; display:grid; grid-template-columns:1fr 1fr; gap:.25rem;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.mega-panel-inner a{ display:flex; flex-direction:column; gap:.15rem; padding:.7rem .8rem; border-radius:var(--radius); opacity:1; }
.mega-panel-inner a:hover{ background:var(--gold-soft); }
.mega-panel-inner a span{ font-weight:600; font-size:.88rem; color:var(--ivory); }
.mega-panel-inner a:hover span{ color:var(--gold); }
.mega-panel-inner a small{ font-size:.76rem; color:var(--muted); font-weight:400; }

.header-cta{ display:flex; align-items:center; gap:1.4rem; flex-shrink:0; }
.header-phone{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--muted); }
.header-phone:hover{ color:var(--gold); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; position:relative; z-index:160; }
.nav-toggle span{ width:22px; height:1.5px; background:var(--ivory); transition:transform .3s, opacity .3s; }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:9rem 0 5rem;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 82% 18%, rgba(201,168,76,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(201,168,76,0.06), transparent 60%),
    var(--black);
}
.hero-signal{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; pointer-events:none;
}
.hero-grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(245,240,232,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,240,232,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 60% 40%, black 20%, transparent 75%);
}

/* Ambient floating bubbles — used on service-page heroes instead of the
   homepage's canvas signal line, so those pages feel calmer/lighter while
   still having some quiet motion. Pure CSS, no JS/canvas needed.
   overflow-anchor:none because perpetual animations can otherwise confuse
   the browser's scroll-anchoring heuristic (see the marquee fix earlier). */
.hero-bubbles{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-bubble{
  position:absolute; bottom:-4%; border-radius:50%; overflow-anchor:none;
  background:radial-gradient(circle at 35% 30%, rgba(201,168,76,0.9), rgba(201,168,76,0.15) 70%, transparent 100%);
  box-shadow:0 0 6px rgba(201,168,76,0.35);
  animation-name:bubble-float; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes bubble-float{
  0%{ transform:translateY(0) translateX(0) scale(1); opacity:0; }
  12%{ opacity:.85; }
  50%{ transform:translateY(-48vh) translateX(var(--drift, 20px)) scale(1.1); }
  88%{ opacity:.45; }
  100%{ transform:translateY(-92vh) translateX(calc(var(--drift, 20px) * 1.6)) scale(0.85); opacity:0; }
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start;
  max-width:var(--container); margin:0 auto; padding:0 1.5rem; width:100%;
}
.hero-kicker{
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem;
  font-size:.82rem; color:var(--muted);
}
.breadcrumb{
  display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--muted); margin-bottom:1.8rem;
}
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb [aria-current]{ color:var(--ivory); }
.hero-kicker .pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,168,76,.6); animation:pulse 2.2s infinite; overflow-anchor:none;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(201,168,76,.5); }
  70%{ box-shadow:0 0 0 9px rgba(201,168,76,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,168,76,0); }
}
.hero h1{
  font-size:clamp(2.6rem, 5.2vw, 4.7rem);
  letter-spacing:-.01em;
  max-width:14ch;
}
.hero h1 em{ font-style:italic; color:var(--gold); font-weight:500; }
.hero-sub{
  margin-top:1.7rem; max-width:46ch; color:var(--muted); font-size:1.08rem;
}
.hero-actions{ display:flex; align-items:center; gap:1.6rem; margin-top:2.6rem; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:2.4rem; margin-top:3.6rem; padding-top:2rem; border-top:1px solid var(--hairline);
}
.hero-stat b{
  display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--ivory);
}
.hero-stat span{ font-size:.8rem; color:var(--muted); }

/* Hero visual — tilting dashboard mockup, built from CSS, no stock imagery */
.hero-visual{ position:relative; perspective:1200px; margin-top:2.7rem; }
.dash-card{
  position:relative; background:linear-gradient(160deg, var(--panel-raised), var(--panel));
  border:1px solid var(--hairline); border-radius:10px; padding:1.6rem;
  transform:rotateY(-10deg) rotateX(6deg);
  transition:transform .25s ease-out;
  box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,0.04);
}
.dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.3rem; }
.dash-head span:first-child{ font-size:.78rem; color:var(--muted); }
.dash-badge{ font-size:.72rem; color:var(--gold); background:var(--gold-soft); padding:.25rem .6rem; border-radius:20px; }
.dash-figure{ font-family:var(--font-display); font-size:2.4rem; color:var(--ivory); margin-bottom:.2rem; }
.dash-delta{ color:#7FBF8E; font-size:.82rem; }
.dash-chart{ margin-top:1.2rem; height:90px; }
.dash-chart svg{ width:100%; height:100%; overflow:visible; }
.dash-rows{ margin-top:1.3rem; display:flex; flex-direction:column; gap:.65rem; }
.dash-row{ display:flex; justify-content:space-between; font-size:.78rem; padding-bottom:.65rem; border-bottom:1px solid var(--hairline); color:var(--muted); }
.dash-row b{ color:var(--ivory); font-weight:500; }
.dash-float{
  position:absolute; right:-1.2rem; top:-1.2rem; background:var(--gold); color:#0A0A0A;
  padding:.7rem 1rem; border-radius:8px; font-size:.78rem; font-weight:700;
  box-shadow:0 20px 40px rgba(201,168,76,.25);
  animation:float 5s ease-in-out infinite; overflow-anchor:none;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ============ MARQUEE ============ */
.marquee-strip{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:1.5rem 0; overflow:hidden; background:var(--panel);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; overflow-anchor:none; }
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  display:flex; align-items:center; gap:.8rem; padding:0 2.4rem;
  font-family:var(--font-display); font-size:1.15rem; color:var(--muted); white-space:nowrap;
}
.marquee-item .dot{ color:var(--gold); font-size:.6rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ SECTION HEADERS ============ */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3.5rem; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); max-width:16ch; }
.section-head p{ color:var(--muted); max-width:34ch; }

/* ============ SERVICES (asymmetric grid) ============
   Cells use explicit per-side borders rather than the gap+background-color
   trick — that older approach can produce 1px subpixel seam artifacts on
   some displays/zoom levels. grid-auto-rows uses a fixed minmax so every
   row (and therefore every card) shares the same height rhythm; the
   featured tile spans two of those equal rows plus the border between them. */
.services-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(240px, auto);
  border-top:1px solid var(--hairline); border-left:1px solid var(--hairline);
}
.service-card{
  background:var(--black); padding:2.4rem 2rem; position:relative; overflow:hidden;
  border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  transition:background .4s var(--ease);
  transform-style:preserve-3d; will-change:transform;
  display:flex; flex-direction:column; align-items:flex-start;
}
.service-card:hover{ background:var(--panel); }
.service-card.featured{ grid-column:span 2; grid-row:span 2; padding:2.8rem; }
.service-num{ font-size:.78rem; color:var(--gold); font-family:var(--font-body); }
.service-icon{ width:34px; height:34px; margin:1.3rem 0 1.4rem; color:var(--gold); }
.service-card h3{ font-size:1.15rem; margin-bottom:.6rem; }
.service-card.featured h3{ font-size:1.6rem; }
.service-card p{ color:var(--muted); font-size:.9rem; }

/* Body content grows to fill the card; footer content (link) stays pinned
   to the bottom so every card — short or featured — ends at the same edge. */
.service-card-body{ flex:1 1 auto; }
.service-card-foot{ margin-top:1.3rem; }

.featured-highlights{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.featured-highlights li{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--ivory); }
.featured-highlights svg{ flex-shrink:0; color:var(--gold); }

.featured-metric{ margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--hairline); }
.featured-metric-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.7rem; }
.featured-metric-head span:first-child{ font-size:.8rem; color:var(--muted); }
.featured-metric-head b{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold); font-weight:600; }
.featured-metric svg{ display:block; width:100%; height:56px; }

.service-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; color:var(--gold); opacity:0; transform:translateX(-6px); transition:all .3s var(--ease); }
.service-card:hover .service-link{ opacity:1; transform:translateX(0); }
.service-glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,0.12), transparent 70%);
  top:-80px; right:-80px; opacity:0; transition:opacity .4s; pointer-events:none;
}
.service-card:hover .service-glow{ opacity:1; }

.service-card-cta{ background:var(--panel); }
.service-card-cta .service-card-body{ display:flex; flex-direction:column; justify-content:center; }
.service-card-cta h3{ font-size:1.1rem; }
.service-card-cta .service-link{ opacity:1; transform:none; }

/* ============ SERVICES HUB PAGE (detailed 2-col cards, /services/) ============ */
.services-hub-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; }
.service-detail-card{
  background:var(--panel-raised); border:1px solid var(--hairline); border-radius:14px;
  padding:2.4rem; display:flex; flex-direction:column;
}
.service-detail-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.service-detail-card h2{ font-size:1.4rem; margin-bottom:.7rem; }
.service-detail-card > p{ color:var(--muted); font-size:.95rem; }
.service-detail-card .featured-highlights{ margin-top:1.4rem; flex:1; }
.service-detail-foot{ margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid var(--hairline); }
.service-detail-link{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.75rem 1.3rem; border:1px solid var(--gold-line); border-radius:6px;
  font-size:.85rem; font-weight:600; color:var(--gold);
  transition:background .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.service-detail-link svg{ transition:transform .3s var(--ease); }
.service-detail-link:hover{ background:var(--gold-soft); border-color:var(--gold); gap:.75rem; }
.service-detail-link:hover svg{ transform:translateX(2px); }

/* ============ INDIVIDUAL SERVICE PAGES ============ */
.feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.feature-card{
  background:var(--panel-raised); border:1px solid var(--hairline); border-radius:12px; padding:2rem;
}
.feature-card svg{ color:var(--gold); margin-bottom:1.1rem; }
.feature-card h3{ font-size:1.05rem; margin-bottom:.6rem; }
.feature-card p{ color:var(--muted); font-size:.9rem; }

/* Single testimonial on individual service pages — reuses the exact same
   .testimonial-card component from the homepage marquee (stars, quote icon,
   divider, avatar) so the two don't look like two different design systems.
   Just centered and static instead of scrolling, since there's only one. */
.testimonial-single-wrap{ max-width:560px; margin:0 auto; }
.testimonial-single-wrap .testimonial-card{ flex:none; width:100%; margin-right:0; }

.related-services{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.related-service-card{
  display:flex; flex-direction:column; gap:.6rem; background:var(--panel-raised); border:1px solid var(--hairline);
  border-radius:12px; padding:1.8rem; transition:border-color .3s, transform .3s var(--ease);
}
.related-service-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
.related-service-card > span:first-child{ font-family:var(--font-display); font-size:1.15rem; color:var(--ivory); }
.related-service-card p{ color:var(--muted); font-size:.88rem; flex:1; }

/* ============ LEGAL PAGES (Privacy / Terms) ============ */
.legal-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--gold);
  padding:.5rem 1rem; border:1px solid var(--gold-line); border-radius:20px; margin-bottom:1.6rem;
}
.legal-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

.legal-summary-card{
  background:linear-gradient(135deg, var(--panel-raised) 0%, var(--panel) 100%);
  border:1px solid var(--gold-line); border-radius:16px; padding:2.4rem;
}
.legal-summary-card .eyebrow{ margin-bottom:1rem; }
.legal-summary-card h2{ font-size:1.5rem; margin-bottom:1.2rem; }

.legal-layout{ display:grid; grid-template-columns:240px 1fr; gap:3rem; align-items:start; }
.legal-toc{ position:sticky; top:6.5rem; display:flex; flex-direction:column; gap:.3rem; }
.legal-toc a{
  font-size:.86rem; color:var(--muted); padding:.55rem .9rem; border-radius:8px; border-left:2px solid transparent;
  transition:color .25s, border-color .25s, background .25s;
}
.legal-toc a:hover{ color:var(--ivory); background:var(--panel-raised); }
.legal-toc a.is-active{ color:var(--gold); border-left-color:var(--gold); background:var(--panel-raised); font-weight:600; }

.legal-section{ padding-bottom:3rem; margin-bottom:3rem; border-bottom:1px solid var(--hairline); scroll-margin-top:6.5rem; }
.legal-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.legal-section-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.legal-section-icon{
  width:44px; height:44px; flex-shrink:0; border-radius:10px; background:var(--gold-soft);
  border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.legal-section h2{ font-size:1.3rem; }
.legal-section p{ color:var(--muted); font-size:.95rem; line-height:1.75; margin-bottom:1rem; }
.legal-section p:last-child{ margin-bottom:0; }
.legal-section ul{ margin:1rem 0; padding-left:1.4rem; }
.legal-section li{ color:var(--muted); font-size:.95rem; line-height:1.7; margin-bottom:.5rem; }

.rights-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin-top:1.5rem; }
.rights-card{
  background:var(--panel); border:1px solid var(--hairline); border-radius:10px; padding:1.3rem;
  text-align:center; transition:border-color .3s, transform .3s var(--ease);
}
.rights-card:hover{ border-color:var(--gold-line); transform:translateY(-2px); }
.rights-card svg{ color:var(--gold); margin-bottom:.7rem; }
.rights-card h4{ font-size:.9rem; margin-bottom:.4rem; }
.rights-card p{ font-size:.78rem; color:var(--muted); margin:0; }

.contact-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:1.3rem; }
.contact-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-field label{ font-size:.85rem; color:var(--muted); }
.form-field label .req{ color:var(--gold); }
.form-field input, .form-field select, .form-field textarea{
  background:var(--panel-raised); border:1px solid var(--hairline); border-radius:8px;
  padding:.85rem 1rem; color:var(--ivory); font-family:var(--font-body); font-size:.95rem;
  transition:border-color .3s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--gold-line);
}
.form-field textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:.82rem; color:var(--muted); }
.form-status{ padding:.9rem 1.1rem; border-radius:8px; font-size:.9rem; margin-bottom:.5rem; }
.form-status.success{ background:rgba(90,168,90,0.12); border:1px solid rgba(90,168,90,0.35); color:#8fd68f; }
.form-status.error{ background:rgba(201,90,76,0.12); border:1px solid rgba(201,90,76,0.35); color:#e39a8f; }

.contact-info-card{
  background:var(--panel-raised); border:1px solid var(--hairline); border-radius:14px; padding:2.2rem;
}
.contact-info-card h3{ font-size:1.15rem; margin-bottom:1.4rem; }
.contact-info-row{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.4rem; }
.contact-info-row:last-child{ margin-bottom:0; }
.contact-info-row svg{ color:var(--gold); flex-shrink:0; margin-top:.15rem; }
.contact-info-row .info-label{ font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.2rem; }
.contact-info-row .info-value{ color:var(--ivory); font-size:.95rem; }
.contact-info-card .footer-social{ margin-top:1.8rem; padding-top:1.8rem; border-top:1px solid var(--hairline); }

.next-steps-row{ display:flex; flex-direction:column; gap:0; }
.next-step{ display:flex; gap:1.5rem; padding:1.8rem 0; border-bottom:1px solid var(--hairline); }
.next-step:last-child{ border-bottom:none; }
.next-step .step-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); flex-shrink:0; width:2.5rem; }
.next-step h3{ font-size:1.05rem; margin-bottom:.4rem; }
.next-step p{ color:var(--muted); font-size:.92rem; }

/* ============ PORTFOLIO ============ */
.portfolio-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; }
.portfolio-card{
  background:var(--panel-raised); border:1px solid var(--hairline); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s;
}
.portfolio-card:hover{ transform:translateY(-4px); border-color:var(--gold-line); }

/* Placeholder "screen" mockup for a project's visual — a real screenshot
   can simply replace this element (swap for an <img>) once you have one;
   this keeps things looking intentional and finished in the meantime. */
.portfolio-visual{
  aspect-ratio:16/10; background:linear-gradient(135deg, var(--panel) 0%, var(--panel-raised) 100%);
  position:relative; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--hairline); overflow:hidden;
}
.portfolio-visual::before{
  content:''; position:absolute; top:14px; left:16px; width:8px; height:8px; border-radius:50%;
  background:var(--gold-line); box-shadow:16px 0 0 var(--gold-line), 32px 0 0 var(--gold-line);
}
.portfolio-visual svg{ color:var(--gold-line); opacity:.55; width:56px; height:56px; }

.portfolio-body{ padding:1.8rem; display:flex; flex-direction:column; flex:1; }
.portfolio-tag{
  display:inline-flex; align-self:flex-start; font-size:.76rem; color:var(--gold); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:1rem; padding:.3rem .75rem; border:1px solid var(--gold-line); border-radius:20px;
}
.portfolio-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.portfolio-card p{ color:var(--muted); font-size:.9rem; line-height:1.6; margin-bottom:1.2rem; flex:1; }
.portfolio-meta{
  display:flex; justify-content:space-between; align-items:center; padding-top:1.1rem;
  border-top:1px solid var(--hairline); font-size:.82rem; color:var(--muted); flex-wrap:wrap; gap:.5rem;
}
.portfolio-meta a{ color:var(--gold); font-weight:600; }

/* Data tables: pricing / comparison — tables are heavily favored for
   extraction into AI Overviews and LLM answers, and genuinely help a
   visitor compare options fast. */
.table-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:10px; }
.data-table{ width:100%; border-collapse:collapse; min-width:520px; }
.data-table th, .data-table td{ padding:1rem 1.3rem; text-align:left; border-bottom:1px solid var(--hairline); font-size:.9rem; }
.data-table thead th{ color:var(--gold); font-family:var(--font-display); font-weight:600; font-size:1rem; background:var(--panel-raised); }
.data-table tbody td{ color:var(--ivory); }
.data-table tbody td:first-child{ color:var(--ivory); font-weight:600; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background:var(--panel-raised); }
.table-note{ margin-top:.9rem; font-size:.85rem; color:var(--muted); }

/* Signals checklist: "is this right for you" — long-tail intent coverage. */
.signal-checklist{ display:flex; flex-direction:column; gap:1.1rem; }
.signal-checklist li{ display:flex; gap:.9rem; align-items:flex-start; font-size:1rem; color:var(--ivory); line-height:1.5; }
.signal-checklist svg{ flex-shrink:0; color:var(--gold); margin-top:.25rem; }

/* Proof strip: a compact stats row right under the hero — credibility up
   front, in numbers, instead of a paragraph explaining what the service is. */
.proof-strip{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.proof-stat{ padding:2.2rem 1.5rem; text-align:center; border-left:1px solid var(--hairline); }
.proof-stat:first-child{ border-left:none; }
.proof-stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.7rem,3.2vw,2.4rem); color:var(--gold); }
.proof-stat span{ display:block; margin-top:.4rem; color:var(--muted); font-size:.82rem; }

/* Benefit grid: "why choose us for this" — differentiators, not deliverables
   (that's what the feature grid above already covers). */
.benefit-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; }
.benefit-card{ background:var(--panel-raised); border:1px solid var(--hairline); border-radius:12px; padding:1.8rem; }
.benefit-card .benefit-num{ display:block; font-family:var(--font-display); font-size:1.2rem; color:var(--gold); margin-bottom:.9rem; }
.benefit-card h3{ font-size:1.02rem; margin-bottom:.6rem; }
.benefit-card p{ color:var(--muted); font-size:.88rem; }


/* "Explore every service" + "More from Mediastuff.in" — deliberate,
   in-content links to every service and main page so nothing on the site
   depends solely on header/footer nav to be reachable (avoids orphan pages). */
.all-services-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 2.5rem; }
.all-services-list a{
  display:flex; align-items:center; gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--hairline);
  font-size:.94rem; color:var(--ivory);
}
.all-services-list a:hover{ color:var(--gold); }
.all-services-list a svg{ color:var(--gold); flex-shrink:0; }

.main-pages-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.5rem; }
.main-pages-row a{
  padding:.6rem 1.3rem; border:1px solid var(--gold-line); border-radius:30px;
  font-size:.85rem; color:var(--ivory); transition:border-color .3s, background .3s, color .3s;
}
.main-pages-row a:hover{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold); }

/* ============ PROCESS (sequential — numbers earned here) ============ */
.process-list{ display:flex; flex-direction:column; }
.process-item{
  display:grid; grid-template-columns:100px 1fr 1.3fr; gap:2.5rem; align-items:start;
  padding:2.6rem 0; border-top:1px solid var(--hairline);
}
.process-item:last-child{ border-bottom:1px solid var(--hairline); }
.process-index{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold); opacity:.55; }
.process-item h3{ font-size:1.35rem; }
.process-item p{ color:var(--muted); }

/* ============ STATS BAND ============ */
.stats-band{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-block{ padding:3.2rem 2rem; text-align:center; border-left:1px solid var(--hairline); }
.stat-block:first-child{ border-left:none; }
.stat-block b{ display:block; font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); color:var(--gold); }
.stat-block span{ display:block; margin-top:.4rem; color:var(--muted); font-size:.85rem; }

/* ============ CASE STUDIES ============ */
.case-scroll{ display:grid; grid-template-columns:repeat(3, minmax(300px,1fr)); gap:1.6rem; }
.case-card{
  border:1px solid var(--hairline); background:var(--panel); padding:2rem;
  display:flex; flex-direction:column; gap:1.3rem; transition:transform .4s var(--ease), border-color .4s;
}
.case-card:hover{ transform:translateY(-6px); border-color:var(--gold-line); }
.case-tag{ font-size:.76rem; color:var(--gold); }
.case-metric{ font-family:var(--font-display); font-size:2.3rem; }
.case-desc{ color:var(--muted); font-size:.92rem; }
.case-client{ display:flex; justify-content:space-between; align-items:center; padding-top:1.2rem; border-top:1px solid var(--hairline); font-size:.85rem; color:var(--muted); }

/* ============ TESTIMONIALS (auto-scrolling card marquee) ============ */
.author-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--gold-soft); border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--gold);
  flex-shrink:0;
}
.author-name{ font-weight:600; font-size:.88rem; }
.author-role{ font-size:.78rem; color:var(--muted); }

/* Edge fade so cards feel like they're flowing through a window, not
   stopping abruptly at the container's boundary. */
.testimonial-marquee{
  overflow:hidden; margin-top:1rem; overflow-anchor:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.testimonial-marquee-track{
  display:flex; width:max-content; overflow-anchor:none;
  animation:testimonial-scroll 25s linear infinite;
}
.testimonial-marquee-track-reverse{ animation-direction:reverse; }
.testimonial-marquee:hover .testimonial-marquee-track{ animation-play-state:paused; }
.testimonial-marquee-track:focus-within{ animation-play-state:paused; }
@keyframes testimonial-scroll{
  from{ transform:translateX(0); }
  /* Distance is set precisely in px by JS (--marquee-distance), based on
     actually measuring one real set's width and how many clones exist —
     this makes the loop correct on any screen width, including ultra-wide
     monitors where two copies of the content can be narrower than the
     viewport itself (a real bug: fixed -50% assumes exactly 2 copies are
     always enough, which silently breaks once the screen is wider than
     that). The -50% is only a fallback for the instant before JS runs. */
  to{ transform:translateX(var(--marquee-distance, -50%)); }
}

/* Spacing lives on each card (not the track's flex `gap`) so every card —
   including the one at the set boundary — contributes an identical-width
   chunk. That makes the duplicated set exactly half the track's total
   width, so translateX(-50%) lines up pixel-perfectly with zero jump. */
.testimonial-card{
  flex:0 0 420px; margin-right:1.5rem; background:var(--panel-raised); border:1px solid var(--hairline); border-radius:14px;
  padding:1.6rem 1.8rem; display:flex; flex-direction:column;
}
.testimonial-stars{ color:var(--gold); letter-spacing:.15em; font-size:.85rem; margin-bottom:.5rem; }
.testimonial-quote-icon{ color:var(--gold-line); margin-bottom:.3rem; width:22px; height:17px; }
.testimonial-card-text{
  flex:1; color:var(--ivory); font-size:.92rem; line-height:1.55; font-style:italic;
}
.testimonial-card-footer{
  display:flex; align-items:center; gap:.8rem; margin-top:1rem; padding-top:1rem;
  border-top:1px solid var(--hairline);
}

/* ============ FAQ ============ */
.faq-list{ max-width:820px; }
.faq-item{ border-top:1px solid var(--hairline); }
.faq-item:last-child{ border-bottom:1px solid var(--hairline); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.7rem 0; background:none; border:none; text-align:left;
  font-family:var(--font-display); font-size:1.15rem; color:var(--ivory);
}
.faq-question:hover{ color:var(--gold); }
.faq-icon{ flex-shrink:0; color:var(--gold); transition:transform .35s var(--ease); }
.faq-item.is-open .faq-icon{ transform:rotate(45deg); }
.faq-item.is-open .faq-question{ color:var(--gold); }

/* Height animation without measuring pixels: grid-template-rows 0fr -> 1fr
   animates smoothly because the inner wrapper's overflow is clipped. */
.faq-answer-wrap{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease);
}
.faq-item.is-open .faq-answer-wrap{ grid-template-rows:1fr; }
.faq-answer-inner{ overflow:hidden; }
.faq-answer{ padding-bottom:1.8rem; max-width:65ch; color:var(--muted); }

/* ============ CTA BAND ============ */
.cta-band{
  position:relative; padding:6rem 0; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, var(--black), #050403 60%, var(--black));
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 50% 0%, rgba(201,168,76,0.14), transparent 65%);
}
.cta-band h2{ position:relative; font-size:clamp(2.1rem,4vw,3.3rem); max-width:20ch; margin:0 auto 1.5rem; }
.cta-band p{ position:relative; color:var(--muted); max-width:42ch; margin:0 auto 2.4rem; }
.cta-band .btn{ position:relative; }

/* ============ FOOTER ============ */
.site-footer{ border-top:1px solid var(--hairline); background:var(--black); padding-top:5rem; }
.footer-top{
  max-width:var(--container); margin:0 auto; padding:0 1.5rem 4rem;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:3rem;
}
.footer-tag{ color:var(--muted); font-size:.9rem; margin:1.2rem 0 1.4rem; max-width:32ch; }
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width:34px; height:34px; border:1px solid var(--hairline); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--muted);
  transition:border-color .3s, color .3s;
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold); }
.footer-col h4{ font-family:var(--font-body); font-size:.82rem; color:var(--gold); font-weight:600; margin-bottom:1.2rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a, .footer-contact li{ font-size:.9rem; color:var(--muted); }
.footer-col a:hover{ color:var(--ivory); }
.footer-contact .btn{ margin-top:1.2rem; }
.footer-bottom{
  border-top:1px solid var(--hairline); padding:1.6rem 1.5rem; max-width:var(--container); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--muted);
}

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card.featured{ grid-column:span 2; grid-row:auto; }
  .case-scroll{ grid-template-columns:1fr 1fr; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .stat-block:nth-child(3){ border-left:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .related-services{ grid-template-columns:repeat(2,1fr); }
  .all-services-list{ grid-template-columns:repeat(2,1fr); }
  .benefit-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .process-item{ grid-template-columns:1fr; gap:.8rem; }
  .case-scroll{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:1fr 1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .section-head p{ max-width:none; }
  .testimonial-card{ flex-basis:300px; padding:1.8rem; }
  .services-hub-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .related-services{ grid-template-columns:1fr; }
  .all-services-list{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .contact-layout{ grid-template-columns:1fr; }
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; flex-direction:row; flex-wrap:wrap; margin-bottom:2rem; }
  .rights-grid{ grid-template-columns:1fr 1fr; }
  .contact-form-row{ grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr; }
  .proof-strip{ grid-template-columns:1fr; }
  .proof-stat{ border-left:none; border-top:1px solid var(--hairline); }
  .proof-stat:first-child{ border-top:none; }
}
@media (max-width: 560px){
  .services-grid{ grid-template-columns:1fr; }
  .service-card.featured{ grid-column:span 1; }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:4rem 0; }
  .testimonial-card{ flex-basis:82vw; }
}

/* Mobile nav open state */
/* backdrop-filter on .site-header.is-scrolled makes that header the
   containing block for any position:fixed descendant (same effect as
   transform/filter) — so once the page had been scrolled, the "full
   screen" mobile menu below was getting trapped inside the header's own
   small box instead of covering the viewport, letting page content behind
   it show through. Stripping the filter while the menu is open removes
   that containing block so inset:0 is computed against the real viewport. */
body.nav-open .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; }
body.nav-open .main-nav{
  display:block; position:fixed; inset:0; top:0; background:var(--black);
  padding:7rem 2rem 2rem; z-index:150; overflow-y:auto;
}
body.nav-open .main-nav > ul{ flex-direction:column; align-items:flex-start; gap:1.6rem; width:100%; }
body.nav-open .main-nav a{ font-size:1.4rem; font-family:var(--font-display); }
body.nav-open .main-nav li.has-mega{ width:100%; }
body.nav-open .mobile-mega-head{ width:100%; justify-content:space-between; }

/* On mobile the mega-panel becomes an inline collapsible accordion (tap the
   chevron to expand) instead of the desktop hover flyout — it can't rely on
   :hover on a touch device, and hiding it entirely (as before) meant mobile
   visitors had no way to see the 10 services short of leaving to the /services/
   hub page first. */
body.nav-open .main-nav li.has-mega:hover .mega-panel,
body.nav-open .mega-panel{
  position:static; width:100%; transform:none; opacity:1; visibility:visible;
  background:none; border:none; box-shadow:none; padding:0;
  max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
}
body.nav-open li.has-mega.mobile-mega-open:hover .mega-panel,
body.nav-open li.has-mega.mobile-mega-open .mega-panel{ max-height:1400px; }
body.nav-open .mega-panel-inner{
  display:flex; flex-direction:column; width:100%; gap:0; padding-top:1rem;
}
body.nav-open .mega-panel-inner a{ padding:.85rem 0; border-bottom:1px solid var(--hairline); border-radius:0; }
body.nav-open .mega-panel-inner a:hover{ background:none; }
body.nav-open .mega-panel-inner a span{ font-size:1.05rem; }

body.nav-open .mega-toggle{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.nav-open .mega-toggle svg{ transition:transform .3s var(--ease); }
body.nav-open .mega-toggle.is-open svg{ transform:rotate(180deg); }

body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }