/* ==========================================================================
   Page-level components: sub hero, process steps, tabs, split panel,
   stats, forms, accordion, team, map. Loaded after style.css on
   about/services/contact.
   ========================================================================== */

/* ---- sub-page hero (shorter than home hero) ---- */
.subhero{
  position: relative;
  min-height: 62vh;
  display: flex; align-items: flex-end;
  padding-top: var(--nav-h);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.subhero__media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.subhero__media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  animation: kenburns 24s ease-in-out infinite alternate;
}
.subhero__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,21,14,.42) 0%, rgba(21,21,14,.68) 60%, rgba(21,21,14,.94) 100%);
}
.subhero__content{ position: relative; z-index: 1; padding-block: clamp(2.5rem,6vw,4.5rem); width: 100%; }
.subhero__crumb{
  display: flex; align-items: center; gap: .6em;
  font-size: var(--fs-xs); font-weight: 700; color: rgba(250,247,239,.6);
  margin-bottom: 1.4rem;
}
.subhero__crumb a:hover{ color: var(--yellow); }
.subhero h1{ font-size: clamp(2.1rem, 4.8vw, 3.6rem); max-width: 18ch; }
.subhero p{ margin-top: 1.4rem; max-width: 50ch; font-size: var(--fs-md); color: rgba(250,247,239,.78); }

/* ---- process steps (legit sequence) ---- */
.process{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}
.process__step{
  position: relative;
  padding: 2rem 1.7rem 2.2rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: transform .5s var(--ease), border-color .4s;
}
.process__step:hover{ transform: translateY(-6px); border-color: var(--paper-line-strong); }
.process__index{
  font-family: var(--f-display);
  font-size: 2.6rem; font-weight: 700;
  color: var(--paper-dim);
  -webkit-text-stroke: 1.5px var(--ink);
  line-height: 1;
  margin-bottom: 1.6rem;
}
.process__step h3{ font-family: var(--f-body); font-size: 1.15rem; font-weight: 800; }
.process__step p{ margin-top: .7rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }

/* ---- interactive split panel (about page, who we are) ---- */
.split-interactive{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
}
.split-interactive figure{
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4/5;
}
.split-interactive img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.split-interactive figure:hover img{ transform: scale(1.05); }
.split-interactive figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem;
  background: linear-gradient(0deg, rgba(21,21,14,.8), transparent);
  color: var(--paper);
  font-family: var(--f-display); font-size: 1.05rem;
}
@media (max-width: 760px){ .split-interactive{ grid-template-columns: 1fr; } }

