/* ==========================================================================
   R2 Recycling — Homepage v3
   1) Tokens  2) Base  3) Shared components  4) Sections (page order)  5) Motion  6) Responsive
   Naming: .block__element, .block--modifier, state classes = .is-*
   ========================================================================== */

/* 1) TOKENS --------------------------------------------------------------- */
:root {
  --green: #4D873F;
  --green-dark: #3D6F35;
  --green-deep: #24401F;      /* tonal dark green for placeholders / overlays */
  --green-light: #A5D295;     /* accents on dark backgrounds */
  --black: #0F110F;
  --ink: #161816;
  --body: #5C605B;
  --muted: #8A8E89;
  --line: #E3E5E1;
  --bg-light: #F3F4F1;
  --white: #FFFFFF;

  --font-display: 'Instrument Sans', Arial, sans-serif;  /* headings, nav, buttons */
  --font-body: 'DM Sans', Arial, sans-serif;             /* paragraphs */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* labels, numbers, data */

  --radius: 3px;
  --container: 1280px;
  --gutter: 48px;
  --section-y: 140px;
  --ease: cubic-bezier(.2,.7,.1,1);
}

/* 2) BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
a { color: var(--green); text-decoration: none; transition: color .25s, background .25s, border-color .25s; }
a:hover { color: var(--green-dark); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; }
::selection { background: var(--green); color: var(--white); }

/* 3) SHARED COMPONENTS ---------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--light { background: var(--bg-light); }
.section--dark { background: var(--black); color: var(--white); }

.h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; }
.lead { font-size: 17px; line-height: 1.7; color: var(--body); }

.section-head { margin-bottom: 72px; }
.section-head--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-head--center .lead { margin-top: 22px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* Buttons — arrow slides on hover */
.btn { display: inline-flex; align-items: center; gap: 14px; font: 600 14px var(--font-display); letter-spacing: .01em; padding: 18px 26px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--green-dark); color: var(--white); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--green); color: var(--white); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--black); color: var(--white); }
.btn--ghost-light { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn--ghost-light:hover { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn--sm { padding: 13px 20px; font-size: 13px; }

.text-link { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--font-display); color: var(--ink); padding-bottom: 6px; border-bottom: 1.5px solid currentColor; }
.text-link:hover { color: var(--green); }

/* Media — every image sits in one of these. Striped placeholder + mono label until an <img> exists. */
.media { position: relative; overflow: hidden; background: #DCE0D9 repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 12px, transparent 12px 24px); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media[data-label]:not(:has(img))::after { content: attr(data-label); position: absolute; left: 16px; bottom: 14px; right: 16px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(0,0,0,.42); }
.media--dark { background-color: var(--green-deep); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px); }
.media--dark[data-label]:not(:has(img))::after { color: rgba(255,255,255,.4); }

/* Logo (swap for the real SVG) */
.logo { display: flex; align-items: center; gap: 12px; color: inherit; }
.logo:hover { color: inherit; }
.logo__shield { width: 32px; height: 38px; background: var(--green); border-radius: 3px 3px 16px 16px; display: flex; align-items: center; justify-content: center; font: 700 14px var(--font-display); color: var(--black); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font: 700 20px var(--font-display); letter-spacing: -0.03em; }
.logo__tag { font: 500 8px var(--font-mono); letter-spacing: .2em; margin-top: 5px; opacity: .7; }


/* Yoast breadcrumbs */
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; line-height:1.5; color:var(--muted); margin-bottom:36px; }
.breadcrumb a { color:inherit; }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb .breadcrumb_last { color:currentColor; }
.page-hero .breadcrumb { color:rgba(255,255,255,.62); }
.page-hero .breadcrumb a:hover { color:var(--white); }

/* 4) SECTIONS ------------------------------------------------------------- */

