/* ----------- CSS Design System: Eco-Brutalist Monochrome - responsive -------- */

/*================= VARIABLES =================*/
:root {
  /* Palette: Cool eco monochrome + accent green */
  --main-bg: #f5f6f7;
  --section-bg: #eaeaea;
  --white: #fff;
  --black: #222;
  --gray-light: #ededed;
  --gray-med: #bfc2c4;
  --gray-dark: #555;
  --accent: #65B015;  /* Green accent */
  --accent-2: #1B8A20; 
  --accent-glass: rgba(101,176,21,0.2);

  /* Typography */
  --font-heading: 'Roboto', Arial, sans-serif;
  --font-body: 'Lato', Arial, sans-serif;

  /* Shadows + Glassmorphism */
  --box-shadow-brutal: 0 4px 32px 0 rgba(30,30,30,0.10), 0 1.5px 0 #ccc inset;
  --glass-bg: rgba(245,246,247,0.75);
  --glass-border: 1.5px solid rgba(80,80,80,0.13);

  /* Gradients & overlays */
  --hero-overlay: linear-gradient(120deg, rgba(0,0,0,0.6),rgba(30,30,30,0.14));
  --card-gradient: linear-gradient(120deg,#f5f6f7 40%,#eaeaea 100%);
  --glass-gradient: linear-gradient(96deg,rgba(245,246,247,0.85) 80%,rgba(101,176,21,0.05) 100%);
  --transition-main: .22s cubic-bezier(.6,.02,.4,.95);

  /* Border radius */
  --radius-m: 18px;
  --radius-s: 10px;

  /* Layout */
  --maxw: 1200px;
}

/*================= GENERIC ================*/
:root {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html {
  background: var(--main-bg);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 18px;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--main-bg);
  color: var(--gray-dark);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}
a {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 500;
  transition: color .18s ease;
}
a:hover, a:focus {
  color: var(--accent);
  text-decoration: underline;
  background: rgba(101,176,21,0.04);
}
.read-more, .readmore {
  display: inline-block;
  margin-top: .9em;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent-2);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: .11em;
  transition: color .18s, border-color .18s;
  cursor: pointer;
}
.read-more:hover, .readmore:hover {
  color: var(--white);
  background: var(--accent-2);
  border-color: var(--accent-2);
  border-radius: 2px;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius-m);
  object-fit: cover;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--black);
  font-weight: bold;
  line-height: 1.17;
  margin-bottom: 0.5em;
}
h1 {font-size: 2.45em;}
h2 {font-size: 2em;}
h3 {font-size: 1.35em;}
h4 {font-size: 1.02em;}
.section-title {
  letter-spacing: .01em;
  margin-top: 0;
  margin-bottom: 2rem;
  font-family: var(--font-heading);
}

/*================= LAYOUT SYSTEM =============*/
.container,
.container.is-two-thirds {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 2vw;
  box-sizing: border-box;
}
.container.is-two-thirds {
  max-width: 900px;
}

/*------------------------ HEADER / NAV --------------------------------*/
.header {
  width: 100%;
  background: var(--white);
  border-bottom: 2px solid var(--gray-light);
  position: fixed;
  top: 0; left: 0; z-index: 70;
  box-shadow: 0 1px 10px rgba(34,34,34,0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7em 2vw;
}
.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent-2);
  font-size: 1.6em;
  text-shadow: 1px 1px 0 var(--accent-glass);
}
.nav ul {
  list-style: none;
  display: flex;
  gap: 2.3em;
  margin: 0;
  padding: 0;
}
.nav li {
  display: flex;
}
.nav a {
  font-weight: 700;
  letter-spacing: .01em;
  padding: 0.7em 0.3em;
  background: none;
  border-radius: var(--radius-s);
  color: var(--black);
  transition: background var(--transition-main),color var(--transition-main);
  font-family: var(--font-heading);
}
.nav a:hover,.nav a:focus {
  background: var(--accent-glass);
  color: var(--accent-2);
}

/* Burger button (mobile) */
.burger {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  z-index: 8;
}
.burger span {
  width: 28px;
  height: 3.5px;
  border-radius: 4px;
  background: var(--accent-2);
  display: block;
}
@media (max-width: 920px) {
  .nav ul {gap:1em;}
}
@media (max-width: 800px) {
  .header-inner {padding: 0.7em 3vw;}
  .nav {position: absolute;top:100%;right:0;width:65vw;max-width:320px;background: var(--section-bg);box-shadow:0 12px 32px rgba(0,0,0,0.11);border-bottom-left-radius: 1.6em;}
  .nav ul {flex-direction: column;gap:0;}
  .header .nav {display: none;}
  .header .nav.open {display: block;}
  .burger {display: flex;}
}

/* Sticky header zone for main content */
main, .main {
  padding-top: 72px;
}
@media (max-width: 720px) {
  main, .main {padding-top: 58px;}
}
@media (max-width:480px){
  main,.main {padding-top: 27vw;}
}

/* Special for terms/privacy pages */
.page--privacy, .page--terms {
  padding-top: 100px !important;
}

/*=========== GLOBAL BUTTONS ==========*/
button, .btn, input[type='submit'] {
  display: inline-block;
  background: var(--accent-2);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1em;
  letter-spacing: .03em;
  font-weight: 700;
  border: none;
  padding: 0.85em 2.1em;
  border-radius: var(--radius-m);
  box-shadow: 0 4px 14px rgba(50,90,20,0.08);
  margin: .22em 0;
  cursor: pointer;
  transition: background var(--transition-main),color var(--transition-main),transform .13s cubic-bezier(.4,1.9,.4,1.1),box-shadow .22s;
  outline:none;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.btn-primary, .btn[aria-label], button[aria-label] {
  background: var(--accent);
  color: var(--white);
}
button:hover, .btn:hover, input[type='submit']:hover {
  background: var(--accent-2);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 7px 24px rgba(101,176,21,0.17);
}
button:active, .btn:active, input[type='submit']:active {
  transform: scale(.98) !important;
}


@media (max-width: 650px){
  button, .btn, input[type='submit'] {
    font-size: 1em;
    padding:0.7em 1.2em;
  }
}

/*=============== HERO ===============*/
.hero {
  width: 100%;
  min-height: 340px;
  box-sizing: border-box;
  background: var(--hero-overlay), url('image/eco-brutalist-business-consulting-hero.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3.2em;
  padding-bottom: 3.5em;
  position: relative;
  /* Parallax microeffect */
  will-change: background-position;
  background-attachment: fixed;
}
@media (max-width:1024px){
  .hero {background-attachment:scroll;}
}
.hero:before {
  content:"";
  position:absolute;inset:0;
  background:var(--hero-overlay);
  z-index:1;
  pointer-events:none;
  border-radius: 0 0 16px 16px;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin:2em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  background: linear-gradient(125deg,rgba(33,33,33,0.48) 60%,rgba(101,176,21,0.11) 120%);
  border-radius: var(--radius-m);
  box-shadow: 0 1px 16px 0 rgba(0,0,0,0.10);
  padding: 3.5em 2.7em 2.1em;
}
.hero h1,
.hero .section-title{
  color: var(--white);
  text-shadow:0 2px 8px rgba(16,16,16,0.16),
             0 1.2px 0 var(--accent-glass);
  font-size: 2.87em;
  font-family: var(--font-heading);
  letter-spacing: .02em;
  margin:0 0 1rem;
}
.hero .hero-desc {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.22em;
  margin-bottom: 2.3em;
  text-shadow:0 1.5px 18px rgba(30,30,30,0.18);
}

@media (max-width:650px){
  .hero-content{padding:2.2em 1.2em;}
  .hero h1,.hero .section-title{font-size:2em;}
}

/*=============== SECTIONS GENERAL ===============*/
.section {
  padding: 3.44em 0 3.22em 0;
  background: var(--section-bg);
}
.section > .container {margin-bottom: 0;}
.brutal-section {
  background: var(--glass-gradient);
  box-shadow: 0 0.5px 13px rgba(120,120,120,0.18);
  border-radius: var(--radius-m);
  margin: 2em 0;
}
@media (max-width:650px) {
  .section, .brutal-section {padding: 2em 0;}
}

/*=============== FEATURE CARDS (Flex+Center) =============*/
.features-cards,
.projects-list,
.resources-list {
  display: grid;
  gap: 2.2em;
  grid-template-columns: repeat(auto-fit,minmax(290px,1fr));
  margin-top: 2em;
}
.card, .item, .testimonial, .team-member, .product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--box-shadow-brutal);
  padding: 1.7em 1.25em 2.1em;
  margin: 0 auto;
  width: 100%;
  min-height: 200px;
  max-width: 355px;
  transition: box-shadow var(--transition-main),transform .14s;
  z-index: 1;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.card:hover,
.item:hover,
.team-member:hover,
.testimonial:hover {
  box-shadow: 0 9px 38px 1.5px rgba(101,176,21, 0.16);
  transform: translateY(-7px) scale(1.015);
}

/* Image container inside cards: */
.card-image, .image-container {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--card-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1em;
  flex-shrink: 0;
}
.card img, .item img, .testimonial img, .team-member img, .product-card img {
  width: 100%;
  height: 100%;
  max-width: 318px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-m);
  box-shadow: 0 2px 6px rgba(140,140,140,0.06);
  margin: 0 auto;
}
.card-content {
  width: 100%;
  padding: 0;
  text-align: center;
}
.card-content h3 {
  font-family: var(--font-heading);
  color: var(--black);
  margin-bottom: .7em;
  margin-top:.2em;
}
.card-content p {
  font-family: var(--font-body);
  color: var(--gray-dark);
  font-size: 1.01em;
}