/* ---- stat / fact strip (real, non-fabricated facts) ---- */
.facts{
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.facts__item{
  padding: 2rem 1.6rem;
  border-right: 1px solid var(--paper-line);
}
.facts__item:last-child{ border-right: 0; }
.facts__item b{
  display: block; font-family: var(--f-display);
  font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 600;
  margin-bottom: .3rem;
}
.facts__item span{ font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 900px){ .facts{ grid-template-columns: 1fr 1fr; } .facts__item:nth-child(2){ border-right:0; } }
@media (max-width: 560px){ .facts{ grid-template-columns: 1fr; } .facts__item{ border-right:0; border-bottom: 1px solid var(--paper-line); } }

/* ---- values grid ---- */
.values{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.value-card{
  padding: 2.2rem;
  border-radius: var(--radius-md);
  background: var(--paper-dim);
  transition: background .4s, transform .5s var(--ease);
}
.value-card:hover{ background: var(--ink); color: var(--paper); transform: translateY(-6px); }
.value-card__icon{
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--yellow); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
}
.value-card__icon svg{ width: 22px; height: 22px; }
.value-card h3{ font-family: var(--f-body); font-size: 1.1rem; font-weight: 800; }
.value-card p{ margin-top: .7rem; font-size: var(--fs-sm); color: var(--ink-soft); transition: color .4s; }
.value-card:hover p{ color: rgba(250,247,239,.75); }
@media (max-width: 860px){ .values{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .values{ grid-template-columns: 1fr; } }

/* ---- persona strip (about page, two personalities) ---- */
.persona-strip{ border-top: 1px solid var(--paper-line); }
.persona-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: clamp(1.8rem, 5vw, 3.2rem) 0;
  border-bottom: 1px solid var(--paper-line);
  transition: padding-left .5s var(--ease), background .5s var(--ease);
}
.persona-row:hover{ padding-left: 1.4rem; background: var(--paper-dim); }
.persona-row__text h3{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
}
.persona-row__text p{ margin-top: .6rem; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 44ch; }
.persona-row__tag{
  flex: none;
  font-size: var(--fs-xs); font-weight: 700;
  padding: .5em 1.1em; border-radius: 999px;
  border: 1px solid var(--paper-line-strong);
  display: flex; align-items: center; gap: .5em;
}
.persona-row--creative .persona-row__tag{ background: var(--yellow); border-color: var(--yellow); }
.persona-row--consulting .persona-row__tag{ background: var(--teal); color: #06181a; border-color: var(--teal); }
.persona-row__arrow{
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--paper-line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: transform .5s var(--ease), background .4s;
}
.persona-row:hover .persona-row__arrow{ background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.persona-row__arrow svg{ width: 16px; height: 16px; }
@media (max-width: 700px){
  .persona-row{ flex-wrap: wrap; }
  .persona-row__arrow{ display: none; }
}

/* ---- gallery mosaic ---- */
.mosaic{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 90px;
  gap: 1rem;
}
.mosaic figure{ border-radius: var(--radius-md); overflow: hidden; position: relative; }
.mosaic img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mosaic figure:hover img{ transform: scale(1.08); }
.mosaic .m1{ grid-column: span 3; grid-row: span 4; }
.mosaic .m2{ grid-column: span 3; grid-row: span 3; }
.mosaic .m3{ grid-column: span 2; grid-row: span 3; }
.mosaic .m4{ grid-column: span 4; grid-row: span 3; }
@media (max-width: 760px){
  .mosaic{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; }
  .mosaic .m1, .mosaic .m2, .mosaic .m3, .mosaic .m4{ grid-column: span 1; grid-row: span 2; }
}

/* ==========================================================================
   Services page: tab switcher
   ========================================================================== */
.svc-tabs{
  display: inline-flex; gap: .4rem;
  padding: .4rem; border-radius: 999px;
  background: var(--paper-dim);
  position: relative;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.svc-tabs button{
  position: relative; z-index: 1;
  padding: .85em 1.7em;
  border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink-soft);
  transition: color .4s;
}
.svc-tabs button.is-active{ color: var(--ink); }
.svc-tabs__indicator{
  position: absolute; top: .4rem; bottom: .4rem; left: .4rem;
  width: var(--w, 50%);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 8px 20px -8px rgba(21,21,14,.25);
  transition: transform .45s var(--ease), width .45s var(--ease);
  transform: translateX(var(--x, 0));
}

.svc-panel{ display: none; }
.svc-panel.is-active{ display: block; }

.svc-hero{
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.svc-hero__media{ border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; }
.svc-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.svc-hero__media--banner{ aspect-ratio: 16/10; background: #ffffff; }
.svc-hero__media--banner img{ object-fit: contain; }
.svc-hero--stacked{ display: block; }
.svc-hero--stacked > div:first-child{ margin-bottom: clamp(2rem, 4vw, 3rem); }
.svc-hero--stacked .svc-hero__media--banner{ aspect-ratio: 21/9; }
.svc-hero--stacked > div:last-child > *{ max-width: 62ch; }
@media (max-width: 700px){ .svc-hero--stacked .svc-hero__media--banner{ aspect-ratio: 4/3; } }
.svc-hero h2{ font-size: var(--fs-xxl); }
.svc-hero p{ margin-top: 1.2rem; font-size: var(--fs-md); color: var(--ink-soft); max-width: 46ch; }
@media (max-width: 860px){ .svc-hero{ grid-template-columns: 1fr; } }

.svc-list{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.svc-list__item{
  padding: 1.8rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  display: flex; gap: 1.2rem;
  transition: border-color .4s, background .4s;
}
.svc-list__item:hover{ border-color: var(--ink); background: var(--white); }
.svc-list__num{
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--clay); flex: none; padding-top: .2em;
}
.svc-list__item h4{ font-family: var(--f-body); font-size: 1.05rem; font-weight: 800; }
.svc-list__item p{ margin-top: .5rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 700px){ .svc-list{ grid-template-columns: 1fr; } }

.svc-included{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--ink); color: var(--paper);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
}
.svc-included h3{ font-size: 1.4rem; font-family: var(--f-display); font-weight: 600; }
.svc-included ul{ margin-top: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.svc-included li{
  display: flex; align-items: flex-start; gap: .7em;
  font-size: var(--fs-sm); color: rgba(250,247,239,.85);
}
.svc-included li svg{ width: 16px; height: 16px; margin-top: .18em; color: var(--yellow); flex: none; }
@media (max-width: 700px){ .svc-included{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-info__item{
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--paper-line);
}
.contact-info__icon{
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--paper-dim);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.contact-info__icon svg{ width: 19px; height: 19px; }
.contact-info h4{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: .3rem; }
.contact-info a, .contact-info p{ font-size: var(--fs-md); font-weight: 600; }
.contact-info a:hover{ color: var(--clay); }

.field{
  position: relative;
  margin-bottom: 1.5rem;
}
.field label{
  position: absolute; left: 0; top: 1.1em;
  font-size: var(--fs-md); color: var(--ink-soft);
  pointer-events: none;
  transition: transform .3s var(--ease), font-size .3s var(--ease), color .3s;
  transform-origin: left top;
}
.field input, .field textarea, .field select{
  width: 100%;
  border: none; border-bottom: 1.5px solid var(--paper-line-strong);
  background: transparent;
  padding: 1.1em 0 .7em;
  font-size: var(--fs-md);
  transition: border-color .35s;
}
.field select{ appearance: none; cursor: pointer; }
.field textarea{ resize: vertical; min-height: 90px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--ink); }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label,
.field.has-value label{
  transform: translateY(-1.4em) scale(.78);
  color: var(--clay);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }
.form-note{ font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 1rem; }

.map-wrap{
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  filter: grayscale(.5) contrast(1.05);
  transition: filter .5s;
  border: 1px solid var(--paper-line);
}
.map-wrap:hover{ filter: grayscale(0); }
.map-wrap iframe{ width: 100%; height: 100%; border: 0; }

.faq{ border-top: 1px solid var(--paper-line); }
.faq-item{ border-bottom: 1px solid var(--paper-line); }
.faq-item button{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 0; text-align: left;
  font-family: var(--f-body); font-weight: 700; font-size: var(--fs-md);
}
.faq-item__plus{
  width: 26px; height: 26px; flex: none; position: relative;
}
.faq-item__plus::before, .faq-item__plus::after{
  content: ''; position: absolute; background: var(--ink);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.faq-item__plus::before{ width: 16px; height: 2px; }
.faq-item__plus::after{ width: 2px; height: 16px; transition: transform .35s var(--ease); }
.faq-item.is-open .faq-item__plus::after{ transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-item__panel{
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--ease);
}
.faq-item__panel p{ padding-bottom: 1.6rem; color: var(--ink-soft); max-width: 60ch; }

@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }