/* ==========================================
   site.css — MediaTrend 2026
   Design tokens + reusable component classes
   Mobile-first. No page-specific content.
   ========================================== */

/* ---- RESET & BASE ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased}
img,picture,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit;border:none;background:transparent}
button{cursor:pointer}
fieldset{border:none}

/* ---- DESIGN TOKENS ---- */
:root{
  /* Palette */
  --color-bg:#f4f2ec;
  --color-bg-alt:#0a0a0a;
  --color-text:#0a0a0a;
  --color-text-inverse:#f4f2ec;
  --color-accent:#E63946;
  --color-accent-hover:#c52d39;
  --color-border:rgba(10,10,10,0.12);
  --color-border-light:rgba(10,10,10,0.05);
  --color-overlay:rgba(10,10,10,0.55);
  --color-glass-bg:rgba(244,242,236,0.12);
  --color-glass-border:rgba(244,242,236,0.20);

  /* Type */
  --font-family:'Inter',system-ui,-apple-system,sans-serif;
  --font-size-body:clamp(1rem,1.2vw,1.125rem);
  --font-size-small:clamp(0.75rem,0.8vw,0.875rem);
  --font-size-h1:clamp(2.5rem,8vw,5.5rem);
  --font-size-h2:clamp(2rem,5vw,3.5rem);
  --font-size-h3:clamp(1.25rem,2.5vw,1.75rem);
  --font-size-h4:clamp(1rem,1.8vw,1.35rem);
  --font-size-eyebrow:clamp(0.7rem,0.7vw,0.8rem);
  --font-weight-light:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --tracking-tight:-0.035em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --leading-tight:0.95;
  --leading-normal:1.3;
  --leading-relaxed:1.6;

  /* Spacing */
  --space-unit:1rem;
  --section-padding:clamp(4rem,10vw,8rem);
  --container-max:1200px;
  --container-narrow:900px;
  --gap-sm:clamp(0.75rem,1.5vw,1.5rem);
  --gap-md:clamp(1.5rem,3vw,3rem);
  --gap-lg:clamp(3rem,6vw,6rem);
  --gap-xl:clamp(4rem,8vw,8rem);

  /* Grid */
  --grid-cols:12;
  --grid-gap:var(--gap-md);

  /* Borders */
  --border-hairline:1px solid var(--color-border);
  --border-hairline-light:1px solid var(--color-border-light);

  /* Motion */
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --duration-fast: 0.3s;
  --duration-med: 0.6s;
  --duration-slow: 0.9s;
}

/* ---- CONTAINER ---- */
.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--gap-md);padding-right:var(--gap-md)}
.container.narrow{max-width:var(--container-narrow)}

/* ---- SECTION ---- */
.section{padding-top:var(--section-padding);padding-bottom:var(--section-padding);position:relative}
.section.bg-alt{background-color:var(--color-bg-alt);color:var(--color-text-inverse)}
.section.bg-alt .hairline{border-color:rgba(244,242,236,0.2)}
.section.bg-gradient{
  background: linear-gradient(135deg, #f4f2ec 0%, #e8e4da 50%, #ddd8ce 100%);
}
.section.bg-gradient-alt{
  background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 40%, #0f0f0f 100%);
  color:var(--color-text-inverse);
}
.section.bg-gradient-alt .hairline{border-color:rgba(244,242,236,0.15)}

/* ---- FULL-BLEED IMAGE BAND ---- */
.media-bg{
  position:relative;
  width:100%;
  min-height:clamp(320px,50vw,600px);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.media-bg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(0.8) brightness(0.45);
}
.media-bg .overlay{
  position:relative;z-index:2;
  width:100%;
  padding:var(--gap-lg) var(--gap-md);
  color:var(--color-text-inverse);
}
.media-bg .overlay > *{max-width:680px}

/* ---- HAIRLINE ---- */
.hairline{border-top:var(--border-hairline);margin:0}
.hairline.light{border-color:var(--color-border-light)}

/* ---- EYEBROW ---- */
.eyebrow{
  display:inline-block;
  font-size:var(--font-size-eyebrow);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--gap-sm);
}

