/* Change 23 refinements — requested 2026-08-14. Targeted overrides only. */

/* SERVICES — retainer link uses the same lime capsule language as the site CTA. */
html[data-page="services"] .fh-retainer-button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-height:48px!important;padding:0 22px!important;border-radius:999px!important;
  background:#BFFF00!important;border:1px solid #BFFF00!important;color:#0D0D0D!important;
  font-family:Inter,Arial,sans-serif!important;font-size:15px!important;font-weight:600!important;
  line-height:1!important;text-decoration:none!important;box-shadow:none!important;
}
html[data-page="services"] .fh-retainer-button:hover{transform:translateY(-1px)!important}

/* WHY US — vertically centre the complete hero composition, not an individual child. */
@media (min-width:1101px){
  html[data-page="about"] .inner-hero{
    min-height:680px!important;padding:0!important;display:flex!important;align-items:center!important;
    border-bottom:0!important;
  }
  html[data-page="about"] .inner-hero>.shell{width:min(calc(100% - 64px),1280px)!important}
  html[data-page="about"] .inner-hero-grid{
    min-height:680px!important;align-items:center!important;align-content:center!important;
  }
  html[data-page="about"] .inner-hero-grid>div{align-self:center!important}
}

/* WHY US — compact 2 x 2 capability cards with the same tight editorial rhythm as Services. */
html[data-page="about"] main>section.section:not(.founders-section):not(.fh-long-run-section):not(.fh-process-moved) .principle-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;max-width:1120px!important;margin-inline:auto!important;
}
html[data-page="about"] .principle{
  display:grid!important;grid-template-rows:220px auto 1fr!important;min-height:0!important;
  padding:0 0 24px!important;border-radius:18px!important;overflow:hidden!important;
}
html[data-page="about"] .principle img{width:100%!important;height:220px!important;object-fit:cover!important;margin:0 0 18px!important;border-radius:0!important}
html[data-page="about"] .principle h2{font-size:clamp(1.65rem,2.2vw,2.25rem)!important;line-height:1.02!important;margin:0 22px 10px!important}
html[data-page="about"] .principle p{font-size:.95rem!important;line-height:1.48!important;margin:0 22px!important;max-width:50ch!important}
html[data-page="about"] .principle>span{display:none!important}

/* WHY US — seamless handoff from Senior creative direction into the process. */
html[data-page="about"] .founders-section{
  background:#F4F4F1!important;border-bottom:0!important;padding-bottom:88px!important;
}
html[data-page="about"] .fh-process-moved{
  background:#F4F4F1!important;border:0!important;padding:68px 0 104px!important;
}
html[data-page="about"] .fh-process-moved::before,
html[data-page="about"] .fh-process-moved::after{display:none!important;content:none!important}
html[data-page="about"] .fh-process-intro{
  text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:14px!important;margin:0 auto 46px!important;
}
html[data-page="about"] .fh-process-eyebrow{
  margin:0!important;font-family:"DM Mono",monospace!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.15em!important;text-transform:uppercase!important;color:#77777F!important;
}
html[data-page="about"] .fh-process-intro h2{
  margin:0!important;max-width:900px!important;font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(42px,4.6vw,68px)!important;line-height:.98!important;letter-spacing:-.045em!important;
  font-weight:600!important;color:#0D0D0D!important;
}
html[data-page="about"] .fh-process-intro h2 em{
  font-family:"Cormorant Garamond",Georgia,serif!important;font-style:italic!important;font-weight:500!important;color:#0D0D0D!important;
}
html[data-page="about"] .fh-process-subtext{
  margin:4px auto 0!important;max-width:690px!important;font-size:17px!important;line-height:1.55!important;color:#5D5D63!important;
}
html[data-page="about"] .fh-process-moved .timeline{
  max-width:1120px!important;margin-inline:auto!important;gap:10px!important;
}
html[data-page="about"] .fh-process-moved .timeline-item{
  display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;gap:26px!important;align-items:center!important;
  min-height:0!important;padding:14px!important;border-radius:18px!important;background:#FFFFFF!important;
}
html[data-page="about"] .fh-process-moved .timeline-image{height:150px!important;border-radius:12px!important;overflow:hidden!important}
html[data-page="about"] .fh-process-moved .timeline-image img{width:100%!important;height:100%!important;object-fit:cover!important}
html[data-page="about"] .fh-process-moved .timeline-item h2{
  margin:0 0 8px!important;font-size:clamp(1.7rem,2.2vw,2.35rem)!important;line-height:1!important;letter-spacing:-.035em!important;
}
html[data-page="about"] .fh-process-moved .timeline-item p{
  margin:0!important;max-width:680px!important;font-size:.95rem!important;line-height:1.48!important;color:#5D5D63!important;
}
html[data-page="about"] .fh-process-moved .timeline-item>span{display:none!important}