/* HEADER — fixed; transparent over hero, turns solid after scrolling (.is-scrolled via JS) */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--white); transition: background .4s, color .4s, box-shadow .4s, padding .4s; padding: 26px 0; }
.site-header .container { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.is-scrolled { background: var(--white); color: var(--ink); padding: 14px 0; box-shadow: 0 1px 0 var(--line); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.site-header__phone { font: 500 13px var(--font-mono); color: inherit; margin-right: 16px; letter-spacing: .02em; }
.site-header__phone:hover { color: var(--green-light); }
.site-header.is-scrolled .site-header__phone:hover { color: var(--green); }
.menu-btn { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 20px; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--radius); background: none; color: inherit; cursor: pointer; font: 600 13px var(--font-display); }
.menu-btn:hover { border-color: currentColor; }
.site-header.is-scrolled .menu-btn { border-color: var(--line); }
.site-header.is-scrolled .menu-btn:hover { border-color: var(--ink); }
/* PRIMARY NAV — inline links on desktop; tablet/mobile keep the drawer. */
.site-nav { margin-right: 20px; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.site-nav__list a { position: relative; display: block; padding: 8px 0; color: inherit; font: 500 14px var(--font-display); letter-spacing: -0.005em; white-space: nowrap; }
.site-nav__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.site-nav__list a:hover { color: inherit; }
.site-nav__list a:hover::after, .site-nav__list a[aria-current]::after, .site-nav__list .current-menu-item > a::after, .site-nav__list .current_page_item > a::after, .site-nav__list .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }

/* Desktop dropdowns — native WordPress child menu items. */
.site-nav__list > li { position: relative; }
.site-nav__list > .menu-item-has-children > a { padding-right: 18px; }
.site-nav__list > .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.site-nav__list > .menu-item-has-children:hover > a::before,
.site-nav__list > .menu-item-has-children:focus-within > a::before {
  transform: translateY(-25%) rotate(225deg);
}
.site-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 80;
  min-width: 270px;
  margin: 0;
  padding: 12px;
  list-style: none;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 45px rgba(15,17,15,.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .3s var(--ease), visibility .2s;
}
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.site-nav__list .sub-menu li { margin: 0; padding: 0; }
.site-nav__list .sub-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 2px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}
.site-nav__list .sub-menu a::after { display: none; }
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus,
.site-nav__list .sub-menu .current-menu-item > a {
  background: var(--bg-light);
  color: var(--green-dark);
}
.site-header__phone { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.3); }
.site-header.is-scrolled .site-header__phone, .site-header--solid .site-header__phone { border-left-color: var(--line); }
.site-header .menu-btn { display: none; }
@media (max-width: 1200px) {
  .site-nav { display: none; }
  .site-header .menu-btn { display: flex; }
  .site-header__phone { padding-left: 0; border-left: 0; }
}
.burger { display: grid; gap: 5px; width: 18px; }
.burger span { height: 1.5px; background: currentColor; }