/* ---- HEADINGS ---- */
.h1{
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  margin-bottom:var(--gap-md);
}
.h2{
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  margin-bottom:var(--gap-sm);
}
.h3{
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  margin-bottom:var(--gap-sm);
}
.h4{
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-normal);
  margin-bottom:var(--gap-sm);
}
.body-text{
  font-size:var(--font-size-body);
  line-height:var(--leading-relaxed);
  max-width:65ch;
  color:inherit;
  opacity:0.85;
}
.body-text + .body-text{margin-top:1em}

/* ---- BUTTON ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.85em 2.2em;
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-normal);
  border:var(--border-hairline);
  transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  min-height:48px;min-width:48px;
  text-align:center;
  background:transparent;color:var(--color-text);
}
.btn:hover{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.btn.btn-accent{
  background:var(--color-accent);color:#fff;
  border-color:var(--color-accent);
}
.btn.btn-accent:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.btn.btn-outline-light{
  border-color:rgba(244,242,236,0.4);color:var(--color-text-inverse);
}
.btn.btn-outline-light:hover{background:var(--color-text-inverse);color:var(--color-text);border-color:var(--color-text-inverse)}
.bg-alt .btn{color:var(--color-text-inverse);border-color:rgba(244,242,236,0.3)}
.bg-alt .btn:hover{background:var(--color-text-inverse);color:var(--color-text);border-color:var(--color-text-inverse)}

/* ---- GRID (mobile-first: 1 column) ---- */
.grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gap);align-items:start}
.grid.gap-lg{gap:var(--gap-lg)}
.grid.gap-sm{gap:var(--gap-sm)}
.grid.no-gap{gap:0}

/* ---- MEDIA / FIGURE ---- */
.fig{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--color-border-light);
}
.fig.landscape{aspect-ratio:16/9}
.fig.portrait{aspect-ratio:3/4}
.fig.square{aspect-ratio:1/1}
.fig img.media{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:filter var(--duration-med) var(--ease-out), transform var(--duration-med) var(--ease-out);
}
.fig.grayscale img.media{filter:grayscale(1) brightness(0.9)}
.fig figcaption{
  position:absolute;bottom:0;left:0;right:0;
  padding:var(--gap-sm) var(--gap-md) var(--gap-sm);
  background:linear-gradient(transparent,rgba(10,10,10,0.6));
  color:var(--color-text-inverse);
  font-size:var(--font-size-small);
  letter-spacing:var(--tracking-wide);
  line-height:1.3;
}

/* ---- GLASS CARD ---- */
.glass-card{
  background:var(--color-glass-bg);
  backdrop-filter:blur(24px) saturate(1.1);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);
  border:var(--border-hairline);
  border-color:var(--color-glass-border);
  padding:var(--gap-md);
  width:100%;
  max-width:520px;
}
.glass-card .h2,.glass-card .h3,.glass-card .body-text{color:var(--color-text-inverse)}

/* ---- LADDER (typographic index) ---- */
.ladder{width:100%}
.ladder .ladder-row{
  display:grid;
  grid-template-columns:1fr;
  gap:0.25em var(--gap-md);
  padding:var(--gap-sm) 0;
  border-bottom:var(--border-hairline-light);
  align-items:baseline;
}
.ladder .ladder-row:first-child{border-top:var(--border-hairline-light)}
.ladder .ladder-num{
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-light);
  letter-spacing:var(--tracking-tight);
  color:var(--color-accent);
  line-height:1;
}
.ladder .ladder-label{
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
}
.ladder .ladder-desc{
  font-size:var(--font-size-body);
  line-height:var(--leading-relaxed);
  opacity:0.75;
  max-width:60ch;
}

/* ---- COUNTER ---- */
.counter-wrap{display:inline-flex;align-items:baseline;gap:0.1em}
.counter{
  font-size:var(--font-size-h1);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
}
.counter-suffix{
  font-size:var(--font-size-h3);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-tight);
  color:var(--color-accent);
}

/* ---- STATS GRID (for count-up sections) ---- */
.stat-item{text-align:left}
.stat-item .counter-label{
  display:block;
  font-size:var(--font-size-body);
  line-height:var(--leading-relaxed);
  opacity:0.8;
  margin-top:0.25em;
}

/* ---- PARALLAX ---- */
.parallax{will-change:transform}