/* PACKAGES — all cards share one calm default state. */
html[data-page="packages"] .package-card,
html[data-page="packages"] .package-card-featured{
  background:#FFFFFF!important;border-color:#D9D9DE!important;color:#0D0D0D!important;
  cursor:pointer!important;transition:background-color .2s ease,border-color .2s ease,color .2s ease!important;
}
html[data-page="packages"] .package-card::before,
html[data-page="packages"] .package-card:nth-child(2)::before,
html[data-page="packages"] .package-card:nth-child(3)::before{
  background:#6F3BFF!important;transition:background-color .2s ease!important;
}
html[data-page="packages"] .package-card .package-topline{border-bottom-color:#E2E2E6!important}
html[data-page="packages"] .package-card .package-tier{color:#0D0D0D!important}
html[data-page="packages"] .package-card .package-type{color:#77777F!important}
html[data-page="packages"] .package-card h2{color:#0D0D0D!important}
html[data-page="packages"] .package-card .package-intro{color:#5C5D64!important}
html[data-page="packages"] .package-card .package-features{border-top-color:#E2E2E6!important}
html[data-page="packages"] .package-card .package-features li{border-bottom-color:#E2E2E6!important;color:#2F3035!important}
html[data-page="packages"] .package-card .package-cta{
  background:#0D0D0D!important;border-color:#0D0D0D!important;color:#F4F4F4!important;
}
html[data-page="packages"] .package-card.is-selected{
  background:#111114!important;border-color:#222228!important;color:#F4F4F4!important;
}
html[data-page="packages"] .package-card.is-selected::before{background:#BFFF00!important}
html[data-page="packages"] .package-card.is-selected .package-topline{border-bottom-color:#303037!important}
html[data-page="packages"] .package-card.is-selected .package-tier{color:#BFFF00!important}
html[data-page="packages"] .package-card.is-selected .package-type{color:#A8A8B0!important}
html[data-page="packages"] .package-card.is-selected h2{color:#F4F4F4!important}
html[data-page="packages"] .package-card.is-selected .package-intro{color:#C2C2C8!important}
html[data-page="packages"] .package-card.is-selected .package-features{border-top-color:#303037!important}
html[data-page="packages"] .package-card.is-selected .package-features li{border-bottom-color:#303037!important;color:#E2E2E5!important}
html[data-page="packages"] .package-card.is-selected .package-cta{
  background:#BFFF00!important;border-color:#BFFF00!important;color:#0D0D0D!important;
}
html[data-page="packages"] .package-footer{gap:0!important}
html[data-page="packages"] .package-price{display:none!important}
html[data-page="packages"] .package-card:focus-visible{outline:2px solid #6F3BFF!important;outline-offset:3px!important}

@media(max-width:1100px){
  html[data-page="about"] .inner-hero{min-height:auto!important;padding:82px 0!important}
  html[data-page="about"] .inner-hero-grid{min-height:0!important}
  html[data-page="about"] .principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  html[data-page="about"] .principle-grid{grid-template-columns:1fr!important;gap:8px!important}
  html[data-page="about"] .principle{grid-template-rows:190px auto 1fr!important}
  html[data-page="about"] .principle img{height:190px!important}
  html[data-page="about"] .founders-section{padding-bottom:64px!important}
  html[data-page="about"] .fh-process-moved{padding:52px 0 78px!important}
  html[data-page="about"] .fh-process-intro{margin-bottom:34px!important}
  html[data-page="about"] .fh-process-moved .timeline-item{grid-template-columns:1fr!important;gap:16px!important;padding:12px!important}
  html[data-page="about"] .fh-process-moved .timeline-image{height:190px!important}
}

/* Change 24 — Why Us finishing refinements */

/* Account for the fixed 92px desktop header so the visible hero content is
   truly centered between the bottom of the navigation and the section end. */
@media (min-width:1101px){
  html[data-page="about"] .inner-hero{
    min-height:680px!important;
    height:auto!important;
    box-sizing:border-box!important;
    padding:92px 0 0!important;
    display:flex!important;
    align-items:stretch!important;
    border-bottom:0!important;
  }
  html[data-page="about"] .inner-hero>.shell{
    width:min(calc(100% - 64px),1280px)!important;
    min-height:588px!important;
  }
  html[data-page="about"] .inner-hero-grid{
    min-height:588px!important;
    align-items:center!important;
    align-content:center!important;
  }
  html[data-page="about"] .inner-hero-grid>div{
    align-self:center!important;
  }
}

/* More breathing room after Senior creative direction, but keep one seamless surface. */
html[data-page="about"] .founders-section{
  padding-bottom:168px!important;
  border-bottom:0!important;
}
html[data-page="about"] .fh-process-moved{
  border-top:0!important;
  box-shadow:none!important;
}
html[data-page="about"] .fh-process-moved::before,
html[data-page="about"] .fh-process-moved::after{
  display:none!important;
  content:none!important;
}

/* Team placeholders: equal, a little taller, and softly rounded. */
html[data-page="about"] .founder-portraits{
  align-items:stretch!important;
}
html[data-page="about"] .founder-portraits article{
  height:100%!important;
  min-height:360px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
html[data-page="about"] .founder-portraits img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1.05!important;
  max-height:none!important;
  object-fit:cover!important;
  border-radius:0!important;
  flex:0 0 auto!important;
}
html[data-page="about"] .founder-portraits article>div{
  margin-top:auto!important;
}

@media (max-width:1100px){
  html[data-page="about"] .founders-section{padding-bottom:120px!important}
  html[data-page="about"] .founder-portraits article{min-height:330px!important}
}
@media (max-width:700px){
  html[data-page="about"] .founders-section{padding-bottom:96px!important}
  html[data-page="about"] .founder-portraits article{min-height:0!important}
  html[data-page="about"] .founder-portraits img{aspect-ratio:4 / 3!important}
}


/* Change 26 — capability accents, founder text targets, title clipping */
/* All four Why Us capability accents default to lime. The real materialized
   spans remain selectable, and inline editor changes can still override this. */
html[data-page="about"] .principle-grid > .principle::before{
  background:#BFFF00!important;
}
html[data-page="about"] .principle-grid > .principle > .fh-capability-accent-line{
  background:#BFFF00!important;
  pointer-events:auto!important;
}

/* Prevent ascenders (notably the d in “production”) from being clipped by the
   card's internal text box while preserving the existing font size and card. */
html[data-page="about"] .principle-grid > .principle:first-child .fh-no-clip-title{
  overflow:visible!important;
  padding-top:4px!important;
  padding-bottom:2px!important;
  translate:0 0!important;
}

/* Change 28 — compact Why Us process tiles only.
   Desktop/tablet: keep the existing width and vertical stack, but reduce each
   card enough that Direction–Delivery can be viewed together at 100% zoom. */
@media (min-width:701px){
  html[data-page="about"] .fh-process-moved .timeline{
    gap:8px!important;
  }

  html[data-page="about"] .fh-process-moved .timeline-item{
    grid-template-columns:180px minmax(0,1fr)!important;
    gap:18px!important;
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
    padding:10px!important;
    align-items:center!important;
    overflow:hidden!important;
  }

  html[data-page="about"] .fh-process-moved .timeline-image{
    width:100%!important;
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  html[data-page="about"] .fh-process-moved .timeline-item h2{
    margin:0 0 4px!important;
    font-size:clamp(1.35rem,1.7vw,1.7rem)!important;
    line-height:1!important;
  }

  html[data-page="about"] .fh-process-moved .timeline-item p{
    margin:0!important;
    font-size:.82rem!important;
    line-height:1.32!important;
    max-width:760px!important;
  }
}



/* CHANGE 31 — Why Us process cards: preserve compact height, shorten only the right edge,
   and use a real editable purple accent element on the right. */
html[data-page="about"] .fh-process-moved .timeline{
  max-width:1120px!important;
  margin-inline:auto!important;
}
html[data-page="about"] .fh-process-moved .timeline-item{
  width:calc(100% - 150px)!important;
  justify-self:start!important;
  position:relative!important;
  overflow:hidden!important;
}
html[data-page="about"] .fh-process-moved .fh-process-right-accent{
  display:block!important;
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:5px!important;
  height:auto!important;
  min-width:5px!important;
  background:#6F3BFF!important;
  border-radius:0 18px 18px 0!important;
  pointer-events:auto!important;
  z-index:3!important;
}

/* CHANGE 31 — Why Us final CTA media: two equal-size, aligned placeholders. */
html[data-page="about"] .page-cta .cta-image-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
html[data-page="about"] .page-cta .cta-image-grid img{
  width:100%!important;
  height:260px!important;
  min-height:260px!important;
  object-fit:cover!important;
  border-radius:18px!important;
  transform:none!important;
}
html[data-page="about"] .page-cta .cta-image-grid img:nth-child(2){
  transform:none!important;
}

@media(max-width:900px){
  html[data-page="about"] .fh-process-moved .timeline-item{
    width:100%!important;
  }
  html[data-page="about"] .page-cta .cta-image-grid img{
    height:220px!important;
    min-height:220px!important;
  }
}


/* CHANGE 33 — centre the shortened Process stack and make the right accent
   a real visible editable element on every card. */
html[data-page="about"] .fh-process-moved .timeline{
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-items:center!important;
}
html[data-page="about"] .fh-process-moved .timeline-item{
  width:calc(100% - 150px)!important;
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  position:relative!important;
}
html[data-page="about"] .fh-process-moved .timeline-item > .fh-process-right-accent{
  display:block!important;
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:5px!important;
  min-width:5px!important;
  height:auto!important;
  margin:0!important;
  background:#6F3BFF!important;
  border:0!important;
  border-radius:0 18px 18px 0!important;
  pointer-events:auto!important;
  z-index:6!important;
}
@media(max-width:900px){
  html[data-page="about"] .fh-process-moved .timeline-item{
    width:100%!important;
  }
}