/* DRAWER MENU — slides in from the right */
.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(8,12,8,.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(500px, 100%); background: var(--black); color: var(--white); display: flex; flex-direction: column; padding: 30px 48px 40px; transform: translateX(100%); transition: transform .6s var(--ease); overflow-y: auto; }
.drawer.is-open { transform: none; }
body.is-locked { overflow: hidden; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 64px; }
.drawer__close { position: relative; width: 50px; height: 50px; border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius); background: none; cursor: pointer; transition: border-color .25s, transform .4s var(--ease); }
.drawer__close:hover { border-color: var(--white); transform: rotate(90deg); }
.drawer__close span { position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; background: var(--white); }
.drawer__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.drawer__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.drawer__label { font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__item { border-bottom: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translateX(28px); transition: opacity .45s ease, transform .6s var(--ease); }
.drawer.is-open .drawer__item { opacity: 1; transform: none; }
.drawer.is-open .drawer__item:nth-child(1) { transition-delay: .14s; }
.drawer.is-open .drawer__item:nth-child(2) { transition-delay: .19s; }
.drawer.is-open .drawer__item:nth-child(3) { transition-delay: .24s; }
.drawer.is-open .drawer__item:nth-child(4) { transition-delay: .29s; }
.drawer.is-open .drawer__item:nth-child(5) { transition-delay: .34s; }
.drawer__link { width: 100%; display: flex; align-items: baseline; gap: 18px; padding: 18px 0; background: none; border: 0; cursor: pointer; color: var(--white); font: 500 30px var(--font-display); letter-spacing: -0.03em; text-align: left; }
.drawer__link:hover { color: var(--green-light); }
.drawer__plus { margin-left: auto; position: relative; width: 14px; height: 14px; align-self: center; }
.drawer__plus::before, .drawer__plus::after { content: ''; position: absolute; top: 50%; left: 0; width: 14px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.drawer__plus::after { transform: rotate(90deg); }
.drawer__item.is-open .drawer__plus::after { transform: rotate(0); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.drawer__item.is-open .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub ul { overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.drawer__item.is-open .drawer__sub ul { padding-bottom: 24px; }
.drawer__sub a { color: #B9BDB8; font-size: 14px; }
.drawer__sub a:hover { color: var(--white); }
.drawer__foot { margin-top: auto; padding-top: 56px; display: grid; gap: 28px; }
.drawer__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.drawer__contact a, .drawer__contact span { color: var(--white); font-size: 14px; }
.drawer__social { display: flex; gap: 24px; font: 500 12px var(--font-mono); letter-spacing: .05em; }
.drawer__social a { color: var(--muted); }
.drawer__social a:hover { color: var(--white); }

/* HERO — crossfading slides; each slide owns its image + text. Progress tabs drive autoplay. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 720px; max-height: 960px; background: var(--black); color: var(--white); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; z-index: 1; }
.hero__slide .media { position: absolute; inset: 0; transform: scale(1.12); transition: transform 9s linear; }
.hero__slide.is-active .media { transform: scale(1); }
.hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(8,12,8,.55) 0%, rgba(8,12,8,.1) 30%, rgba(8,12,8,.2) 55%, rgba(8,12,8,.85) 100%); }
.hero__content { position: absolute; z-index: 3; left: 0; right: 0; bottom: 170px; }
.hero__title { font-size: clamp(48px, 7.4vw, 112px); line-height: .94; letter-spacing: -0.045em; font-weight: 600; max-width: 13ch; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.hero__slide.is-active .hero__title .line > span { transform: none; }
.hero__slide.is-active .hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.hero__slide.is-active .hero__title .line:nth-child(3) > span { transition-delay: .2s; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 36px; }
.hero__text { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 440px; opacity: 0; transform: translateY(16px); transition: opacity .8s ease .35s, transform .8s var(--ease) .35s; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; transform: translateY(16px); transition: opacity .8s ease .45s, transform .8s var(--ease) .45s; }
.hero__slide.is-active .hero__text, .hero__slide.is-active .hero__buttons { opacity: 1; transform: none; }

.hero__tabs { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255,255,255,.18); }
.hero__tabs .container { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.hero__tab { position: relative; text-align: left; background: none; border: 0; color: rgba(255,255,255,.5); cursor: pointer; padding: 26px 24px 30px 0; display: grid; gap: 6px; transition: color .3s; }
.hero__tab:hover, .hero__tab.is-active { color: var(--white); }
.hero__tab-title { font: 500 15px var(--font-display); }
.hero__tab-bar { position: absolute; top: -1px; left: 0; right: 24px; height: 2px; }
.hero__tab-bar::after { content: ''; position: absolute; inset: 0; background: var(--green-light); transform: scaleX(0); transform-origin: left; }
.hero__tab.is-active .hero__tab-bar::after { animation: tabFill var(--hero-delay, 7s) linear forwards; }
.hero.is-static .hero__tab.is-active .hero__tab-bar::after { animation: none; transform: scaleX(1); }
@keyframes tabFill { to { transform: scaleX(1); } }

/* INTRO — oversized statement, staggered images, count-up stats */
.intro__statement { font: 500 clamp(28px, 3.3vw, 48px)/1.2 var(--font-display); letter-spacing: -0.03em; max-width: 1080px; margin-bottom: 110px; }
.intro__statement .muted { color: #A9ADA8; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 96px; align-items: start; }
.intro__images { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.intro__images .media:nth-child(1) { aspect-ratio: 4 / 5; }
.intro__images .media:nth-child(2) { aspect-ratio: 3 / 4; margin-top: 140px; }
.intro__copy { padding-top: 40px; }
.intro__copy .lead + .lead { margin-top: 18px; }
.intro__copy .btn { margin-top: 40px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 72px; border-top: 1px solid var(--line); }
.stat { padding: 28px 16px 0 0; min-width: 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat__value { font: 600 clamp(30px, 2.6vw, 42px)/1 var(--font-display); white-space: nowrap; letter-spacing: -0.04em; color: var(--ink); }
.stat__value em { font-style: normal; color: inherit; }
.stat__label { font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* SERVICES SLIDER — 3 / 2 / 1 cards fill the container exactly */
.services__viewport { overflow: hidden; }
.services__track { display: flex; gap: 24px; transition: transform .8s var(--ease); }
.service-card { flex: 0 0 calc((100% - 48px) / 3); display: flex; flex-direction: column; background: var(--white); color: var(--ink); }
.service-card:hover { color: var(--ink); }
.service-card .media { aspect-ratio: 5 / 4; }
.service-card .media > * , .service-card .media::before { transition: transform 1s var(--ease); }
.service-card__body { padding: 28px 28px 30px; display: grid; gap: 12px; flex: 1; }
.service-card__title { font: 600 24px var(--font-display); letter-spacing: -0.03em; }
.service-card__text { font-size: 15px; line-height: 1.6; color: var(--body); }
.service-card__more { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); font: 600 13px var(--font-display); }
.service-card__arrow { width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s, color .3s, transform .4s var(--ease); }
.service-card:hover .service-card__arrow { background: var(--green); border-color: var(--green); color: var(--white); transform: rotate(-45deg); }
.service-card:hover .media img { transform: scale(1.05); }
.service-card .media img { transition: transform 1s var(--ease); }
.services__foot { margin-top: 48px; display: flex; align-items: center; gap: 24px; }
.services__progress { flex: 1; height: 2px; background: #D9DCD6; position: relative; }
.services__progress-bar { position: absolute; inset: 0 auto 0 0; background: var(--green); transition: width .8s var(--ease); }
.slider-btn { width: 54px; height: 54px; flex: none; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; font-size: 17px; transition: background .25s, color .25s, opacity .25s; }
.slider-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.slider-btn:disabled { opacity: .25; cursor: default; }

/* HOW IT WORKS — one static image for the full section */
.process__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 96px; align-items: start; }
.process__media { position: relative; aspect-ratio: 1 / 1; align-self: start; }
.process__media .media { position: absolute; inset: 0; }
.process .h2 { margin-bottom: 56px; }
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 30px 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.accordion__title { font: 500 clamp(22px, 2vw, 30px) var(--font-display); letter-spacing: -0.03em; transition: color .3s, transform .5s var(--ease); }
.accordion__trigger:hover .accordion__title { transform: translateX(6px); }
.accordion__icon { width: 42px; height: 42px; border: 1.5px solid var(--line); border-radius: 50%; position: relative; transition: background .3s, border-color .3s; }
.accordion__icon::before, .accordion__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .4s var(--ease), background .3s; }
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__item.is-open .accordion__title { color: var(--green); }
.accordion__item.is-open .accordion__icon { background: var(--green); border-color: var(--green); }
.accordion__item.is-open .accordion__icon::before, .accordion__item.is-open .accordion__icon::after { background: var(--white); }
.accordion__item.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(0); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; padding-left: 0; }
.accordion__inner > div { padding: 0 0 34px; display: grid; gap: 22px; }
.accordion__inner p { font-size: 16px; line-height: 1.7; color: var(--body); max-width: 480px; }
.accordion__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.accordion__points li { font: 500 12px var(--font-mono); letter-spacing: .02em; padding: 9px 12px; background: var(--bg-light); border-radius: var(--radius); }
.accordion__inner .text-link { justify-self: start; }

/* DATA DESTRUCTION — dark split */
.feature__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.feature__media { position: relative; aspect-ratio: 5 / 6; }
.feature .h2 { margin-bottom: 26px; }
.feature .lead { color: #B4B8B3; margin-bottom: 44px; max-width: 460px; }
.feature__list { list-style: none; margin: 0 0 48px; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.feature__list li { display: block; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.12); font: 500 18px var(--font-display); letter-spacing: -0.02em; }

/* MATERIALS — hover list with cursor-following preview */
.materials { position: relative; }
.materials__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.material-row { border-bottom: 1px solid var(--line); }
.material-row a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 56px; align-items: center; gap: 24px; padding: 40px 0; color: var(--ink); }
.material-row__title { font: 500 clamp(28px, 3.4vw, 50px)/1.05 var(--font-display); letter-spacing: -0.04em; transition: color .3s; }
.material-row__text { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 360px; }
.material-row__arrow { width: 54px; height: 54px; border: 1.5px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s, color .3s, transform .5s var(--ease); }
.material-row a:hover .material-row__title { color: var(--green); }
.material-row a:hover .material-row__arrow { background: var(--green); border-color: var(--green); color: var(--white); transform: rotate(-45deg); }

/* EVENTS — full-bleed image */
.events { position: relative; color: var(--white); background: var(--black); overflow: hidden; }
.events__bg { position: absolute; inset: -10% 0; }
.events__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,8,.9) 0%, rgba(8,12,8,.55) 55%, rgba(8,12,8,.3) 100%); }
.events__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; min-height: 720px; padding: var(--section-y) 0; }
.events .h2 { margin-bottom: 26px; }
.events .lead { color: rgba(255,255,255,.78); max-width: 440px; margin-bottom: 44px; }
.events__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.events__collage { position: relative; height: 520px; }
.events__collage .media:nth-child(1) { position: absolute; top: 0; right: 0; width: 72%; height: 66%; }
.events__collage .media:nth-child(2) { position: absolute; left: 0; bottom: 0; width: 54%; height: 52%; box-shadow: 0 30px 60px rgba(0,0,0,.45); }

/* TESTIMONIAL */

/* CONTACT — green info panel + form */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.contact__panel { background: var(--green); color: var(--white); padding: var(--section-y) 80px var(--section-y) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); display: flex; flex-direction: column; }
.contact__panel .h2 { margin-bottom: 24px; }
.contact__panel .lead { color: rgba(255,255,255,.88); max-width: 420px; }
.contact__phone { display: inline-block; margin: 56px 0 auto; font: 600 clamp(32px, 3.4vw, 52px) var(--font-display); letter-spacing: -0.04em; color: var(--white); }
.contact__phone:hover { color: var(--black); }
.contact__details { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.25); }
.contact__label { display: block; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.contact__value { font: 500 16px var(--font-display); color: var(--white); }
.contact__value:hover { color: var(--black); }
.contact__form-wrap { padding: var(--section-y) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--section-y) 80px; background: var(--white); }
.form { display: grid; gap: 22px; max-width: 620px; }
.form__title { font: 600 28px var(--font-display); letter-spacing: -0.03em; margin-bottom: 8px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form__field { display: grid; gap: 9px; }
.form__field span { font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--body); }
.form__field input, .form__field select, .form__field textarea { width: 100%; border: 1px solid #D5D8D3; background: var(--white); border-radius: var(--radius); padding: 16px 16px; font: 16px var(--font-body); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(77,135,63,.15); }
.form__field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form__field textarea { resize: vertical; min-height: 130px; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; }
.form__note { font-size: 13px; color: var(--muted); }

/* FOOTER — giant wordmark */
.site-footer { background: var(--black); color: #A3A7A2; padding-top: 110px; overflow: hidden; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 80px; }
.site-footer__brand .logo { color: var(--white); margin-bottom: 22px; }
.site-footer__brand p { font-size: 14px; line-height: 1.7; max-width: 300px; }
.site-footer__title { display: block; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin-bottom: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; }
.site-footer a { color: #A3A7A2; }
.site-footer a:hover { color: var(--white); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 1px solid #222522; font: 500 11px var(--font-mono); letter-spacing: .05em; color: #6E726D; }
.site-footer__bottom nav { display: flex; gap: 24px; }
.site-footer__bottom a { color: #6E726D; }
.site-footer__wordmark { font: 600 clamp(80px, 19vw, 300px)/0.78 var(--font-display); letter-spacing: -0.06em; color: #1B1E1B; white-space: nowrap; text-align: center; margin-bottom: -0.08em; user-select: none; }

/* 5) MOTION — scroll reveals (JS adds .is-in). Delay via style="--d:.1s" */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s ease var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) var(--d, 0s); }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .hero__title .line > span, .hero__text, .hero__buttons { transform: none; opacity: 1; }
}

/* 6) RESPONSIVE */
@media (max-width: 1080px) {
  :root { --gutter: 32px; --section-y: 100px; }
  .intro__grid, .process__grid, .feature__grid, .events__grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .events__grid { min-height: 0; }
  .intro__statement { margin-bottom: 72px; }
  .section-head { margin-bottom: 56px; }
  .process__media { position: relative; top: 0; aspect-ratio: 16 / 10; }
  .feature__media { aspect-ratio: 16 / 10; }
  .intro__images .media:nth-child(1) { aspect-ratio: 1 / 1; }
  .intro__images .media:nth-child(2) { aspect-ratio: 4 / 5; margin-top: 80px; }
  .service-card { flex-basis: calc((100% - 24px) / 2); }
  .contact { grid-template-columns: 1fr; }
  .contact__panel, .contact__form-wrap { padding: var(--section-y) var(--gutter); }
  .contact__phone { margin-bottom: 0; }
  .contact__details { margin-top: 48px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .material-row a { grid-template-columns: 1fr 54px; }
  .material-row__text { display: none; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; --section-y: 80px; }
  .site-header__phone { display: none; }
  .site-header .btn { display: none; }
  .site-header { padding: 16px 0; }
  .site-header.is-scrolled { padding: 10px 0; }
  .menu-btn { height: 44px; padding: 0 16px; }
  .hero { min-height: 640px; }
  .hero__content { bottom: 104px; }
  .hero__title { font-size: clamp(40px, 11vw, 56px); }
  .hero__row { margin-top: 24px; gap: 24px; }
  .hero__text { font-size: 16px; }
  .hero__buttons { width: 100%; }
  .hero__buttons .btn { flex: 1; justify-content: center; padding: 16px 18px; }
  .hero__tab { padding: 20px 12px 22px 0; }
  .hero__tab-bar { right: 12px; }
  .intro__statement { font-size: 26px; margin-bottom: 56px; }
  .intro__images { gap: 14px; }
  .intro__images .media:nth-child(2) { margin-top: 56px; }
  .intro__copy { padding-top: 0; }
  .stats { margin-top: 48px; }
  .service-card__body { padding: 22px 22px 24px; }
  .services__foot { gap: 14px; margin-top: 32px; }
  .slider-btn { width: 46px; height: 46px; }
  .accordion__trigger { grid-template-columns: 1fr auto; padding: 24px 0; }
  .accordion__inner { padding-left: 0; }
  .accordion__icon { width: 36px; height: 36px; }
  .feature__list li { font-size: 16px; }
  .material-row a { grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; padding: 28px 0; }
  .material-row__arrow { width: 40px; height: 40px; }
  .events__collage { height: 320px; }
  .events__grid { padding-left: 32px; padding-right: 32px; }
  .contact__phone { margin-top: 40px; }
  .form__submit .btn { width: 100%; justify-content: center; }
  .site-footer { padding-top: 80px; }
  .site-footer__top { gap: 36px; padding-bottom: 56px; }
  .hero__tabs .container { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hero__tab-title { display: none; }
  .service-card { flex-basis: 100%; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-bottom: 20px; }
  .form__row, .contact__details, .drawer__sub ul, .drawer__contact { grid-template-columns: 1fr; }
  .drawer { padding: 24px 20px 32px; }
  .site-footer__top { grid-template-columns: 1fr; }
}

/* WORDPRESS + SEMANTIC INTEGRATION --------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.03em; text-wrap:balance; }
.intro__statement,.service-card__title,.material-row__title,.form__title { display:block; margin-top:0; }
.service-card__title,.material-row__title { margin-bottom:0; }
.accordion__heading { display:block; margin:0; font:inherit; }
.admin-bar .site-header { top:32px; }
@media (max-width:782px){ .admin-bar .site-header { top:46px; } }
.logo__img { display:block; width:auto; height:52px; max-width:230px; object-fit:contain; transition:opacity .3s ease; }
.logo__adaptive { position:relative; display:block; width:max-content; }
.logo__adaptive .logo__img--color { display:none; }
.site-header.is-scrolled .logo__adaptive .logo__img--white, .site-header--solid .logo__adaptive .logo__img--white { display:none; }
.site-header.is-scrolled .logo__adaptive .logo__img--color, .site-header--solid .logo__adaptive .logo__img--color { display:block; }
.site-header--solid { background:var(--white); color:var(--ink); padding:14px 0; box-shadow:0 1px 0 var(--line); }
.site-header--solid .menu-btn { border-color:var(--line); }
.site-header--solid .site-header__phone:hover { color:var(--green); }
.r2-main--inner { padding-top:90px; }
.content-page { padding:90px 0 120px; }
.content-page .entry-title { font-size:clamp(42px,6vw,76px); line-height:1; margin-bottom:40px; }
.entry-content { max-width:850px; font-size:17px; line-height:1.75; color:var(--body); }
.entry-content > * + * { margin-top:1.35em; }
.entry-content h2,.entry-content h3 { color:var(--ink); margin-top:1.8em; }
.service-archive { padding:110px 0 130px; }
.service-archive__head { max-width:760px; margin-bottom:70px; }
.service-archive__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.service-archive__grid .service-card { min-width:0; flex-basis:auto; }
.r2-form-error { margin:0 0 18px; padding:14px 16px; border:1px solid #c94848; color:#9f2929; background:#fff4f4; border-radius:var(--radius); font-size:14px; }
.form-plugin-wrap .gform_wrapper,.form-plugin-wrap .wpforms-container,.form-plugin-wrap .wpcf7 { max-width:620px; }
.site-footer__bottom nav ul { list-style:none; margin:0; padding:0; display:flex; gap:24px; }
.site-footer__bottom nav li { margin:0; padding:0; }
@media (max-width:1080px){ .service-archive__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){ .logo__img{height:42px;max-width:180px;} .service-archive__grid{grid-template-columns:1fr;} .site-footer__bottom nav ul{flex-wrap:wrap;} }
.screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.screen-reader-text:focus { width:auto!important; height:auto!important; clip:auto!important; margin:0!important; top:8px; left:8px; z-index:999999; background:#fff; color:#111; padding:12px 16px!important; }

/* v3.5.6 — compact footer socials; horizontal, white, cache-safe sizing */
.site-footer__socials {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 0;
  height: auto;
  line-height: 1;
}
.site-footer__socials a {
  display: inline-flex !important;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  background: transparent;
  color: #fff !important;
  line-height: 1;
  transition: color .2s ease, opacity .2s ease;
}
.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
  color: var(--green) !important;
  background: transparent;
  outline: none;
}
.site-footer__socials svg {
  display: block !important;
  flex: 0 0 15px;
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  fill: currentColor !important;
}
.site-footer__socials svg path {
  fill: currentColor !important;
}
/* v3.5.10 — keep decorative footer wordmark from blocking legal links */
.site-footer > .container {
  position: relative;
  z-index: 2;
}
.site-footer__bottom,
.site-footer__bottom nav,
.site-footer__bottom a {
  position: relative;
  z-index: 3;
}
.site-footer__wordmark {
  position: relative;
  z-index: 0;
  pointer-events: none;
}