/* Homepage repair pass — 2026-10-11
   Final authoritative layout for How I Think, strategy workbench,
   portfolio website CTAs, and common overflow guards. */

/* General grid/flex safety */
.home-page main *,
body.home main * { min-width: 0; }
#how-i-think,
#strategy,
.portfolio-zone,
.services-overview,
.creative-lab-home { overflow: clip; }

/* HOW I THINK — replace fragile diagram-first layout with a clean interactive sequence */
#how-i-think .thinking {
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:clamp(2.5rem,6vw,7rem) !important;
  align-items:start !important;
  padding:0 !important;
  border:0 !important;
}
#how-i-think .thinking > div { min-width:0; }
#how-i-think .thinking > div:first-child { position:sticky; top:120px; }
#how-i-think .thinking h2 {
  margin:.55rem 0 1.4rem !important;
  max-width:12ch !important;
  font-size:clamp(3rem,5.6vw,6.5rem) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
}
#how-i-think .thinking > div:first-child > p {
  max-width:34rem !important;
  font-size:clamp(1rem,1.4vw,1.18rem) !important;
  line-height:1.65 !important;
  margin:0 !important;
}
/* The old SVG map was decorative and is the source of the broken desktop composition. */
#how-i-think .thinking-map { display:none !important; }
#how-i-think .thinking-tabs {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.7rem !important;
  margin:0 0 1.25rem !important;
}
#how-i-think .thinking-tabs button {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:4.6rem !important;
  padding:.85rem .7rem !important;
  border:1px solid rgba(27,61,82,.26) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.45) !important;
  color:#183448 !important;
  font-size:.73rem !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;
  font-weight:800 !important;
  text-align:center !important;
  white-space:normal !important;
  transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease !important;
}
#how-i-think .thinking-tabs button:hover,
#how-i-think .thinking-tabs button:focus-visible {
  transform:translateY(-2px);
  background:#dce9ef !important;
  color:#102d40 !important;
}
#how-i-think .thinking-tabs button[aria-pressed="true"] {
  background:#19384d !important;
  border-color:#19384d !important;
  color:#fff !important;
  transform:translateY(-3px);
}
#how-i-think .thinking-detail {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-height:15rem !important;
  margin:0 !important;
  padding:clamp(1.6rem,3vw,2.7rem) !important;
  border-radius:1.5rem !important;
  background:#173247 !important;
  color:#f5f8fa !important;
  box-shadow:0 20px 55px rgba(4,19,30,.15) !important;
  font-size:clamp(1.35rem,2.4vw,2.35rem) !important;
  line-height:1.25 !important;
}
#how-i-think .thinking-detail p { margin:0 !important; color:#f5f8fa !important; }
#how-i-think .thinking-detail small {
  display:block !important;
  margin-top:1.5rem !important;
  color:#bed7e6 !important;
  font-size:.75rem !important;
  line-height:1.5 !important;
  letter-spacing:.09em !important;
}

/* STRATEGY WORKBENCH — one clean model, no competing old/new layouts */
#strategy .strategy-workbench {
  width:100% !important;
  max-width:1180px !important;
  margin:clamp(2.5rem,5vw,4.5rem) auto clamp(3rem,6vw,6rem) !important;
  padding:clamp(1.5rem,3.4vw,3rem) !important;
  border-radius:1.8rem !important;
  background:#101d2b !important;
  color:#f4f7fa !important;
  box-shadow:0 24px 70px rgba(8,19,31,.18) !important;
  overflow:hidden !important;
}
#strategy .brief-picker {
  display:grid !important;
  grid-template-columns:minmax(150px,.34fr) minmax(0,1fr) !important;
  gap:.75rem 1.4rem !important;
  align-items:center !important;
}
#strategy .brief-picker label {
  margin:0 !important;
  color:#dce7ef !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