@media (max-width:700px) {
  .features-cards,.projects-list,.resources-list {grid-template-columns:1fr;}
}

/*=================== ACCORDION =================*/
.accordion, .brutal-accordion {
  background: var(--gray-light); 
  margin: 1em 0;
  border-radius: var(--radius-m);
  transition: box-shadow .13s;
}
.accordion summary {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-2);
  padding: 1em 1.2em;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius-m);
  transition: background var(--transition-main);
}
.accordion[open] summary, 
.accordion summary:hover, 
.accordion summary:focus {
  background: var(--accent-glass);
  color: var(--black);
}
.accordion div, .brutal-accordion div {
  padding: 0 1.8em 1.3em;
  font-size: 1.03em;
  color: var(--gray-dark);
}

/*==================== SUSTAINABILITY ====================*/
.sustainability-flex {
  display: flex;
  align-items: flex-start;
  gap: 3em;
  flex-wrap: wrap;
}
.sustainability-flex > div {
  flex: 2;
  min-width: 224px;
}
.sustainability-flex .img-block {
  flex:1;
  min-width:183px;
  margin-top: 1em;
}
.brutal-switch {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 1.7em 0 0.5em 0;
  font-weight: 500;
}
.brutal-switch input[type='checkbox'] {
  accent-color: var(--accent-2);
  width: 32px; height: 19px;
}
.slider {
  width: 36px;
  height: 24px;
  background: var(--gray-light);
  border-radius: 12px;
  display: inline-block;
  position: relative;
  transition: background .17s;
}
.brutal-switch input:checked + .slider {
  background: var(--accent-glass);
}
.brutal-eco-info {
  margin: 1em 0 1.2em 0;
  padding: 1em 1.3em;
  border-radius: var(--radius-m);
  font-size: 1.06em;
  background: var(--white);
  color: var(--gray-dark);
  animation: fade-in .53s cubic-bezier(.7,.3,.45,1.2);
}
.brutal-eco-info ul { margin:0; padding-left:1.17em; }
.brutal-eco-info li {margin-bottom:0.4em;}

/* Micro-animation */
@keyframes fade-in {
  from {opacity:0; transform: translateY(1.7em);}
  to {opacity:1;transform:none;}
}

@media (max-width: 750px) {
  .sustainability-flex {flex-direction:column;gap:1.3em;}
  .sustainability-flex .img-block{margin: 0 auto 1em;}
}

/*=============== METHODOLOGY (SLIDER & CAROUSEL) ===========*/
.methodology-carousel, .gallery-slider {
  position: relative;
  padding: 2.2em 0 1.1em 0;
  overflow: hidden;
}
.carousel-content, .gallery-items {
  display: flex;
  gap: 1.1em;
  transition: transform .39s cubic-bezier(.63,.12,.21,1.02);
  scroll-snap-type: x mandatory;
}
.carousel-item, .gallery-img {
  background: var(--glass-bg);
  border-radius: var(--radius-s);
  min-width: 275px; 
  max-width: 680px;
  box-shadow: 0 1.5px 18px 1.2px rgba(51,85,23,0.07);
  padding: 1.5em 2em 1.5em;
  margin: 0 auto;
  text-align: center;
  opacity: 0.73;
  transition: opacity .19s, transform .22s;
  transform: scale(.97);
}
.carousel-item.active, .gallery-img.active {
  opacity:1;
  background: var(--white);
  box-shadow: 0 4px 23px 1.3px rgba(101,176,21,0.12);
  transform: scale(1.02);
  z-index:2;
}
.carousel-toggle, .gallery-prev, .gallery-next {
  background: var(--accent-glass);
  border: none;
  color: var(--accent-2);
  font-size: 2em;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  padding: .3em .5em;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s,color .14s,box-shadow .16s;
  z-index: 5;
}
.carousel-toggle.left, .gallery-prev {left:2px;}
.carousel-toggle.right, .gallery-next {right:2px;}
.carousel-toggle:hover, .gallery-prev:hover, .gallery-next:hover {
  background: var(--accent-2);
  color: #fff;
}
.carousel-indicators, .gallery-indicators {
  text-align: center;
  margin-top: 1.25em;
}
.carousel-indicators button,
.gallery-indicators button {
  width: 14px;
  height: 14px;
  background: var(--gray-light);
  border: none;
  border-radius: 49px;
  margin: 4px;
  cursor: pointer;
  transition: background .12s;
  box-shadow:0 .5px 1.2px #7ab2422e inset;
}
.carousel-indicators button.active,
.gallery-indicators button.active {
  background: var(--accent);
}

@media (max-width: 650px){
  .carousel-item,.gallery-img {padding:1.3em 0.6em;min-width:173px;}
}

/*=============== PROJECTS ================*/
/* Already using .projects-list, .card, for layout */

/*=============== GALLERY ================*/
.gallery-items {
  gap: 1.6em;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.gallery-img {
  min-width: 240px;
  max-width: 310px;
  background: var(--white);
  border-radius: var(--radius-s);
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 17px 1px rgba(101,176,21, 0.08);
  padding: 0.7em 0.7em 1.1em;
  opacity: .89;
  transition: opacity .14s, box-shadow .18s;
}
.gallery-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-s);
  margin: 0 auto;
  box-shadow: 0 2px 8px 2px rgba(61,110,22,0.08);
}
.gallery-img.active {opacity: 1;}
.gallery-nav {
  display: flex;
  justify-content: center;
  margin-top: .9em;
}
.gallery-prev, .gallery-next {position:static;}
@media (max-width:850px){
  .gallery-items {gap:0.5em;}
}

/*================== CONTACT ==============*/
.contact-flex {
  display: flex;
  gap: 3.5em;
  flex-wrap: wrap;
  align-items: flex-start;
}
.contact-form {
  flex:2;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--box-shadow-brutal);
  padding: 2.2em 2.1em 1.8em 2.1em;
  margin-left:auto;
  margin-right:auto;
  max-width: 400px;
  animation: fade-in .65s cubic-bezier(.93,.1,.3,1.1);
}
.contact-form label {
  font-family: var(--font-heading);
  color: var(--gray-dark);
  font-weight: 500;
  letter-spacing: .03em;
  margin-bottom: .2em;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  color: var(--black);
  border: 1.5px solid var(--gray-med);
  border-radius: var(--radius-s);
  padding: .75em 1em;
  font-size: 1.1em;
  background: var(--glass-bg);
  margin-bottom: 0.7em;
  transition: border .17s;
  outline: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border: 1.6px solid var(--accent-2);
  background: var(--white);
}
.contact-form textarea {
  min-height: 71px;
  resize: vertical;
}
.contact-form button[type="submit"] {
  margin-top: 0.7em;
}

