/* ============================================
   GENSLER.COM — style.css
   Global design tokens, resets, shared styles
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */


--red:         #8C7B65;        /* accent → sand/bronze */
  --yellow:      #F1C400;
  --orange:      #faa636;
  --green:       #66a33c;
  --black:       #1C1C1C;
  --dark:        #1C1C1C;
  --mid:         #4a4540;
  --gray:        #8C7B65;
  --light-gray:  #EDE9E0;
  --border:      #DDD8CE;
  --white:       #F4F1EA;

  /* Typography */
  --font-main:   'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Layout */
  --nav-height:  56px;
  --max-width:   1400px;
  --content-max: 1240px;
  --gutter:      32px;

  /* Transitions */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --t-fast:      160ms;
  --t-med:       260ms;
  --t-slow:      420ms;
}

/* ── RESET ── */
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  { font-family: var(--font-main); background: #F4F1EA; color: #1C1C1C; overflow-x: hidden; line-height: 1.4; -webkit-font-smoothing: antialiased; }

a     { text-decoration: none; color: inherit; }
img   { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ── UTILITIES ── */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gray);
  margin-bottom: 8px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  padding: 0 24px;
  height: 38px;
  line-height: 38px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  white-space: nowrap;
  border: 1.5px solid transparent;
}

.btn--outline-dark {
  color: var(--dark);
  border-color: var(--dark);
  background: transparent;
}
.btn--outline-dark:hover { background: var(--dark); color: var(--white); }

.btn--outline-white {
  color: var(--white);
  border-color: var(--white);
  background: transparent;
}
.btn--outline-white:hover { background: var(--white); color: var(--dark); }

.btn--red {
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
}
.btn--red:hover { background: var(--dark); border-color: var(--dark); }

.btn--hero {
  height: 40px;
  line-height: 40px;
  padding: 0 28px;
  font-size: 12px;
  color: var(--white);
  background: rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.85);
}
.btn--hero:hover { background: var(--yellow); border-color: var(--yellow); color: var(--dark); }

/* ── ICON BUTTON ── */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--dark);
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}
.icon-btn:hover { color: var(--red); }

/* ── CARD BASE ── */
.card-img {
  overflow: hidden;
  background: #ddd;
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.card:hover .card-img img,
.project-card:hover .card-img img { transform: scale(1.04); }

/* ── DIVIDER ── */
hr.rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ── CAROUSEL ARROWS ── */
.carousel-btn {
  width: 44px; height: 44px;
  border: 1.5px solid var(--mid);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.carousel-btn:hover { background: var(--mid); }
.carousel-btn svg { fill: var(--mid); width: 18px; transition: fill var(--t-fast); }
.carousel-btn:hover svg { fill: var(--white); }

/* ── RESPONSIVE HELPERS ── */
@media (max-width: 860px) { .hide-mobile { display: none !important; } }
@media (min-width: 861px) { .hide-desktop { display: none !important; } }





/* ── AXIS logo text ── */
.logo-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1C1C1C;
  text-decoration: none;
}

/* ── Nav active state ── */
.nav-active {
  color: #1C1C1C !important;
  font-weight: 600;
}