/* ============================================================
   Outside In v2 — page styles
   ============================================================ */

/* ===== HERO — kinetic "outside in" ===== */
.hero { position: relative; padding-block: clamp(3rem,7vw,6rem) clamp(4rem,9vw,8rem); overflow: clip; }
.hero__inner { position: relative; z-index: 2; }
.hero__eyebrow { margin-bottom: 2rem; }
.hero__title { font-family: var(--display); font-weight: 700; font-size: var(--t-4); line-height: 0.95; letter-spacing: -0.035em; max-width: 15ch; }
.hero__title .out { display: inline-block; }
.hero__title .in { display: inline-block; color: var(--blue); }
.hero__title .mark-inline { display:inline-block; width: 0.52em; height: 0.52em; color: var(--blue); vertical-align: 0.04em; margin-left: 0.14em; }
.hero__sub { margin-top: 2rem; max-width: 50ch; font-size: var(--t-1); color: var(--grey); line-height: 1.45; }
.hero__actions { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* giant ghost mark behind hero */
.hero__ghost { position: absolute; top: 50%; right: calc(var(--gutter) * -1); transform: translateY(-50%); width: clamp(280px, 42vw, 640px); color: var(--paper-2); z-index: 1; pointer-events: none; }
.hero__ghost svg { width: 100%; height: auto; }
@media (max-width: 820px){ .hero__ghost { opacity: 0.5; right: -22%; width: 70vw; } }

/* animated mark intro */
@keyframes drawIn { from { stroke-dashoffset: 400; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }

/* ===== Statement / who ===== */
.statement { font-family: var(--display); font-weight: 500; font-size: var(--t-3); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; }
.statement b { color: var(--blue); font-weight: 500; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items: start; }
@media (max-width: 860px){ .two-col { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ===== Capabilities ===== */
.caps { border-top: 2px solid var(--ink); }
.cap {
  display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem;
  padding-block: clamp(1.4rem,2.5vw,2rem); border-bottom: 1px solid var(--line);
  align-items: center; position: relative; transition: padding-left .35s var(--ease);
}
.cap::before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; background: var(--blue); transition: width .35s var(--ease); }
.cap:hover { padding-left: 1.2rem; }
.cap:hover::before { width: 4px; }
.cap__num { font-family: var(--display); font-size: var(--t-1); color: var(--grey-lt); font-variant-numeric: tabular-nums; }
.cap__title { font-family: var(--display); font-size: var(--t-2); font-weight: 500; letter-spacing: -0.02em; }
.cap__desc { max-width: 46ch; color: var(--grey); font-size: var(--t-0); }
.cap__arr { color: var(--blue); opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.cap:hover .cap__arr { opacity: 1; transform: none; }
@media (max-width: 720px){
  .cap { grid-template-columns: 2.4rem 1fr; }
  .cap__desc { grid-column: 1 / -1; padding-left: 0; }
  .cap__arr { display: none; }
}

/* ===== Client banner (marquee) ===== */
.banner { background: var(--ink); color: #fff; padding-block: clamp(3.5rem,6vw,5.5rem); overflow: hidden; }
.banner__head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom: 2.8rem; }
.banner__hint { font-size: var(--t--1); color: var(--grey-lt); letter-spacing: 0.04em; text-transform: uppercase; }
.marquee { position: relative; display:flex; overflow:hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee__track { display:flex; gap:1rem; padding-right:1rem; animation: scroll-x 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.chip {
  flex:0 0 auto; display:flex; align-items:center; gap:0.9rem;
  padding: 1.1rem 1.7rem; border: 1px solid var(--line-dk); white-space:nowrap;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.chip:hover { border-color: var(--blue); background: rgba(31,59,255,0.08); transform: translateY(-3px); }
.chip__mark { width:36px; height:36px; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:1.05rem; background:#fff; color:var(--ink); }
.chip:hover .chip__mark { background: var(--blue); color:#fff; }
.chip__name { font-weight:500; }
.chip__cat { font-size:0.7rem; color:var(--grey-lt); text-transform:uppercase; letter-spacing:0.12em; }

/* ===== Team teaser ===== */
.team-grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1.2rem,2.5vw,2rem); }
@media (max-width:780px){ .team-grid{ grid-template-columns:1fr; } }
.person {
  position: relative; overflow: hidden; background: var(--ink); color:#fff;
  min-height: clamp(420px, 52vw, 560px); display:flex; flex-direction:column; justify-content:flex-end;
  isolation: isolate;
}
.person__img { position:absolute; inset:0; z-index:-2; }
.person__img img { width:100%; height:100%; object-fit:cover; object-position: center top; filter: grayscale(1) contrast(1.05); transition: transform .8s var(--ease), filter .6s; }
.person::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,11,12,0) 35%, rgba(11,11,12,0.85) 100%); }
.person:hover .person__img img { transform: scale(1.05); }
.person__body { padding: clamp(1.5rem,3vw,2.4rem); }
.person__role { font-size: var(--t--1); letter-spacing:0.14em; text-transform:uppercase; color: var(--blue); font-weight:600; }
.person__name { font-family:var(--display); font-size: var(--t-2); font-weight:600; margin-top:0.4rem; }
.person__line { color:#C9CACE; margin-top:0.6rem; font-size: var(--t-0); max-width: 40ch; }
.person__cta { margin-top:1.2rem; display:inline-flex; gap:0.5em; font-weight:600; font-size:var(--t--1); text-transform:uppercase; letter-spacing:0.06em; }
.person__cta .arr { transition: transform .3s var(--ease); }
.person:hover .person__cta .arr { transform: translate(3px,-3px); }
/* electric edge on hover */
.person::before { content:""; position:absolute; inset:0; z-index:1; border:0 solid var(--blue); transition: border-width .3s var(--ease); pointer-events:none; }
.person:hover::before { border-width: 5px; }

/* ===== CTA strip ===== */
.cta-strip { background: var(--blue); color:#fff; }
.cta-strip .wrap { padding-block: clamp(4rem,8vw,7rem); text-align:center; }
.cta-strip h2 { font-size: var(--t-3); max-width: 20ch; margin: 0 auto 2rem; }
.cta-strip .btn--ondark { border-color:#fff; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.folio-hero { background: var(--ink); color:#fff; padding-block: clamp(4rem,8vw,7rem) clamp(2.5rem,4vw,3.5rem); position:relative; overflow:hidden; }
.folio-hero h1 { font-size: var(--t-4); font-weight:600; max-width:15ch; margin-top:1.4rem; }
.folio-hero h1 em { font-style:normal; color: var(--blue); }
.folio-hero p { max-width:52ch; margin-top:1.6rem; color:#C9CACE; font-size: var(--t-1); }
.folio-hero__ghost { position:absolute; right:-4%; bottom:-30%; width:clamp(260px,32vw,520px); color: rgba(255,255,255,0.05); }

.filters { position: sticky; top: 116px; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); padding-block: 1.2rem; }
.filters__group { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.filters__group + .filters__group { margin-top: 0.7rem; }
.filters__label { font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--grey); font-weight:600; min-width: 5.5rem; }
.chipf { font-size: var(--t--1); font-weight:500; padding:0.45rem 1rem; border:1px solid var(--line); color:var(--ink); transition: all .22s var(--ease); }
.chipf:hover { border-color: var(--ink); }
.chipf[aria-pressed="true"] { background: var(--ink); color:#fff; border-color: var(--ink); }
.chipf--p[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }

.folio-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,360px),1fr)); gap: clamp(1rem,2vw,1.6rem); padding-block: clamp(2.5rem,5vw,4rem); }
.fcard { position:relative; overflow:hidden; background:var(--ink); color:#fff; min-height: 400px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; transition: transform .5s var(--ease); }
.fcard.hide { display:none; }
.fcard__vis { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition: transform .8s var(--ease); }
.fcard::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,11,12,0.1) 30%, rgba(11,11,12,0.55) 62%, rgba(11,11,12,0.94) 100%); }
.fcard:hover { transform: translateY(-6px); }
.fcard:hover .fcard__vis { transform: scale(1.07); }
.fcard__body { padding: clamp(1.4rem,2.5vw,1.9rem); }
.fcard__type { font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue); font-weight:700; }
.fcard h3 { font-family:var(--display); font-size: var(--t-2); font-weight:600; line-height:1.04; margin-top:0.5rem; }
.fcard__client { font-size:var(--t--1); color:#C9CACE; margin-top:0.4rem; }
.fcard__tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1.1rem; }
.tg { font-size:0.66rem; letter-spacing:0.03em; padding:0.3rem 0.65rem; background: rgba(255,255,255,0.13); color:#EDEDEF; }
.tg--p { background: var(--blue); color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.folio-empty { display:none; text-align:center; padding-block:4rem; color:var(--grey); }
.folio-empty.show { display:block; }

/* ============================================================
   TEAM / PROFILES
   ============================================================ */
.team-intro { padding-block: clamp(4rem,7vw,6rem) clamp(2rem,4vw,3rem); }
.profile { padding-block: clamp(3rem,5vw,4.5rem); }
.profile + .profile { border-top: 1px solid var(--line); }
.profile__grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:860px){ .profile__grid { grid-template-columns:1fr; } }
.profile__portrait { position:relative; overflow:hidden; aspect-ratio: 4/5; background: var(--paper-2); }
.profile__portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; filter: grayscale(1) contrast(1.05); }
.profile__portrait::after { content:""; position:absolute; inset:0; border: 0 solid var(--blue); transition: border-width .4s var(--ease); }
.profile:hover .profile__portrait::after { border-width: 6px; }
.profile__role { font-size: var(--t--1); letter-spacing:0.14em; text-transform:uppercase; color:var(--blue); font-weight:600; }
.profile__name { font-family:var(--display); font-size: var(--t-3); font-weight:600; margin-top:0.5rem; letter-spacing:-0.03em; }
.profile__tag { font-family:var(--display); font-size: var(--t-1); color:var(--ink); margin-top:0.8rem; font-weight:500; }
.profile__body { font-size: var(--t-0); }
.profile__body p + p { margin-top: 1.1rem; }
.profile__skills { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.8rem; }
.sk { font-size: var(--t--1); padding:0.42rem 0.95rem; border:1px solid var(--line); color:var(--ink); transition: all .2s var(--ease); }
.sk:hover { border-color: var(--blue); color: var(--blue); }
.profile__cta { margin-top: 2rem; }

/* creative variant — Anna: dark, more expressive */
.profile--creative { background: var(--black); color:#EDEDEF; border-top: 0 !important; }
.profile--creative .profile__name { color:#fff; }
.profile--creative .profile__name em { font-style:normal; color: var(--blue); }
.profile--creative .profile__tag { color:#C9CACE; }
.profile--creative .profile__portrait { background:#17171A; }
.profile--creative .sk { border-color: var(--line-dk); color:#EDEDEF; }
.profile--creative .sk:hover { border-color: var(--blue); color:#fff; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-block: clamp(4rem,7vw,6rem); }
.contact__grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem,6vw,6rem); align-items:start; }
@media (max-width:860px){ .contact__grid { grid-template-columns:1fr; } }
.contact h1 { font-size: var(--t-3); max-width:13ch; }
.contact__intro { margin-top:1.4rem; max-width:42ch; color: var(--grey); }
.contact__detail { margin-top: 2.2rem; }
.contact__detail h5 { font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey); margin-bottom:0.4rem; font-weight:600; }
.contact__detail a { font-family:var(--display); font-size: var(--t-1); font-weight:500; }
.contact__detail a:hover { color: var(--blue); }

.form { display:grid; gap:1.3rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }
.field { display:grid; gap:0.4rem; }
.field label { font-size:var(--t--1); font-weight:600; letter-spacing:0.02em; }
.field .req { color: var(--blue); }
.field input, .field textarea {
  font:inherit; font-size:var(--t-0); padding:0.9rem 1rem;
  border:1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize:vertical; min-height:150px; }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.form__status { font-size:var(--t--1); min-height:1.2em; }
.form__status.error { color: var(--blue); }
.form__status.ok { color: #0a8a3a; }
.form button[type="submit"] { justify-self:start; }
.form button[disabled] { opacity:0.5; cursor:not-allowed; }