/* ---- REVEAL (no-JS fallback: visible by default) ---- */
.reveal{opacity:1;transform:none;transition:opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out)}
.reveal.is-hidden{opacity:0;transform:translateY(40px)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal.is-hidden.is-visible{opacity:1;transform:translateY(0)}

/* ---- STAGGER children ---- */
.stagger > *{transition:opacity var(--duration-med) var(--ease-out), transform var(--duration-med) var(--ease-out)}
.stagger.is-hidden > *{opacity:0;transform:translateY(20px)}
.stagger.is-visible > *{opacity:1;transform:translateY(0)}

/* ---- NAV ---- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--color-bg);
  border-bottom:var(--border-hairline-light);
  padding:0 var(--gap-md);
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.site-nav .nav-logo{
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-tight);
  color:var(--color-text);
}
.site-nav .nav-links{display:none;gap:var(--gap-lg)}
.site-nav .nav-links a{
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--color-text);
  opacity:0.7;
  transition:opacity var(--duration-fast) var(--ease-out);
  padding:0.5em 0;
}
.site-nav .nav-links a:hover,.site-nav .nav-links a.active{opacity:1}
.site-nav .nav-links a.active{border-bottom:2px solid var(--color-accent)}
.nav-toggle{
  display:flex;flex-direction:column;gap:5px;
  padding:12px 8px;
  background:transparent;border:none;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;width:24px;height:2px;
  background:var(--color-text);
  transition:transform var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast) var(--ease-in-out);
}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Nav drawer (mobile) */
.nav-drawer{
  position:fixed;top:64px;left:0;right:0;bottom:0;
  background:var(--color-bg);
  z-index:999;
  display:flex;flex-direction:column;
  padding:var(--gap-md);
  transform:translateY(-110%);
  transition:transform var(--duration-med) var(--ease-out);
  border-bottom:var(--border-hairline);
}
.nav-drawer.open{transform:translateY(0)}
.nav-drawer a{
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-tight);
  padding:var(--gap-sm) 0;
  border-bottom:var(--border-hairline-light);
  color:var(--color-text);
}
.nav-drawer a.active{color:var(--color-accent);font-weight:var(--font-weight-semibold)}
.nav-drawer a:last-child{border-bottom:none}

/* ---- FOOTER ---- */
.site-footer{
  background:var(--color-bg-alt);
  color:var(--color-text-inverse);
  padding:var(--gap-lg) var(--gap-md);
  border-top:var(--border-hairline);
  border-color:rgba(244,242,236,0.1);
}
.site-footer .footer-grid{
  display:grid;grid-template-columns:1fr;gap:var(--gap-md);
}
.site-footer a{opacity:0.7;transition:opacity var(--duration-fast) var(--ease-out)}
.site-footer a:hover{opacity:1}

/* ---- LEAD FORM ---- */
.lead-form{width:100%}
.lead-form .form-group{margin-bottom:var(--gap-md)}
.lead-form label{
  display:block;
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  margin-bottom:0.35em;
  opacity:0.8;
}
.lead-form input,.lead-form textarea,.lead-form select{
  width:100%;
  padding:0.85em 1em;
  border:var(--border-hairline);
  background:transparent;
  font-size:var(--font-size-body);
  transition:border-color var(--duration-fast) var(--ease-out);
  min-height:48px;
}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:none;border-color:var(--color-accent)}
.lead-form textarea{resize:vertical;min-height:140px}
.lead-form .form-error{color:var(--color-accent);font-size:var(--font-size-small);margin-top:0.25em;display:none}
.lead-form .form-error.show{display:block}
.lead-form .form-success{display:none;padding:var(--gap-md);border:var(--border-hairline);text-align:center}
.lead-form .form-success.show{display:block}
.bg-alt .lead-form input,.bg-alt .lead-form textarea{border-color:rgba(244,242,236,0.3);color:var(--color-text-inverse)}
.bg-alt .lead-form input:focus,.bg-alt .lead-form textarea:focus{border-color:var(--color-accent)}

