/* Marketing + Web — visual pass 1B. Keeps the N1K foundation, changes only page composition. */

.page-hero { padding-block:clamp(92px,10vw,132px) clamp(42px,5vw,72px); }
.page-hero-inner { max-inline-size:62ch; }
.page-hero .lead { max-inline-size:52ch; }

/* Fast, typographic scan instead of another panel grid. */
.arrival-grid { display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line-soft); }
.arrival-grid article { position:relative; min-height:190px; padding:22px 24px 26px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.arrival-grid article:nth-child(1),.arrival-grid article:nth-child(2),.arrival-grid article:nth-child(3) { grid-column:span 2; }
.arrival-grid article:nth-child(4) { grid-column:2 / span 2; }
.arrival-grid article:nth-child(5) { grid-column:4 / span 2; }
.arrival-grid b { display:block; margin-bottom:44px; color:var(--accent); font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.1em; }
.arrival-grid h3 { max-inline-size:20ch; margin:0 0 10px; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.15; }
.arrival-grid p { max-inline-size:31ch; margin:0; color:var(--muted); font-size:13px; line-height:1.55; text-wrap:pretty; }

/* The capabilities section deliberately stays quieter than the situations and portfolio. */
.work-groups { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 28px; }
.work-groups div { padding:4px clamp(18px,2vw,30px) 4px 0; border-right:1px solid var(--line-soft); }
.work-groups div + div { padding-left:clamp(18px,2vw,30px); }
.work-groups div:last-child { border-right:0; padding-right:0; }
.work-groups h3 { margin:0 0 14px; color:var(--accent); font-size:clamp(1.25rem,1.7vw,1.55rem); line-height:1; }
.work-groups p { margin:0; color:var(--muted); font-size:14px; line-height:1.62; }
.capabilities-section .split { gap:clamp(34px,6vw,96px); }

/* Real screens are the main proof: primary client work gets space, secondary work remains legible. */
.web-showcase { display:grid; grid-template-columns:minmax(0,1.72fr) minmax(300px,.88fr); gap:clamp(20px,3vw,44px); align-items:start; }
.web-showcase-secondary { display:grid; gap:clamp(20px,3vw,34px); }
.web-work { display:block; color:inherit; }
.web-work figure { position:relative; margin:0; overflow:hidden; background:var(--panel); border:1px solid var(--line-soft); }
.web-work img { display:block; width:100%; height:auto; aspect-ratio:36/25; object-fit:cover; object-position:top; transition:transform .55s var(--ease); }
.web-work figure::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.3)); pointer-events:none; }
.web-work figcaption { position:absolute; z-index:1; left:16px; bottom:14px; color:rgba(255,255,255,.82); font:500 9px/1 "JetBrains Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.web-work > div { padding:18px 2px 0; }
.web-work--primary > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.72fr); column-gap:28px; align-items:end; padding-top:22px; }
.web-work--primary > div span { grid-column:1/-1; margin-bottom:14px; color:var(--accent); font:500 10px/1.3 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.web-work h3 { margin:0; font-size:clamp(1.35rem,2vw,2rem); line-height:1.08; }
.web-work p { margin:0; color:var(--muted); font-size:14px; line-height:1.58; text-wrap:pretty; }
.web-work b { display:block; margin-top:16px; color:var(--accent); font:500 10px/1.3 "JetBrains Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.web-work b i { display:inline-block; font-style:normal; transition:transform .25s var(--ease); }
.web-showcase-secondary h3 { font-size:clamp(1.1rem,1.5vw,1.35rem); }
.web-showcase-secondary .web-work > div { padding-top:13px; }
.web-showcase-secondary .web-work b { margin-top:12px; }
.web-work:hover img,.web-work:focus-visible img { transform:scale(1.025); }
.web-work:hover b i,.web-work:focus-visible b i { transform:translateX(4px); }
.web-work:focus-visible { outline:2px solid var(--accent); outline-offset:8px; }

/* Marketing is a compact fact/narrative pair, not a second portfolio grid. */
.marketing-results { padding-top:clamp(72px,10vw,150px); }
.results-layout { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(240px,.82fr); gap:1px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.direct-result,.avito-result { padding:clamp(26px,4vw,50px) 0; }
.direct-result { padding-right:clamp(26px,5vw,76px); }
.avito-result { padding-left:clamp(26px,5vw,76px); border-left:1px solid var(--line-soft); align-self:center; }
.direct-result > span,.avito-result > span { display:block; margin-bottom:20px; color:var(--accent); font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.direct-result strong { display:block; font-family:"Unbounded",sans-serif; font-size:clamp(2rem,4.4vw,4.5rem); font-weight:440; line-height:.98; letter-spacing:-.07em; }
.direct-result strong i { color:var(--accent); font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.03em; }
.direct-result p,.avito-result p { max-inline-size:46ch; margin:22px 0 0; color:var(--muted); font-size:14px; line-height:1.6; text-wrap:pretty; }
.avito-result h3 { max-inline-size:18ch; margin:0; font-size:clamp(1.25rem,1.8vw,1.65rem); line-height:1.12; }

@media (max-width:860px) {
  .arrival-grid { grid-template-columns:repeat(2,1fr); }
  .arrival-grid article,.arrival-grid article:nth-child(n) { grid-column:auto; }
  .arrival-grid article:nth-child(5) { grid-column:1 / -1; }
  .web-showcase { grid-template-columns:1fr; }
  .web-showcase-secondary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .web-work--primary > div { grid-template-columns:minmax(0,1fr) minmax(210px,.7fr); }
}

@media (max-width:620px) {
  .page-hero { padding-top:88px; padding-bottom:44px; }
  .arrival-grid { display:block; }
  .arrival-grid article { min-height:0; padding:18px 0 20px 38px; border-right:0; }
  .arrival-grid b { position:absolute; left:0; top:19px; margin:0; }
  .arrival-grid h3 { margin-bottom:7px; font-size:1rem; }
  .arrival-grid p { font-size:13px; }
  .work-groups { display:block; margin-bottom:24px; }
  .capabilities-section { padding-block:52px; }
  .capabilities-section .split { display:block; }
  .capabilities-section .section-head { margin-bottom:30px !important; }
  .work-groups div,.work-groups div + div { padding:18px 0; border-right:0; border-bottom:1px solid var(--line-soft); }
  .work-groups div:first-child { padding-top:0; }
  .work-groups h3 { margin-bottom:9px; font-size:1.25rem; }
  .web-showcase-secondary { display:block; }
  .web-showcase-secondary .web-work + .web-work { margin-top:28px; }
  .web-work--primary img { aspect-ratio:36/25; }
  .web-showcase-secondary .web-work img { aspect-ratio:16/11; }
  .web-work--primary > div { display:block; padding-top:16px; }
  .web-work--primary > div span { display:block; margin-bottom:10px; }
  .web-work h3 { font-size:1.35rem; }
  .web-work p { margin-top:10px; font-size:13px; }
  .results-layout { display:block; }
  .direct-result { padding-right:0; }
  .avito-result { padding-left:0; border-left:0; border-top:1px solid var(--line-soft); }
  .direct-result strong { font-size:clamp(2.2rem,11vw,3.2rem); }
}

@media (prefers-reduced-motion:reduce) { .web-work img,.web-work b i { transition:none; } }