
:root {
  --red:#f94141;
  --red-deep:#c92f2f;
  --red-on-light:#b82626;
  --red-on-dark:#ff7c78;
  --anthracite:#2d2d2d;
  --ink:#222;
  --paper:#f4f1ec;
  --white:#fff;
  --muted:#6c6864;
  --font-display:"Arial Narrow","Helvetica Neue Condensed","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --display-weight:500;
  --display-tracking:-.025em;
  --display-leading:.96;
  --title-xl:clamp(3.25rem,5.15vw,6.25rem);
  --title-lg:clamp(2.8rem,4.8vw,5.65rem);
  --title-md:clamp(2.55rem,4.35vw,5.1rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
svg { display:block; max-width:100%; }
main,section,header,footer,nav,.hero-grid>*,
.section-heading>*,.project-intro>*,.people>*,
.contact>*,.contact-details>*,.ecosystem,.hero-card { min-width:0; }
.hero { min-height:100svh; overflow:hidden; background:var(--red-deep); color:#fff; padding:0 clamp(1.25rem,3.8vw,4.5rem); }
.header { display:flex; min-height:110px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.35); }
.brand { width:clamp(220px,25vw,365px); }
.brand img { display:block; width:100%; }
nav { display:flex; align-items:center; gap:clamp(1rem,2.4vw,3rem); font-size:.92rem; }
nav a { position:relative; padding:.72rem 0; }
nav a:not(.nav-cta)::after { position:absolute; right:0; bottom:.25rem; left:0; height:1px; background:currentColor; content:""; transform:scaleX(0); transform-origin:right; transition:transform 180ms ease; }
nav a:hover::after,nav a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.nav-cta { display:inline-flex; align-items:center; gap:.7rem; border:1px solid rgba(255,255,255,.6); border-radius:99px; padding:.72rem 1rem; }
.hero-grid { display:grid; min-height:calc(100svh - 188px); grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr); gap:clamp(2rem,5vw,7rem); align-items:center; padding:clamp(3rem,5.2vw,6rem) 0; }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-label p { margin:0 0 1.6rem; font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
h1,.section-heading h2,.project-intro h2,.about-intro h2,.contact-main h2 {
  max-width:100%;
  margin:0;
  font-family:var(--font-display);
  font-stretch:condensed;
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:var(--display-leading);
  overflow-wrap:normal;
  text-transform:uppercase;
  text-wrap:balance;
  word-break:normal;
}
h1 { width:min(100%,780px); font-size:var(--title-xl); }
.hero-intro { max-width:650px; margin:clamp(1.8rem,3vw,2.8rem) 0 0; font-size:clamp(1.05rem,1.3vw,1.35rem); line-height:1.55; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }
.button { display:inline-flex; min-height:56px; align-items:center; justify-content:space-between; gap:2rem; border:1px solid #fff; border-radius:4px; padding:0 1.2rem; font-size:.95rem; font-weight:600; transition:transform 180ms ease,background 180ms ease,color 180ms ease; }
.button:hover,.button:focus-visible { transform:translateY(-2px); }
.button-white { background:#fff; color:var(--anthracite); }
.button-outline:hover,.button-outline:focus-visible { background:#fff; color:var(--red-on-light); }
.ecosystem { position:relative; display:grid; min-height:590px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; align-content:center; }
.connector { position:absolute; inset:15% 10%; pointer-events:none; }
.connector i { position:absolute; border:1px solid rgba(255,255,255,.55); }
.connector i:nth-child(1) { inset:18% 14%; }
.connector i:nth-child(2) { top:0; right:52%; bottom:55%; left:0; }
.connector i:nth-child(3) { top:58%; right:0; bottom:0; left:58%; }
.hero-card { position:relative; z-index:1; display:flex; width:100%; max-width:100%; min-height:270px; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:8px; background:rgba(45,45,45,.09); padding:1rem; backdrop-filter:blur(5px); transition:transform 180ms ease,background 180ms ease; }
.hero-card:nth-of-type(3),.hero-card:nth-of-type(5) { transform:translateY(2.4rem); }
.hero-card:hover { background:rgba(45,45,45,.18); }
.card-meta { display:flex; justify-content:space-between; font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hero-card h2 { margin:0 0 .4rem; font-size:clamp(1.25rem,1.6vw,1.8rem); }
.hero-card p { max-width:29ch; margin:0; font-size:.78rem; line-height:1.5; }
.card-art { position:relative; height:82px; }
.card-art i { position:absolute; display:block; border:1px solid rgba(255,255,255,.85); }
.art-1 i:nth-child(1) { inset:5px 32%; transform:rotate(45deg); }
.art-1 i:nth-child(2) { inset:16px 38%; border-radius:50%; }
.art-2 i:nth-child(1) { inset:8px 12%; }
.art-2 i:nth-child(2) { top:8px; right:12%; left:12%; height:19px; border-width:0 0 1px; }
.art-2 i:nth-child(3) { top:14px; left:18%; width:24%; border-width:1px 0 0; }
.art-3 i:nth-child(1) { inset:4px 23%; transform:rotate(-8deg); }
.art-3 i:nth-child(2),.art-3 i:nth-child(3) { right:31%; left:31%; transform:rotate(-8deg); }
.art-3 i:nth-child(2) { top:31px; }.art-3 i:nth-child(3) { top:50px; }
.art-4 i:nth-child(1) { inset:3px 34%; border-radius:50%; }
.art-4 i:nth-child(2),.art-4 i:nth-child(3) { right:27%; width:46%; }
.art-4 i:nth-child(2) { top:15px; transform:rotate(28deg); }.art-4 i:nth-child(3) { top:61px; transform:rotate(-28deg); }
.hero-foot { display:flex; min-height:78px; align-items:center; gap:.7rem; border-top:1px solid rgba(255,255,255,.35); font-size:.74rem; }
.hero-foot span:not(:last-of-type)::after { margin-left:.7rem; content:"·"; }
.hero-foot a { display:grid; width:40px; height:40px; margin-left:auto; place-items:center; border:1px solid rgba(255,255,255,.6); border-radius:50%; }

.services,.about { display:grid; grid-template-columns:minmax(160px,.22fr) minmax(0,.78fr); column-gap:clamp(2rem,6vw,7rem); padding:clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,6.5rem); }
.section-label { display:flex; align-items:flex-start; gap:.85rem; color:var(--red-on-light); }
.section-label>span { display:grid; width:36px; height:36px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:.62rem; }
.section-label p { margin-top:.68rem; }
.section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.42fr); gap:3rem; align-items:end; }
.section-heading h2 { width:min(100%,18ch); font-size:var(--title-lg); }
.section-heading>p { margin:0 0 .3rem; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.service-grid { grid-column:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:4.8rem; border-top:1px solid #c7c2bc; }
.service-grid article { position:relative; min-height:270px; border-right:1px solid #c7c2bc; padding:1.35rem; }
.service-grid article:first-child { border-left:1px solid #c7c2bc; }
.service-grid article>span { color:var(--red-on-light); font-size:.66rem; }
.service-grid h3 { margin:4.2rem 0 .9rem; font-size:1.26rem; }
.service-grid p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.58; }
.service-grid article>span:last-child { position:absolute; right:1.15rem; bottom:1.15rem; font-size:1.15rem; }

.projects { background:var(--anthracite); color:#fff; padding:clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,6.5rem); }
.project-intro { display:grid; grid-template-columns:minmax(160px,.22fr) minmax(0,.78fr); column-gap:clamp(2rem,6vw,7rem); }
.project-intro h2 { width:min(100%,19ch); font-size:var(--title-lg); }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:5rem; }
.project-card { display:flex; min-height:490px; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid rgba(255,255,255,.32); border-radius:7px; background:#353535; padding:1.2rem; transition:border 180ms ease,transform 180ms ease,background 180ms ease; }
a.project-card:hover,a.project-card:focus-visible { border-color:var(--red); background:#3a3434; transform:translateY(-4px); }
.project-top { display:flex; justify-content:space-between; color:#c4bfbb; font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; }
.project-art { position:relative; height:185px; margin:1rem 0; }
.project-art i { position:absolute; display:block; border:1px solid var(--red); }
.project-art-1 i:nth-child(1) { inset:9% 26%; transform:rotate(45deg); }.project-art-1 i:nth-child(2) { inset:24% 38%; border-radius:50%; }
.project-art-2 i:nth-child(1) { inset:13% 8%; }.project-art-2 i:nth-child(2) { top:13%; right:8%; left:8%; height:28%; border-width:0 0 1px; }.project-art-2 i:nth-child(3) { right:18%; bottom:13%; width:32%; height:43%; background:var(--red); }
.project-art-3 i:nth-child(1) { inset:7% 24%; border-radius:50%; }.project-art-3 i:nth-child(2) { top:28%; right:12%; left:12%; transform:rotate(25deg); }.project-art-3 i:nth-child(3) { right:12%; bottom:23%; left:12%; transform:rotate(-25deg); }
.project-copy h3 { margin:0 0 .75rem; font-size:clamp(1.6rem,2.2vw,2.5rem); letter-spacing:-.03em; }
.project-copy p { max-width:43ch; margin:0; color:#ccc7c2; font-size:.9rem; line-height:1.6; }
.projects .section-label { color:var(--red-on-dark); }
.project-link { display:flex; justify-content:space-between; margin-top:1.4rem; color:var(--red-on-dark); font-size:.82rem; font-weight:700; }
.ecosystem-note { max-width:700px; margin:5rem 0 0 auto; color:#d8d3ce; font-size:clamp(1.25rem,2vw,2rem); line-height:1.45; }

.about { background:var(--paper); }
.about-intro { grid-column:2; }.dark { color:var(--red-on-light); }
.about-intro h2 { width:min(100%,19ch); font-size:var(--title-lg); }
.people { grid-column:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:4.8rem; }
.person { display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden; border:1px solid #c7c2bc; border-radius:7px; background:#eeeae4; }
.portrait { position:relative; min-height:460px; overflow:hidden; background:#ded9d2; }
.portrait img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter 220ms ease,transform 400ms ease; }
.person:hover .portrait img { filter:grayscale(0); transform:scale(1.025); }
.portrait::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(242,75,71,.42)); content:""; }
.portrait span { position:absolute; z-index:1; right:1rem; bottom:1rem; color:#fff; font-size:.65rem; }
.person-copy { display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.2rem,2.2vw,2.2rem); }
.person-copy h3 { margin:0 0 1.1rem; font-size:clamp(1.6rem,2.2vw,2.4rem); letter-spacing:-.03em; }
.person-copy>p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.65; }
.person-copy .credentials { margin-top:2rem; color:var(--red-on-light); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.person-link { display:inline-flex; width:max-content; max-width:100%; align-items:center; justify-content:space-between; gap:1.25rem; margin-top:1rem; border-bottom:1px solid currentColor; padding:.35rem 0; color:var(--red-on-light); font-size:.78rem; font-weight:700; }
.person-link:hover,.person-link:focus-visible { color:var(--red-deep); }

.contact { display:grid; grid-template-columns:minmax(160px,.22fr) minmax(0,.52fr) minmax(260px,.26fr); gap:clamp(2rem,6vw,7rem); background:var(--red-deep); color:#fff; padding:clamp(5rem,9vw,9rem) clamp(1.25rem,5vw,6.5rem); }
.contact .section-label { color:#fff; }
.contact-main h2 { width:min(100%,12ch); font-size:var(--title-xl); }
.contact-button { margin-top:2.5rem; }
.contact-details { align-self:end; border-top:1px solid rgba(255,255,255,.5); }
.contact-details>div { display:grid; grid-template-columns:.8fr 1.2fr; gap:1rem; border-bottom:1px solid rgba(255,255,255,.35); padding:1.2rem 0; }
.contact-details span { font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.contact-details p { margin:0; font-size:.88rem; line-height:1.55; }
footer { display:grid; grid-template-columns:.7fr 1.1fr .8fr; gap:3rem; align-items:end; background:var(--red-deep); color:#fff; border-top:1px solid rgba(255,255,255,.35); padding:2.5rem clamp(1.25rem,5vw,6.5rem); }
.footer-brand { width:245px; }footer p { margin:0; font-size:.88rem; }footer>div { display:flex; justify-content:flex-end; gap:1.4rem; font-size:.72rem; }
:focus-visible { outline:3px solid var(--anthracite); outline-offset:4px; }
.hero :focus-visible,.projects :focus-visible,.contact :focus-visible,footer :focus-visible { outline-color:#fff; }

@media (max-width:1320px) {
  .contact { grid-template-columns:minmax(150px,.3fr) minmax(0,1fr); }
  .contact-details { grid-column:2; width:min(100%,520px); margin-top:1rem; }
}
@media (max-width:1150px) {
  .hero-grid { grid-template-columns:1fr; }.ecosystem { min-height:auto; }.hero-card:nth-of-type(3),.hero-card:nth-of-type(5) { transform:none; }
  .services,.about { grid-template-columns:1fr; }.section-heading,.about-intro,.people,.service-grid { grid-column:1; }.section-heading,.about-intro { margin-top:2.5rem; }
  .project-intro { grid-template-columns:1fr; }.project-intro h2 { margin-top:2.5rem; }.project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.people { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .header { min-height:86px; gap:1rem; }.brand { width:min(200px,58vw); }nav { flex:0 0 auto;}nav a:not(.nav-cta) { display:none; }.nav-cta { padding:.58rem .8rem; font-size:.76rem; }
  .hero-grid { min-height:auto; padding:4rem 0 3rem; }
  h1 { font-size:clamp(2.25rem,10.8vw,3.7rem); }
  .section-heading h2,.project-intro h2,.about-intro h2,.contact-main h2 {
    width:100%;
    font-size:clamp(1.95rem,9.4vw,3.15rem);
    letter-spacing:-.018em;
    line-height:1;
    text-wrap:pretty;
  }
  .actions,.button { width:100%; }
  .ecosystem { width:100%; max-width:100%; grid-template-columns:minmax(0,1fr); }.connector { display:none; }.hero-card { width:100%; max-width:100%; min-height:225px; }.hero-foot span { display:none; }
  .section-heading { grid-template-columns:1fr; gap:1.5rem; }.service-grid { grid-template-columns:1fr; margin-top:3.5rem; }
  .service-grid article,.service-grid article:first-child { min-height:205px; border-right:0; border-bottom:1px solid #c7c2bc; border-left:0; }.service-grid h3 { margin-top:2.5rem; }
  .project-grid { grid-template-columns:1fr; }.project-card { min-height:440px; }.person { grid-template-columns:1fr; }.portrait { min-height:390px; }
  .contact { grid-template-columns:minmax(0,1fr); }.contact-main,.contact-details { grid-column:1; width:100%; }.contact-main { margin-top:2rem; }
  footer { grid-template-columns:1fr; gap:1.5rem; }footer>div { justify-content:flex-start; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .button:hover,.button:focus-visible,a.project-card:hover,a.project-card:focus-visible,.person:hover .portrait img { transform:none; }
}