/* ---- FAQ ---- */
.faq-item{border-bottom:var(--border-hairline-light)}
.faq-item .faq-q{
  width:100%;text-align:left;
  padding:var(--gap-sm) 0;
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-tight);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--gap-sm);
  min-height:48px;
}
.faq-item .faq-q::after{
  content:'+';font-size:var(--font-size-h4);font-weight:var(--font-weight-light);
  color:var(--color-accent);transition:transform var(--duration-fast) var(--ease-out);
  flex-shrink:0;
}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-item .faq-a{
  overflow:hidden;max-height:0;transition:max-height var(--duration-med) var(--ease-out);
  padding:0 0 0 var(--gap-sm);
}
.faq-item.open .faq-a{max-height:300px;padding-bottom:var(--gap-sm)}
.faq-item .faq-a p{font-size:var(--font-size-body);line-height:var(--leading-relaxed);opacity:0.8}

/* ---- HERO ---- */
.hero-stacked{
  position:relative;
  width:100%;
  min-height:90vh;
  overflow:hidden;
  display:flex;align-items:flex-end;
  margin-top:64px;
}
.hero-stacked .hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.hero-stacked .hero-bg img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(0.6) brightness(0.5);
}
.hero-stacked .hero-content{
  position:relative;z-index:2;
  width:100%;
  padding:var(--gap-lg) var(--gap-md);
  display:flex;justify-content:flex-start;
}
.hero-stacked .glass-card{max-width:540px;width:100%}

/* Hero smaller for inner pages */
.hero-small{
  margin-top:64px;
  padding:var(--gap-lg) var(--gap-md);
  background:var(--color-bg-alt);
  color:var(--color-text-inverse);
  border-bottom:var(--border-hairline);
  border-color:rgba(244,242,236,0.1);
}

/* ---- MEDIA QUERIES ---- */

/* Tablet (>=768px) */
@media(min-width:768px){
  :root{--grid-gap:var(--gap-lg)}
  
  /* Grid multi-column */
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
  .grid.cols-12{grid-template-columns:repeat(12,1fr)}
  .grid.cols-auto{grid-template-columns:auto}
  
  /* Span helpers for 12-col grid */
  .col-span-2{grid-column:span 2}
  .col-span-3{grid-column:span 3}
  .col-span-4{grid-column:span 4}
  .col-span-5{grid-column:span 5}
  .col-span-6{grid-column:span 6}
  .col-span-7{grid-column:span 7}
  .col-span-8{grid-column:span 8}
  .col-span-9{grid-column:span 9}
  .col-span-10{grid-column:span 10}
  .col-span-11{grid-column:span 11}
  .col-span-12{grid-column:span 12}
  .col-start-2{grid-column-start:2}
  .col-start-3{grid-column-start:3}
  .col-start-4{grid-column-start:4}
  .col-start-5{grid-column-start:5}
  .col-start-6{grid-column-start:6}
  .col-start-7{grid-column-start:7}
  .col-start-8{grid-column-start:8}
  .col-start-9{grid-column-start:9}
  .col-start-10{grid-column-start:10}
  .col-start-11{grid-column-start:11}

  /* Ladder multi-column */
  .ladder .ladder-row{
    grid-template-columns: 3rem 1fr 2fr;
  }
  
  /* Nav desktop */
  .site-nav .nav-links{display:flex}
  .nav-toggle{display:none}
  .nav-drawer{display:none!important}

  .stat-item{text-align:center}

  /* Footer multi-column */
  .site-footer .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
}

/* Desktop (>=1024px) */
@media(min-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
  .grid.cols-12{grid-template-columns:repeat(12,1fr)}
  
  .hero-stacked .hero-content{padding:var(--gap-xl) var(--gap-md)}
  .hero-stacked .glass-card{padding:var(--gap-lg)}
  
  .ladder .ladder-row{grid-template-columns:4rem 1.2fr 2fr}
  
  .media-bg{min-height:clamp(400px,45vw,650px)}
}

/* Large desktop (>=1440px) */
@media(min-width:1440px){
  .container{max-width:1280px}
  :root{--section-padding:clamp(6rem,8vw,10rem)}
}

/* ---- MOTION PREFERENCE ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .reveal.is-hidden{opacity:1!important;transform:none!important}
  .stagger > *{opacity:1!important;transform:none!important}
  .parallax{transform:none!important;will-change:auto}
}