:root{
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --ink:#15171C;
  --accent:#1B34A8;
  --muted:#6C7079;
  --line:#DCDEE3;
  --line-dark:rgba(255,255,255,.16);
  --wrap:1280px;
  --gut:24px;
  --edge:max(24px, calc((100vw - 1280px) / 2 + 24px));
  --fd:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --fb:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,sans-serif;
}

:where(*,*::before,*::after){box-sizing:border-box}
:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,svg){display:block;max-width:100%;height:auto}
:where(a){color:inherit;text-decoration:none}
:where(button){font:inherit;border:0;background:none}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.moldular-site{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fb);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.moldular-site h1,
.moldular-site h2,
.moldular-site h3{
  font-family:var(--fd);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.012em;
  line-height:1.04;
}

.label{
  font-family:var(--fd);
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.lede{font-size:19px;line-height:1.55;max-width:60ch}
.prose{max-width:62ch;color:var(--muted)}
.prose + .prose{margin-top:16px}
.prose strong{color:var(--ink);font-weight:600}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px}

/* ---------- header ---------- */
.mhead{background:var(--surface)}
.mhead__util{border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.mhead__util .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap}
.mhead__util a:hover{color:var(--accent)}
.mhead__util span + span{margin-left:14px}

.mhead__brand .wrap{display:flex;align-items:flex-end;gap:22px;padding-block:22px;flex-wrap:wrap}
.mhead__logo img{width:232px;height:auto;filter:invert(1)}
.mhead__tag{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}

.mnav{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.mnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px}
.mnav__list{display:flex;align-items:center;gap:30px}
.mnav__list a{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.11em;text-transform:uppercase;padding-block:18px;display:block;border-bottom:2px solid transparent}
.mnav__list a:hover,.mnav__list a:focus-visible{border-bottom-color:#fff}
.mnav__cta{background:#fff;color:var(--ink);font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;padding:11px 20px;transition:background .18s ease,color .18s ease}
.mnav__cta:hover,.mnav__cta:focus-visible{background:var(--accent);color:#fff}
.mnav__toggle{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--bg)}
.hero__text{padding:60px var(--gut) 60px var(--edge)}
.hero__eyebrow{color:var(--accent);margin-bottom:20px}
.hero h1{font-size:clamp(2.3rem,4.1vw,3.7rem);line-height:1.02;margin-bottom:20px}
.hero__sub{font-size:19px;line-height:1.5;color:var(--muted);max-width:34ch}
.hero__actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero__media{position:relative;align-self:stretch;min-height:min(66vh,560px);overflow:hidden;background:var(--ink)}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.btn{display:inline-block;font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:16px 28px;border:1px solid var(--ink);transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--accent);border-color:var(--accent)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);color:#fff}

/* ---------- section furniture ---------- */
.sec{padding-block:96px}
.sec--tight{padding-block:72px}
.sec__head{margin-bottom:52px;max-width:52ch}
.sec__head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:16px}
[id]{scroll-margin-top:76px}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(12,1fr);gap:64px 40px;align-items:start}
.cap--a{grid-column:span 5}
.cap--b{grid-column:span 7}
.cap--c{grid-column:span 7}
.cap--d{grid-column:span 5}
.cap figure{margin-bottom:26px;overflow:hidden;background:var(--line);height:clamp(300px,33vw,500px)}
.cap figure img{width:100%;height:100%;object-fit:cover}
.cap h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:12px}
.cap p{color:var(--muted);max-width:52ch}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.pillar{padding:30px 26px 0 0}
.pillar + .pillar{border-left:1px solid var(--line);padding-left:26px}
.pillar h3{font-size:15px;letter-spacing:.1em;margin-bottom:10px}
.pillar p{font-size:15px;color:var(--muted);line-height:1.55}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;background:var(--surface)}
.about__media{position:relative;align-self:stretch;min-height:520px;overflow:hidden;background:var(--line)}
.about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about__text{padding:80px var(--edge) 80px 60px}
.about h2{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.06;margin-bottom:26px}
.about h2 .num{font-size:1.75em;line-height:.9;letter-spacing:-.03em;display:inline-block;vertical-align:-.055em}
.about__clients{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:32px;border-top:1px solid var(--line);padding-top:22px}
.about__clients li{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* ---------- works ---------- */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:end}
.works figure{overflow:hidden;background:var(--line)}
.works figure img{width:100%;height:100%;object-fit:cover}
.works .w1{grid-column:span 5;aspect-ratio:4/3}
.works .w2{grid-column:span 4;aspect-ratio:4/3}
.works .w3{grid-column:span 3;aspect-ratio:3/4}
.works__note{margin-top:22px;color:var(--muted);font-size:15px;max-width:70ch}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:#fff}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-block:88px}
.contact h2{font-size:clamp(1.8rem,3.1vw,2.6rem);margin-bottom:20px}
.contact p{color:rgba(255,255,255,.72);max-width:46ch}
.cdl{display:grid;gap:0}
.cdl div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line-dark)}
.cdl div:last-child{border-bottom:1px solid var(--line-dark)}
.cdl dt{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-top:3px}
.cdl dd a{border-bottom:1px solid rgba(255,255,255,.3)}
.cdl dd a:hover,.cdl dd a:focus-visible{border-bottom-color:#fff}
.cdl small{display:block;color:rgba(255,255,255,.5);font-size:13px;margin-top:4px}

/* ---------- footer ---------- */
.mfoot{background:var(--ink);color:rgba(255,255,255,.72);border-top:1px solid var(--line-dark)}
.mfoot .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:30px;flex-wrap:wrap;font-size:14px}
.mfoot img{width:172px}
.mfoot a:hover{color:#fff}

/* ---------- page head ---------- */
.phead{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(2.2rem,4vw,3.5rem);margin-bottom:18px}
.phead__lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:56ch}

