/* =====================================================
  GLOBAL VARIABLES – Bright Neumorphism + Blocky UI
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  /* Core Palette */
  --color-primary: #ff6b6b;           /* Coral */
  --color-primary-dark: #e55a5a;
  --color-secondary: #1dd1a1;         /* Mint */
  --color-secondary-dark: #17b78c;
  --color-accent: #54a0ff;            /* Azure */
  --color-accent-dark: #3583e4;
  --color-bg: #f1f5fb;                /* Light backdrop */
  --color-bg-dark: #e1e5eb;
  --color-dark: #222222;
  --color-light: #ffffff;

  /* Shadows for Neumorphism */
  --shadow-elevate: 8px 8px 16px rgba(0,0,0,0.1),
                    -8px -8px 16px rgba(255,255,255,0.6);
  --shadow-inset: inset 6px 6px 12px rgba(0,0,0,0.1),
                  inset -6px -6px 12px rgba(255,255,255,0.6);

  /* Transition & Radius */
  --radius-lg: 18px;
  --radius-md: 12px;
  --transition-fast: 0.25s ease;
}
/* =====================================================
  BASE TYPOGRAPHY
===================================================== */
html,body{
  font-family:'Roboto',sans-serif;
  color:var(--color-dark);
  background-color:var(--color-bg);
  scroll-behavior:smooth;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Archivo Black',sans-serif;
  color:var(--color-dark);
  text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}

.section-title{
  margin-bottom:2rem;
  font-size:2.25rem;
  text-align:center;
}

/* =====================================================
  GLOBAL BUTTON COMPONENT (.btn)
===================================================== */
.btn,
button,
input[type='submit']{
  display:inline-block;
  border:none;
  border-radius:var(--radius-md);
  padding:0.75rem 1.5rem;
  font-weight:600;
  background:var(--color-primary);
  color:var(--color-light);
  cursor:pointer;
  box-shadow:var(--shadow-elevate);
  transition:transform var(--transition-fast),
             box-shadow var(--transition-fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--color-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,0,0,0.15);
}
.btn:active,
button:active,
input[type='submit']:active{
  transform:scale(0.97);
  box-shadow:var(--shadow-inset);
}

/* =====================================================
  NAVBAR
===================================================== */
.navbar{
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  background:var(--color-light);
}
.navbar-item,
.navbar-burger{
  font-weight:500;
  transition:color var(--transition-fast);
}
.navbar-item:hover{
  color:var(--color-primary);
}
.navbar-burger span{
  background:var(--color-dark);
}

/* =====================================================
  HERO SECTION
===================================================== */
#hero{
  position:relative;
  color:#ffffff;
}
#hero .title,
#hero .subtitle{
  color:#ffffff;
}
#hero a.button{
  background:var(--color-secondary);
}
#hero a.button:hover{
  background:var(--color-secondary-dark);
}

/* =====================================================
  TIMELINE (Our Process)
===================================================== */
.timeline{
  --line-color: var(--color-accent);
}
.timeline:before{
  background:var(--line-color);
}
.timeline-item .timeline-marker{
  background:var(--color-accent);
  box-shadow:0 0 0 4px var(--color-light), 0 0 0 6px var(--color-accent);
}

/* =====================================================
  CARD COMPONENTS (Insights & General)
===================================================== */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:var(--radius-lg);
  background:var(--color-light);
  box-shadow:var(--shadow-elevate);
  transition:transform var(--transition-fast),
             box-shadow var(--transition-fast);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.card-image,
.image-container{
  width:100%;
  height:260px;
  overflow:hidden;
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* =====================================================
  SUSTAINABILITY SECTION – Gallery Grid
===================================================== */
#sustainability .columns{
  margin-top:2rem;
}
#sustainability img{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-elevate);
  transition:transform var(--transition-fast);
}
#sustainability img:hover{
  transform:scale(1.05);
}

/* =====================================================
  PRESS SECTION – Text Block
===================================================== */
#press p{
  font-size:1.1rem;
  line-height:1.7;
}

/* =====================================================
  CONTACT SECTION – Form
===================================================== */
#contact .box{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-elevate);
}
.field .input,
.field .textarea{
  border:none;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-inset);
  background:var(--color-bg);
  transition:box-shadow var(--transition-fast);
}
.field .input:focus,
.field .textarea:focus{
  box-shadow:0 0 0 3px var(--color-primary);
}

/* =====================================================
  FOOTER
===================================================== */
.footer{
  padding:3rem 1.5rem;
  background:var(--color-dark);
  color:var(--color-light);
}
.footer a{
  color:var(--color-accent);
  font-weight:500;
  transition:color var(--transition-fast);
}
.footer a:hover{
  color:var(--color-secondary);
}

/* =====================================================
  SOCIAL TEXT LINKS – Hover Microanimation
===================================================== */
.footer a[href*="facebook"],
.footer a[href*="twitter"],
.footer a[href*="instagram"]{
  position:relative;
}
.footer a[href*="facebook"]::after,
.footer a[href*="twitter"]::after,
.footer a[href*="instagram"]::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:currentColor;
  transition:width var(--transition-fast);
}
.footer a:hover::after{
  width:100%;
}

/* =====================================================
  PARALLAX & BACKGROUND UTILS
===================================================== */
.has-parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}
.overlay-dark{
  position:relative;
}
.overlay-dark::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:0;
}
.overlay-dark > *{
  position:relative;
  z-index:1;
}

/* =====================================================
  MICRO-ANIMATIONS – Fade / Slide Utilities
===================================================== */
@keyframes fade-up{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
.fade-up{
  animation:fade-up 0.6s ease forwards;
}

/* =====================================================
  SUCCESS PAGE LAYOUT
===================================================== */
.page-success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:var(--color-bg);
}
.page-success h1{
  color:var(--color-primary);
  margin-bottom:1rem;
}

/* =====================================================
  PRIVACY & TERMS PAGES – TOP SPACER
===================================================== */
.page-legal{
  padding-top:100px;
}

/* =====================================================
  READ MORE LINKS
===================================================== */
.read-more{
  color:var(--color-accent);
  font-weight:600;
  transition:color var(--transition-fast);
}
.read-more:hover{
  color:var(--color-accent-dark);
}

/* =====================================================
  RESPONSIVE TWEAKS
===================================================== */
@media (max-width:768px){
  .navbar-menu{
    background:var(--color-light);
  }
  .card-image,
  .image-container{
    height:220px;
  }
}
.navbar-burger{
  display: none;
}