/* =====================================================================
   goat-footer.css — the site footer, self-contained.
   Same markup and styling as the footer on the rest of goatagency.us,
   but with its own variables so it can be dropped on a page that has a
   completely different stylesheet (like this portfolio) without
   touching anything else on it.
   ===================================================================== */
.goat-site-footer{
  --paper:#ededed;
  --ink:#202020;
  font-family:Lato, Arial, Helvetica, sans-serif;
}

/* the portfolio page has a fixed left rail; the footer sits beside it,
   exactly like <main> does. On phones the rail collapses and so does this. */
.goat-site-footer{
  /* the rail is max(14vw, 190px) wide — match it so nothing is hidden under it */
  margin-left:max(var(--rail, 0px), 190px);
  min-height:1px;
}
@media (max-width:760px){
  .goat-site-footer{ margin-left:0; }
}
.goat-site-footer *{ box-sizing:border-box; }
.goat-site-footer img{ width:auto; }
.goat-site-footer a{ text-decoration:none; }
.goat-site-footer h2,
.goat-site-footer h3{ font-family:inherit; }

.site-footer {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  padding: 4.2rem 7vw 2.2rem;
}

.site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.6rem;
  padding-bottom: 2.6rem;
}

.site-footer-word {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.site-footer-col h3 {
  margin: 0 0 .25rem;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
}

.site-footer-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  transition: opacity .2s ease;
}

.site-footer-col a:hover {
  opacity: .6;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(32,32,32,.18);
}

.site-footer-bottom span {
  font-size: .82rem;
  opacity: .5;
}

.site-footer-legal {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.site-footer-legal a {
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  opacity: .5;
  transition: opacity .2s ease;
}

.site-footer-legal a:hover {
  opacity: .8;
}

@media (max-width: 700px) {
  .site-footer {
    padding: 3.2rem 6vw 1.8rem;
  }

  .site-footer-top {
    flex-direction: column;
    gap: 2.2rem;
    padding-bottom: 2.2rem;
  }

  .site-footer-word {
    font-size: 1.7rem;
  }

  .site-footer-cols {
    width: 100%;
    gap: 2rem 1.2rem;
  }

  .site-footer-col {
    width: calc(50% - .6rem);
  }

  .site-footer-col a {
    font-size: .88rem;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
  }
}

/* =====================================================
   FOOTER — Services accordion (4 categories, expand on click)
   ===================================================== */

.site-footer-col--services {
  gap: .35rem;
}

.footer-accordion {
  width: 100%;
  border-bottom: 1px solid rgba(32,32,32,.12);
}

.footer-accordion:first-of-type {
  border-top: 1px solid rgba(32,32,32,.12);
  margin-top: .35rem;
}

.footer-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  padding: .75rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
}

.footer-accordion-head span {
  transition: opacity .2s ease;
}

.footer-accordion-head:hover span {
  opacity: .65;
}

.footer-accordion-arrow {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform .28s ease;
}

.footer-accordion-head[aria-expanded="true"] .footer-accordion-arrow {
  transform: rotate(180deg);
}

/* Normal push-down accordion: the panel sits in normal flow, so
   opening a category pushes everything below it further down the
   column, like a plain expand/collapse list. */
.footer-accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s ease;
}