.about--flip .about__text{padding:80px 60px 80px var(--edge)}
.about--flip .about__media{order:2}
.about__more,.works__more{margin-top:32px}

/* ---------- gallery grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;grid-auto-rows:clamp(180px,19vw,290px);grid-auto-flow:dense}
.grid__item{overflow:hidden;background:var(--line)}
/* One 2x2 plate every six items fills a 3x3 block exactly, so no holes open up. */
.grid__item:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.grid__item img{width:100%;height:100%;object-fit:cover}

/* ---------- form ---------- */
.contact-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.mform{margin-top:8px;max-width:44ch}
.mform__row{display:grid;gap:8px;margin-bottom:22px}
.mform label{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.mform label span{color:var(--muted);letter-spacing:.06em}
.mform input,.mform textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:13px 14px;width:100%}
.mform input:focus,.mform textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}
.mform textarea{resize:vertical;min-height:150px}
.mform ::placeholder{color:var(--muted);opacity:1}
.mform__trap{position:absolute;left:-9999px}
.mform button{cursor:pointer}

.notice{padding:14px 18px;margin-bottom:28px;font-size:16px;border-left:3px solid var(--accent);background:var(--surface);max-width:52ch}
.notice--bad{border-left-color:#B0141B}

.contact-aside__media{margin-top:32px;overflow:hidden;background:var(--line);aspect-ratio:4/3}
.contact-aside__media img{width:100%;height:100%;object-fit:cover}
.cdl--light div{border-top-color:var(--line)}
.cdl--light div:last-child{border-bottom-color:var(--line)}
.cdl--light dt{color:var(--muted)}
.cdl--light dd a{border-bottom-color:var(--line)}
.cdl--light dd a:hover,.cdl--light dd a:focus-visible{border-bottom-color:var(--accent);color:var(--accent)}
.cdl--light small{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero__text{padding:56px var(--gut) 48px;order:1}
  .hero__media{order:2;min-height:58vh}
  .cap--a,.cap--b,.cap--c,.cap--d{grid-column:span 6}
  .about{grid-template-columns:1fr}
  .about__media{min-height:56vh;order:2}
  .about__text{order:1;padding:64px var(--gut)}
  .contact .wrap{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar{padding-right:20px}
  .pillar:nth-child(odd){border-left:0;padding-left:0}
  .pillar:nth-child(even){border-left:1px solid var(--line);padding-left:22px}
  .pillar:nth-child(n+3){margin-top:26px;border-top:1px solid var(--line);padding-top:26px}
  .works .w1{grid-column:span 7}
  .works .w2{grid-column:span 5}
  .works .w3{grid-column:span 6}
  .about--flip .about__text{order:1;padding:64px var(--gut)}
  .about--flip .about__media{order:2}
  .contact-cols{grid-template-columns:1fr;gap:48px}
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(160px,26vw,260px)}
  .grid__item:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
}

@media (max-width:900px){
  .mnav .wrap{min-height:52px}
  .mnav__list{display:none}
  .mnav__toggle{display:block}
  .mnav__toggle summary{list-style:none;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.11em;text-transform:uppercase;padding:8px 0}
  .mnav__toggle summary::-webkit-details-marker{display:none}
  .mnav__panel{position:absolute;left:0;right:0;background:var(--ink);border-top:1px solid var(--line-dark);padding:8px var(--gut) 20px}
  .mnav__panel a{display:block;font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:13px 0;border-bottom:1px solid var(--line-dark)}
  .mnav__cta{order:2}
}

@media (max-width:680px){
  body.moldular-site{font-size:16px}
  .sec{padding-block:64px}
  .caps{gap:44px 20px}
  .cap--a,.cap--b,.cap--c,.cap--d{grid-column:span 12}
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar + .pillar{border-left:0;padding-left:0;padding-right:0}
  .pillar + .pillar{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}
  .pillar:nth-child(n+3){margin-top:24px}
  .works .w1,.works .w2,.works .w3{grid-column:span 12;aspect-ratio:4/3}
  .cdl div{grid-template-columns:1fr;gap:4px}
  .mhead__util .wrap{font-size:12px;justify-content:center;padding-block:7px}
  .mhead__util .wrap > span:first-child{display:none}
  .mhead__util span + span{margin-left:10px}
  .mhead__brand .wrap{padding-block:14px;gap:0 14px;align-items:center}
  .mhead__logo img{width:168px}
  .mhead__tag{font-size:10px;letter-spacing:.16em;padding-bottom:0}
  .hero__text{padding:40px var(--gut) 40px}
  .hero__media{min-height:46vh}
  .about__text{padding:52px var(--gut)}
  .contact .wrap{padding-block:64px}
  .phead{padding:48px 0 40px}
  .grid{grid-template-columns:1fr;gap:16px;grid-auto-rows:clamp(150px,42vw,240px)}
  .grid__item:nth-child(6n+1){grid-column:span 1;grid-row:span 2}
  .about--flip .about__text{padding:52px var(--gut)}
  .mform{max-width:none}
}