@media (max-width:700px){
  .contact-flex {flex-direction:column;gap:1.2em;}
  .contact-form{padding:1.1em .7em;}
}

/*=============== FOOTER ====================*/
.footer {
  width: 100%;
  background: var(--black);
  color: var(--gray-light);
  padding: 2.8em 0 1.3em;
  margin-top: 3.2em;
  box-shadow: 0 -1.2px 18px 0 rgba(0,0,0,.12);
}
.footer .container {
  max-width: var(--maxw);
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
  list-style: none;
  margin: 0 0 1.2em 0;
  padding: 0;
}
.footer-nav a {
  color: var(--white);
  font-weight: 600;
  font-family: var(--font-heading);
  transition: color .15s;
  padding: 0.25em 0.1em;
  border-bottom: 2.5px solid transparent;
}
.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.footer-info {
  font-size: 1em;
  color: var(--gray-light);
  margin-bottom: .7em;
}
.footer-social {
  font-size: 1em;
  margin-top: .6em;
  letter-spacing: .01em;
}
.footer-social span {
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-med);
}
.footer-social a {
  color: var(--accent);
  font-weight: 700;
  margin: 0 0.2em;
  transition: color .16s;
  padding-bottom: 1.5px;
  border-bottom: 1.7px dotted var(--accent);
}
.footer-social a:hover,
.footer-social a:focus {
  background: var(--accent-glass);
  color: var(--white);
  border-color: var(--accent-2);
}

/* Social "icon" simulacrum (for accent) */
.footer-social a::before {
  display: inline-block;
  font-family: var(--font-heading);
  content: attr(data-social);
  font-size: 1.05em;
  font-style: normal;
  margin-right: 2px;
  font-weight: bold;
  color: var(--accent-2);
  transition: color .16s;
}
.footer-social a[href*="facebook"]:before { content: "f "; }
.footer-social a[href*="instagram"]:before { content: "𝑖 "; }
.footer-social a[href*="twitter"], 
.footer-social a[href*="x.com"]:before { content: "x "; }

@media (max-width:650px){
  .footer-nav ul {gap:0.55em;}
}

/*================== SUCCESS PAGE ================*/
.success-page,
.page-success {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg,#eaeaea 83%,#e5fcd2 100%);
}
.success-message,
.page-success__content {
  max-width: 450px;
  margin:auto;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: 0 2px 32px rgba(101,176,21,0.10);
  padding: 3em 2em;
  text-align: center;
  font-family: var(--font-body);
}
.success-message h1 {
  color: var(--accent-2);
  font-size: 2.03em;
  margin-bottom:1.2em;
}

/*================= UTILITY ===============*/
.mt-2 {margin-top: 2em;}
.mt-1 {margin-top: 1em;}
.text-center {text-align:center;}
.hide {display:none;}
.show {display:block!important;}
.object-cover {object-fit:cover;}
.shadow-m {box-shadow:0 6px 18px 0 rgba(90,120,10,.14);}
.rounded-m {border-radius:var(--radius-m);}
.glassmor {
  background: var(--glass-bg);
  box-shadow: 0 1.5px 18px 0 rgba(148,175,90,0.08);
  border: var(--glass-border);
  backdrop-filter: blur(7px);
}

@media (max-width:480px){
  .container,.container.is-two-thirds {padding: 0 .3em;}
  h1{font-size:1.5em;}
  h2{font-size:1.1em;}
}

/*===== PLACEHOLDERS FOR THEME-SPECIFIC IMAGES (for future generation) =====*/
/*
Example:
<img src="image/...jpg" width="400" height="290" alt="Здесь описание для генерации картинки в будущем">
*/