.footer-accordion-panel ul {
  list-style: none;
  margin: 0;
  padding: .35rem 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.footer-accordion-panel a {
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  opacity: .68;
  transition: opacity .2s ease;
}

.footer-accordion-panel a:hover {
  opacity: 1;
}

@media (max-width: 700px) {
  .footer-accordion-head {
    font-size: .92rem;
  }

  .footer-accordion-panel a {
    font-size: .84rem;
  }
}

/* ---- Mobile: one column inside a tall stadium ---- */
@media (max-width:900px){
  .goat-team{
    padding:clamp(20px, 6vw, 44px) 4vw clamp(48px, 12vw, 90px);
  }
  .goat-team__pill{
    border-radius:clamp(200px, 46vw, 420px) / clamp(140px, 30vw, 300px);
    padding:clamp(90px, 20vw, 150px) clamp(26px, 8vw, 60px);
  }
  .goat-team__groups{
    grid-template-columns:1fr;
    gap:clamp(40px, 9vw, 64px);
  }
  .goat-team__group{
    padding:0;
  }
  .goat-team__group + .goat-team__group{
    border-left:0;
  }
  .goat-team__group h3{
    font-size:clamp(1.6rem, 7vw, 2.4rem);
    margin-bottom:clamp(22px, 6vw, 34px);
  }
  .goat-team__row{
    gap:clamp(12px, 4vw, 24px);
    margin-bottom:clamp(18px, 5vw, 28px);
  }
  .goat-team__row > :first-child{ font-size:clamp(1rem, 4.4vw, 1.35rem); }
  .goat-team__row > :last-child{ font-size:clamp(.88rem, 3.8vw, 1.15rem); }

  .goat-team__cta{
    margin-top:clamp(40px, 10vw, 64px);
    font-size:clamp(.95rem, 4.2vw, 1.2rem);
  }
  .goat-team__cta::before{ display:none; }
  .goat-team__cta::after{ display:none; }
}

/* On phones the roster shows Leadership only — the full four-group list
   belongs on the dedicated team page, which "Meet our Team" links to. */
@media (max-width:700px){
  .goat-team__group:not(:first-child){ display:none }
}


/* =====================================================
   FOOTER — one structure, two themes.
   Home keeps the light paper panel; the Team view and the
   Portfolio page get the black one. Colours come from the
   four variables below, so the markup never changes.
   ===================================================== */
.site-footer{
  --f-bg:var(--paper);
  --f-fg:var(--ink);
  --f-line:rgba(32,32,32,.14);
  --f-dim:.55;
  background:var(--f-bg);
  color:var(--f-fg);
}

:is(.site-footer--dark, body.team-page .site-footer){
  --f-bg:#000000;
  --f-fg:#f5f5f5;
  --f-line:rgba(255,255,255,.16);
  --f-dim:.5;
}

.site-footer-logo{ display:block; margin:0; line-height:0; }

.site-footer-logo img{
  display:block;
  width:clamp(160px, 20vw, 260px);
  height:auto;
}

.site-footer-col h3{ color:var(--f-fg); opacity:var(--f-dim); }

.site-footer-col a,
.site-footer-legal a,
.footer-accordion-head{ color:var(--f-fg); }

.site-footer-bottom{ border-top:1px solid var(--f-line); }

.site-footer-bottom span{ color:var(--f-fg); opacity:var(--f-dim); }

.site-footer-legal a{ opacity:var(--f-dim); }

.site-footer-legal a:hover{ opacity:1; }

.footer-accordion{ border-bottom:1px solid var(--f-line); }

.footer-accordion:first-of-type{ border-top:1px solid var(--f-line); }

.footer-accordion-panel a{ color:var(--f-fg); opacity:.68; }

.footer-accordion-panel a:hover{ opacity:1; }

/* phone rows in the Connect column */
.site-footer-phone{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
}

.site-footer-phone .site-footer-phone__flag{ font-size:1rem; }

.site-footer-phone .site-footer-phone__num{ font-variant-numeric:tabular-nums; }
.site-footer-phone__tag{
  margin-left:.55rem;
  padding:.16rem .5rem;
  border-radius:999px;
  background:rgba(37,211,102,.18);
  border:1px solid rgba(37,211,102,.38);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}


/* WhatsApp buttons — side by side on desktop, stacked on phones */
.footer-wa{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:.85rem 0 .35rem;
}

.footer-wa__btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1.05rem;
  border:1px solid var(--f-line);
  border-radius:999px;
  background:rgba(37,211,102,.12);
  color:var(--f-fg) !important;
  font-size:.92rem;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.footer-wa__btn:hover{
  background:rgba(37,211,102,.24);
  border-color:rgba(37,211,102,.55);
  transform:translateY(-1px);
}

.footer-wa__btn svg{ width:18px; height:18px; flex:none; fill:#25d366; }

.footer-wa{ flex-direction:column; align-items:stretch; width:100%; max-width:320px; }

.footer-wa__btn{ justify-content:center; padding:.8rem 1rem; }

.site-footer-col a{ padding-block:.15rem; }

/* bigger tap targets */
}

/* While a services category is open the footer leaves its pinned
   position and joins the normal flow, so the panel can push the list
   downwards instead of shoving the whole footer up off the screen. */
body.footer-open .site-footer-reveal{
  position:static !important;
}

/* Team / Portfolio sit a little below the rest of the Company column */
.goat-site-footer .site-footer-col__spaced{ margin-top:1.55rem; }

/* ---------------------------------------------------------------
   Phones: the Connect block splits in two — WhatsApp buttons down
   the left, the three numbers down the right.
   --------------------------------------------------------------- */
@media (max-width:700px){
  .site-footer-col--connect{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:16px;
    row-gap:.55rem;
    align-items:center;
    width:100%;
  }
  .site-footer-col--connect > h3{ grid-column:1 / -1; }
  .site-footer-col--connect > a:not(.site-footer-phone){ grid-column:1 / -1; }
  .site-footer-col--connect > .footer-wa{
    grid-column:1;
    grid-row:3 / span 3;
    width:auto;
    max-width:none;
    margin:0;
    align-self:center;
  }
  .site-footer-col--connect > .footer-wa .footer-wa__btn{
    justify-content:flex-start;
    padding:.6rem .85rem;
    font-size:.84rem;
    white-space:nowrap;
  }
  .site-footer-col--connect > a.site-footer-phone{ grid-column:2; justify-self:start; }
  .site-footer-col--connect > a.site-footer-phone:nth-of-type(2){ grid-row:3; }
  .site-footer-col--connect > a.site-footer-phone:nth-of-type(3){ grid-row:4; }
  .site-footer-col--connect > a.site-footer-phone:nth-of-type(4){ grid-row:5; }
  .site-footer-col--connect > a.site-footer-phone{ font-size:.82rem; }

  /* the number rows read as WhatsApp contacts; on a phone the label rides up
     beside the country code so the number keeps a line to itself */
  .site-footer-col--connect > a.site-footer-phone{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.18rem .4rem;
    white-space:nowrap;
    line-height:1.25;
  }
  .site-footer-col--connect > a.site-footer-phone .site-footer-phone__tag{
    order:1; margin-left:0;
  }
  .site-footer-col--connect > a.site-footer-phone .site-footer-phone__num{
    order:2; flex:0 0 100%;
  }

}