#strategy .brief-picker select {
  width:100% !important;
  max-width:none !important;
  min-height:3.3rem !important;
  margin:0 !important;
  padding:.8rem 2.8rem .8rem 1rem !important;
  border:1px solid #7fa0b5 !important;
  border-radius:.85rem !important;
  background:#203c50 !important;
  color:#f5f8fa !important;
  font-size:1rem !important;
}
#strategy .brief-picker > span {
  grid-column:2 !important;
  margin:0 !important;
  color:#bcd0dd !important;
  font-size:.67rem !important;
  line-height:1.4 !important;
  letter-spacing:.09em !important;
}
#strategy .transformation {
  display:block !important;
  min-height:0 !important;
  margin:clamp(1.4rem,3vw,2.2rem) 0 !important;
}
#strategy .raw-thoughts,
#strategy .direction-mark { display:none !important; }
#strategy .resolved-thought {
  width:100% !important;
  min-height:0 !important;
  padding:clamp(1.4rem,3vw,2.2rem) !important;
  border:1px solid rgba(151,184,205,.28) !important;
  border-left:4px solid #9ec5db !important;
  border-radius:1.25rem !important;
  background:#0b2133 !important;
  color:#f7fbfd !important;
}
#strategy .resolved-thought small {
  display:block !important;
  margin:0 0 .85rem !important;
  color:#c7dce8 !important;
  font-size:.68rem !important;
  letter-spacing:.1em !important;
}
#strategy #strategy-output {
  display:block !important;
  margin:0 !important;
  color:#fff !important;
  font-size:clamp(1.55rem,2.6vw,2.7rem) !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  overflow-wrap:anywhere !important;
}
#strategy .process {
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.7rem !important;
  width:100% !important;
  margin:0 0 1.2rem !important;
  padding:.35rem 0 .4rem !important;
  overflow:visible !important;
}
#strategy .process::before { display:none !important; }
#strategy .process button {
  position:relative !important;
  top:auto !important;
  min-width:0 !important;
  min-height:6.3rem !important;
  padding:.9rem .75rem !important;
  border:1px solid #7894a8 !important;
  border-radius:1rem !important;
  background:#1b3448 !important;
  color:#eef5f9 !important;
  box-shadow:none !important;
  transform:none !important;
  text-align:left !important;
  font-size:.83rem !important;
  line-height:1.25 !important;
}
#strategy .process button::before { display:none !important; }
#strategy .process button span {
  display:block !important;
  margin:0 0 .5rem !important;
  color:#bad4e3 !important;
  font-size:.67rem !important;
  line-height:1.2 !important;
}
#strategy .process button[aria-pressed="true"] {
  background:#d8e8f1 !important;
  border-color:#d8e8f1 !important;
  color:#102d40 !important;
  transform:translateY(-3px) !important;
}
#strategy .process button[aria-pressed="true"] span { color:#24455a !important; }
#strategy .process-detail,
#strategy .strategy-example {
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:1.4rem 1.5rem !important;
  border:1px solid rgba(132,167,190,.28) !important;
  border-radius:1.15rem !important;
  background:#0c2032 !important;
  color:#edf5f9 !important;
  font-size:1rem !important;
  line-height:1.65 !important;
  overflow-wrap:anywhere !important;
}
#strategy .process-detail { margin-bottom:.8rem !important; }
#strategy .strategy-example small {
  display:block !important;
  margin:0 0 .65rem !important;
  color:#bcd5e3 !important;
  font-size:.67rem !important;
  letter-spacing:.1em !important;
}

/* Homepage campaign website CTAs: keep cards aligned and prevent button overflow */
.home-page .portfolio-caption,
body.home .portfolio-caption { display:flex; flex-direction:column; align-items:flex-start; }
.home-page .portfolio-caption .portfolio-site-link,
body.home .portfolio-caption .portfolio-site-link {
  max-width:100%;
  white-space:normal;
  text-align:center;
  line-height:1.2;
}

/* Contact option safety */
#contact .contact-options label,
.contact .contact-options label { min-width:0; }
#contact .contact-options label span,
.contact .contact-options label span { overflow-wrap:anywhere; }

@media (max-width:1050px){
  #how-i-think .thinking { grid-template-columns:1fr !important; }
  #how-i-think .thinking > div:first-child { position:static; }
  #how-i-think .thinking h2 { max-width:15ch !important; }
  #strategy .process { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

@media (max-width:720px){
  #how-i-think .thinking-tabs { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #how-i-think .thinking-tabs button:last-child { grid-column:1 / -1; }
  #how-i-think .thinking-detail { min-height:0 !important; }
  #strategy .strategy-workbench { padding:1.15rem !important; border-radius:1.3rem !important; }
  #strategy .brief-picker { grid-template-columns:1fr !important; }
  #strategy .brief-picker > span { grid-column:1 !important; }
  #strategy .process { grid-template-columns:1fr !important; gap:.6rem !important; }
  #strategy .process button { min-height:0 !important; padding:1rem !important; }
  #strategy .process button[aria-pressed="true"] { transform:none !important; }
}

@media (prefers-reduced-motion:reduce){
  #how-i-think .thinking-tabs button,
  #strategy .process button { transition:none !important; transform:none !important; }
}