/* =====================================================================
   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:1fr;   /* the WhatsApp button column is gone — the numbers take the full width */
    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:1; 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%;
  }

}


/* ---------------------------------------------------------------
   Social icons — the footer's right-hand column: Instagram, TikTok,
   X and LinkedIn one under another. Phones: Connect keeps the left
   half and the icons take the right half beside it.
   --------------------------------------------------------------- */
.site-footer-col--social{
  /* four icons as a 2 x 2 grid: Instagram + TikTok on the first row,
     X + LinkedIn on the second (was one column of four) */
  display:grid;
  grid-template-columns:repeat(2, max-content);
  justify-content:start;
  align-content:start;   /* the column is stretched to the tallest sibling; keep the two rows together at the top */
  gap:.6rem;
}
.site-footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--f-line);
  border-radius:999px;
  color:var(--f-fg) !important;
  line-height:0;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.site-footer-social svg{ width:18px; height:18px; flex:none; }
.site-footer-social:hover{
  background:#fb0155;
  border-color:#fb0155;
  color:#fff !important;
  opacity:1;
  transform:translateY(-1px);
}
@media (max-width:700px){
  .site-footer-col--connect{ width:calc(50% - .6rem); }
  .site-footer-col--social{ width:calc(50% - .6rem); gap:.55rem; }
  .site-footer-social{ width:44px; height:44px; padding:0; }
}

/* ---------------------------------------------------------------
   FOOTER — the three domains, bottom-right, each linking to itself.
   Desktop: one row on the far right, after the legal links.
   Phones: their own row under the legal links, still side by side.
   --------------------------------------------------------------- */
.site-footer-bottom > span{ margin-right:auto; }
.site-footer-domains{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem 1rem;
}
.site-footer-domains a{
  color:var(--f-fg);
  opacity:var(--f-dim);
  font-size:.82rem;
  letter-spacing:.01em;
  text-decoration:none;
  transition:opacity .2s ease, color .2s ease;
}
.site-footer-domains a:hover{ opacity:1; color:#fb0155; }

@media (min-width:701px){
  /* the columns row spans the full footer width so the social icons
     sit at the right edge instead of crowding the Connect column */
  .site-footer-cols{ width:100%; gap:2rem clamp(2.5rem, 5vw, 5.5rem); }
  .site-footer-col--social{ margin-left:auto; gap:.85rem; }
  .site-footer-social{ width:46px; height:46px; }
  .site-footer-bottom{ gap:1rem 2.2rem; }
  .site-footer-domains{ gap:1.4rem; }
}

@media (max-width:700px){
  .site-footer-bottom{ align-items:stretch; }
  .site-footer-bottom > span{ margin-right:0; }
  .site-footer-domains{
    justify-content:space-between;
    gap:.5rem .6rem;
    width:100%;
  }
  .site-footer-domains a{ font-size:.76rem; }
}